Tutoriel Underscore.js : Simplifiez les opérations sur les tableaux et objets JavaScript

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction

JavaScript est un langage de programmation essentiel pour le développement web, mais travailler avec des tableaux et des objets peut rapidement rendre le code complexe. En particulier, des tâches comme le filtrage et la transformation de données nécessitent souvent une syntaxe plus propre et plus efficace.

C’est là que la bibliothèque JavaScript Underscore.js entre en jeu. En utilisant cette bibliothèque, même les opérations de données complexes peuvent être écrites de manière simple et lisible.

Pourquoi Underscore.js se démarque

1. Un code plus concis

• Les opérations qui deviennent souvent verbeuses en JavaScript pur peuvent être exprimées en quelques lignes seulement avec Underscore.js.

1. Un ensemble riche de fonctions pratiques

• Elle fournit de nombreuses fonctionnalités, y compris les opérations sur les tableaux, la manipulation d’objets et le contrôle des fonctions.

1. Légère et flexible

• Parce que vous ne chargez que ce dont vous avez besoin, l’impact sur les performances peut être maintenu au minimum.

Ce que vous apprendrez dans cet article

• Comment installer Underscore.js
• Fonctions principales et exemples pratiques
• Cas d’utilisation réels qui facilitent le développement

2. Qu’est‑ce qu’Underscore.js ?

Aperçu d’Underscore.js

Underscore.js est une bibliothèque légère qui simplifie la manipulation de données en JavaScript. Elle offre un large éventail de fonctions pratiques conçues principalement pour rationaliser les opérations sur les tableaux et les objets, et elle est souvent décrite comme une boîte à outils utilitaire JavaScript.

Les fonctionnalités standard de JavaScript sont puissantes, mais le code peut devenir long et la lisibilité en pâtir. Utiliser Underscore.js aide à résoudre ces problèmes, vous permettant d’écrire un code plus simple et plus maintenable.

Fonctionnalités clés

1. Une grande variété de fonctions utilitaires

• Elle propose de nombreuses fonctions, y compris les opérations sur les tableaux, les opérations sur les objets et le contrôle des fonctions.

1. Un code simple et lisible

• Comparé aux modèles JavaScript traditionnels, elle réduit le code boilerplate et améliore la lisibilité.

1. Aucune dépendance

• Parce qu’elle ne dépend d’aucune autre bibliothèque, vous pouvez l’utiliser de façon flexible dans de nombreux environnements.

1. Légère et rapide

• Sa petite taille et son faible overhead en font un bon choix même pour les applications web modernes.

Underscore.js vs. Lodash

Une bibliothèque fréquemment comparée est Lodash. Lodash s’appuie sur Underscore.js et étend ses fonctionnalités, avec des différences telles que les suivantes.

Le choix dépend de vos exigences de projet, mais si vous recherchez une bibliothèque simple et légère, Underscore.js est une option solide.

Comment Underscore.js peut‑il aider ?

Underscore.js est particulièrement utile dans les situations suivantes.

1. Manipulation de données de type tableau

• Elle permet d’écrire un code concis pour des opérations comme le filtrage et le mapping.

1. Manipulation d’objets

• Vous pouvez facilement récupérer des clés/valeurs et fusionner des éléments, entre autres tâches.

1. Contrôle des fonctions

• Elle facilite la mise en œuvre de contrôles comme « exécuter une seule fois » ou l’exécution différée.

1. Exploitation des aides utilitaires

• Vous pouvez également l’utiliser pour le tri, la randomisation, et même comme moteur de templating simple.

3. Installation

Dans cette section, nous parcourrons les étapes concrètes pour ajouter Underscore.js à votre projet. Vous apprendrez à la fois l’approche CDN et comment l’installer localement en téléchargeant les fichiers.

1. Utiliser un CDN

Un CDN (Content Delivery Network) est un moyen pratique d’utiliser une bibliothèque en la liant simplement à un fichier hébergé sur Internet. Vous pouvez utiliser Underscore.js en ajoutant le code suivant à l’intérieur de la balise <head> ou à la fin de la balise <body> de votre fichier HTML.

Exemple : Ajout à un fichier HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Underscore.jsの導入</title>
  <!-- Underscore.jsのCDNリンク -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Underscore.jsのテスト</h1>
  <script>
    // 動作確認コード
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Lorsque vous ouvrez ce fichier dans un navigateur, vous pouvez confirmer que seuls les nombres pairs sont affichés dans la console des Outils de développement.

2. Installation avec npm ou yarn

En utilisant npm ou yarn, vous pouvez également utiliser Underscore.js dans un environnement local ou dans un projet Node.js.

Installation avec npm

npm install underscore

Installation avec yarn

yarn add underscore

Exemple d’importation dans un fichier JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Télécharger le fichier et l’utiliser localement

1. Rendez-vous sur le site officiel ( underscorejs.org ).
2. Téléchargez le dernier fichier JavaScript depuis la section « Download ».
3. Placez le fichier téléchargé dans un dossier approprié de votre projet (par ex., js/ ).
4. Liez‑le dans votre fichier HTML à l’aide d’une balise script.

   <script src="js/underscore-min.js"></script>
   

4. Lors de l’utilisation d’un bundler de modules

Si vous utilisez un bundler de modules tel que Webpack ou Parcel, vous pouvez également intégrer Underscore.js facilement.

Exemple : configuration Webpack

1. Installez‑le avec npm.

   npm install underscore
   

2. Importez‑le dans votre fichier JavaScript.

   import _ from 'underscore';
   

3. Regroupez‑le selon les besoins et utilisez‑le dans votre projet.

Dépannage

1. Si vous voyez « Uncaught ReferenceError: _ is not defined »

• Underscore.js n’est peut‑être pas chargé correctement. Vérifiez à nouveau votre lien CDN ou le chemin d’importation.

2. Si des erreurs surviennent après l’installation avec npm

• Mettez à jour Node.js et npm vers les dernières versions.

4. Utilisation de base

Dans cette section, nous présenterons certaines des fonctions principales d’Underscore.js avec des exemples pratiques. Ces fonctions sont extrêmement utiles pour travailler efficacement avec les tableaux et les objets.

1. Parcourir les tableaux – _.each()

_.each() est une fonction utilisée pour parcourir des tableaux ou des objets.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Output each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Sortie :

1  
2  
3  
4  
5

Points clés :

• Elle fonctionne non seulement avec les tableaux, mais aussi avec les objets.
• Le rappel reçoit l’élément, son indice et la collection entière.

2. Mapper les tableaux – _.map()

_.map() applique une fonction à chaque élément d’un tableau et renvoie un nouveau tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Sortie :

[2, 4, 6, 8, 10]

3. Trouver le premier élément correspondant – _.find()

_.find() renvoie le premier élément qui correspond à une condition donnée.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Sortie :

3

4. Filtrer tous les éléments correspondants – _.filter()

_.filter() extrait tous les éléments qui correspondent à une condition et les renvoie sous forme d’un nouveau tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Extract only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Sortie :

[2, 4]

5. Mélanger les éléments d’un tableau – _.shuffle()

_.shuffle() réarrange aléatoirement les éléments d’un tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Randomly shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Sortie : (exemple)

[3, 5, 1, 4, 2]

6. Suppression des éléments en double – _.uniq()

_.uniq() supprime les valeurs dupliquées d’un tableau.

Exemple

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicate elements
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Sortie :

[1, 2, 3, 4, 5]

Résumé

Jusqu’à présent, nous avons couvert les fonctions de base d’Underscore.js avec des exemples pratiques.

• _.each() pour itérer sur les éléments
• _.map() pour créer de nouveaux tableaux
• _.find() et _.filter() pour extraire les éléments correspondants
• _.shuffle() pour randomiser les éléments
• _.uniq() pour supprimer les doublons

5. Utilisation avancée

Dans cette section, nous explorerons des fonctions plus avancées d’Underscore.js et des cas d’utilisation pratiques. Ces fonctionnalités permettent une manipulation et une analyse de données plus sophistiquées.

1. Tri des tableaux – _.sortBy()

_.sortBy() trie les éléments d’un tableau selon une clé ou une condition spécifiée.

Exemple

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Sortie :

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Regroupement des tableaux – _.groupBy()

_.groupBy() regroupe les éléments d’un tableau selon une clé ou une condition spécifiée.

Exemple

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Sortie :

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Agrégation de données – _.countBy()

_.countBy() est une fonction pratique pour agréger des données.

Exemple

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Sortie :

{
  a: 2,
  b: 2
}

Résumé

Dans cette section, nous avons couvert une utilisation plus avancée d’Underscore.js.

• _.sortBy() pour trier les tableaux
• _.groupBy() et _.countBy() pour catégoriser et agréger les données

6. Opérations sur les objets

Dans cette section, nous présenterons des fonctions utiles pour travailler avec des objets dans Underscore.js. Ces fonctions aident à gérer efficacement les propriétés et les valeurs des objets.

1. Récupération des clés et valeurs d’objet

Obtenir les clés – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Sortie :

['name', 'age', 'city']

Obtenir les valeurs – _.values()

const values = _.values(person);
console.log(values);

Sortie :

['Alice', 25, 'Tokyo']

2. Clonage d’objets – _.clone()

_.clone() crée une copie superficielle d’un objet.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Résumé

Dans cette section, nous avons expliqué comment travailler avec des objets en utilisant Underscore.js.

7. Opérations sur les fonctions

Dans cette section, nous expliquerons comment travailler efficacement avec les fonctions grâce à Underscore.js. Ces fonctionnalités sont utiles pour contrôler l’exécution et améliorer les performances.

1. Liaison de fonctions – _.bind()

_.bind() lie un objet spécifique à this lorsqu’une fonction est exécutée.

Exemple

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Exécution différée – _.delay()

_.delay() retarde l’exécution d’une fonction d’une durée spécifiée.

Exemple

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Sortie : (après 2 secondes)

Displayed after 2 seconds

3. Exécution unique – _.once()

_.once() garantit qu’une fonction n’est exécutée qu’une seule fois. Les appels ultérieurs sont ignorés.

Exemple

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Executed
initialize(); // Ignored

4. Mémoïsation – _.memoize()

_.memoize() met en cache le résultat d’une fonction et évite le recalcul lorsqu’elle est appelée de nouveau avec les mêmes arguments.

Exemple

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Calculated
console.log(factorial(5)); // Retrieved from cache

5. Limitation de l’exécution d’une fonction – _.throttle()

_.throttle() limite la fréquence à laquelle une fonction peut être exécutée.

Exemple

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate continuous events
setInterval(log, 500); // Executes only once every 2 seconds

Résumé

Dans cette section, nous avons exploré les utilitaires liés aux fonctions dans Underscore.js.

• _.bind() pour fixer le contexte this
• _.delay() pour une exécution différée
• _.once() pour une exécution unique
• _.memoize() pour la mise en cache des résultats
• _.throttle() pour optimiser la fréquence d’exécution

8. Fonctions utilitaires

Dans cette section, nous présenterons les fonctions utilitaires pratiques fournies par Underscore.js. Ces fonctions sont utiles dans de nombreuses situations, notamment la gestion des données, la génération aléatoire et le templating.

1. Génération de nombres aléatoires – _.random()

_.random() génère un entier ou un nombre à virgule flottante aléatoire dans une plage spécifiée.

Exemple

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating-point

2. Vérification des valeurs vides – _.isEmpty()

_.isEmpty() vérifie si un tableau, un objet ou une chaîne est vide.

Exemple

console.log(_.isEmpty([]));            // true
console.log(_.isEmpty({}));            // true
console.log(_.isEmpty(''));            // true
console.log(_.isEmpty([1, 2, 3]));     // false

3. Création de modèles – _.template()

_.template() sert à créer des modèles de chaînes.

Exemple

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Sortie :

Hello, Alice!

Résumé

Dans cette section, nous avons couvert les fonctions utilitaires d’Underscore.js.

• _.random() pour générer des nombres aléatoires
• _.isEmpty() pour vérifier l’état des données
• _.template() pour le templating simple

9. Conclusion

Dans cet article, nous avons abordé Underscore.js, de l’utilisation de base aux techniques plus avancées. Cette bibliothèque est extrêmement utile pour simplifier la manipulation des données en JavaScript et écrire du code efficace et maintenable.

Points clés à retenir

1. Utilisation de base – Apprentissage des fonctions essentielles pour la manipulation des tableaux et des objets.
2. Utilisation avancée – Exploration du groupement, du tri et de l’agrégation.
3. Utilitaires de fonctions – Couverture du contrôle d’exécution et de la mémoïsation.
4. Aides utilitaires – Introduction à la génération aléatoire et au templating.

Réflexions finales

Underscore.js est un outil puissant qui rend le développement JavaScript plus efficace et accessible. Utilisez cet article comme référence et essayez de l’appliquer dans vos propres projets. Une pratique régulière vous aidera à améliorer davantage vos compétences.

Questions fréquentes (FAQ)

Q1 : Underscore.js est‑il gratuit à utiliser ?

R : Oui. Underscore.js est publié sous licence MIT et peut être utilisé gratuitement, y compris dans des projets commerciaux.

Q2 : Quelle est la différence entre Underscore.js et Lodash ?

R : Underscore.js est une bibliothèque utilitaire simple et légère. Lodash s’appuie sur Underscore.js en ajoutant des fonctionnalités supplémentaires, des optimisations de performances et une modularisation plus poussée. Choisissez en fonction des exigences de votre projet.

Q3 : Underscore.js est‑il inutile avec le JavaScript moderne (ES6+) ?

R : ES6+ fournit de nombreuses fonctionnalités natives pour les opérations sur les tableaux et les objets, mais Underscore.js reste utile pour la compatibilité inter‑navigateurs et une syntaxe concise, notamment dans les projets hérités.

Q4 : Quels types de projets conviennent à Underscore.js ?

R : Il fonctionne bien pour des projets de petite à moyenne taille et des applications où la simplicité du code est importante. C’est particulièrement pratique lorsque vous avez besoin d’utilitaires légers sans dépendances lourdes.

Q5 : Comment installer Underscore.js ?

R : Vous pouvez l’installer en utilisant l’une des méthodes suivantes.

1. Ajouter via CDN :

   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
   

2. Installer avec npm :

   npm install underscore
   

3. Installer avec yarn :

   yarn add underscore
   

Choisissez la méthode qui correspond le mieux à votre environnement.

Q6 : Où puis‑je trouver la documentation officielle ?

R : Vous pouvez la consulter sur le site officiel :
Underscore.js Official Website

Q7 : Underscore.js peut‑il être utilisé dans des projets à grande échelle ?

R : Oui, il le peut. Cependant, pour les gros projets, Lodash est souvent recommandé en raison de sa structure modulaire et de ses optimisations supplémentaires. Underscore.js reste idéal pour des cas d’utilisation légers.

Q8 : Existe‑t‑il des alternatives pour le contrôle de l’exécution des fonctions ?

R : Oui. Le JavaScript moderne propose des alternatives telles que setTimeout(), setInterval(), Promise et async/await. Cependant, les fonctions d’Underscore.js comme _.throttle() et _.debounce() permettent des implémentations plus propres et plus concises.

Q9 : Y a‑t‑il des mises en garde lors de l’utilisation d’Underscore.js ?

R :

1. Évitez les dépendances inutiles lorsque les fonctionnalités natives de JavaScript suffisent.
2. Maintenez les versions à jour pour réduire les risques de sécurité.
3. Envisagez de migrer vers Lodash selon l’ampleur du projet.

Q10 : Underscore.js est‑il recommandé comme moteur de templates ?

R : _.template() est pratique pour des cas simples, mais pour des besoins de templating plus avancés, il est recommandé d’utiliser des bibliothèques dédiées comme Handlebars.js ou EJS.