Comment documenter le code JavaScript à l’aide de JSDoc



L’Importance Cruciale de la Documentation dans le Développement Logiciel

La documentation du code, bien qu’essentielle, est souvent négligée dans le développement logiciel. En tant que développeur, vous êtes probablement habitué à écrire un code propre et efficace. Cependant, la rédaction d’une documentation de qualité peut être un domaine où vous avez moins d’expérience.

Une documentation bien conçue est un atout précieux pour toute personne interagissant avec votre code, qu’il s’agisse de vos collègues ou de vous-même à l’avenir. Elle permet d’expliquer les raisons de vos choix d’implémentation ou le fonctionnement d’une fonction ou d’une API spécifique.

Pour les développeurs JavaScript, JSDoc constitue un excellent point de départ pour documenter votre code.

Qu’est-ce que JSDoc ?

La documentation de code peut s’avérer complexe et laborieuse. Cependant, de plus en plus de développeurs reconnaissent les avantages de l’approche « docs as code », et de nombreux langages proposent des outils pour automatiser ce processus. JSDoc, à l’instar de GoDoc pour Go, permet d’automatiser la documentation à partir de votre code JavaScript, de manière simple, claire et concise.

JSDoc génère de la documentation en analysant les commentaires spéciaux insérés dans votre code source JavaScript. Il interprète ces commentaires et produit une documentation personnalisée, accessible au format HTML.

Cette approche permet de maintenir la documentation au plus près du code. Ainsi, la mise à jour de la documentation est facilitée à chaque modification du code.

Installation et Configuration de JSDoc

Les créateurs de JSDoc ont veillé à simplifier son installation et sa configuration dans vos projets JavaScript.

Pour une installation locale, exécutez la commande suivante:

 npm install --save-dev jsdoc

Ceci installera la bibliothèque en tant que dépendance de développement de votre projet.

L’utilisation de JSDoc repose sur l’insertion de commentaires avec une syntaxe spécifique dans votre code. Vous devez encadrer vos commentaires de documentation par les marqueurs `/**` et `*/`. À l’intérieur de ces marqueurs, vous pouvez décrire des variables, des fonctions, les paramètres de fonctions, et bien d’autres éléments.

Par exemple:

     * Récupère un utilisateur par son nom.
     * @param {string} name - Le nom de l'utilisateur
     * @returns {string} Utilisateur
     */
   function getUser(name) {
        const User = name;
        return User;
   }
   

Les balises `@param` et `@returns` sont deux exemples de mots-clés spéciaux pris en charge par JSDoc pour commenter votre code.

Pour générer la documentation à partir de ce code, exécutez `npx jsdoc`, suivi du chemin d’accès à votre fichier JavaScript.

Par exemple:

 npx jsdoc src/main.js

Si vous avez installé JSDoc globalement, vous pouvez omettre l’indicateur `npx` et exécuter la commande `jsdoc src/main.js`.

Cette commande créera un dossier `out` à la racine de votre projet. Vous y trouverez des fichiers HTML, constituant les pages de votre documentation.

Vous pouvez consulter la documentation en hébergeant ces fichiers via un serveur web local ou en ouvrant directement le fichier `out/index.html` dans votre navigateur. Voici un exemple de rendu d’une page de documentation par défaut :

Personnalisation du Rendu de JSDoc

Il est possible de créer un fichier de configuration pour modifier le comportement par défaut de JSDoc.

Pour ce faire, créez un fichier `conf.js` et exportez un module JavaScript dans ce fichier.

Par exemple:

 module.exports = {
        source: {
            includePattern: ".+\\.js(doc|x)?$",
            excludePattern: ["node_modules"],
        },
        recurseDepth: 5,
        sourceType: "module",
        opts: {
            template: "path/to/template",
            destination: "./docs/",
            recurse: true,
        },
    };
    

Ce fichier de configuration permet de définir divers paramètres pour JSDoc. L’option `template` permet d’appliquer un modèle pour personnaliser l’apparence de la documentation. La communauté JSDoc propose de nombreux modèles. Vous pouvez aussi créer vos propres modèles personnalisés.

Pour modifier l’emplacement de la documentation générée, définissez l’option `destination` dans le fichier de configuration. L’exemple ci-dessus spécifie un dossier `docs` à la racine du projet.

Pour exécuter JSDoc avec un fichier de configuration, utilisez la commande suivante:

 jsdoc -c /path/to/conf.js

Pour simplifier l’exécution de cette commande, ajoutez-la en tant que script dans votre fichier `package.json`:

  "scripts": {
            "dev": "nodemon app.js",
            "run-docs": "jsdoc -c /path/to/conf.js"
        },
    

Vous pouvez maintenant lancer cette commande via `npm run run-docs` dans votre terminal.

Un Exemple de Documentation Générée avec JSDoc

Voici un exemple d’une simple bibliothèque arithmétique avec des fonctions d’addition et de soustraction.

Voici un exemple de code JavaScript documenté avec JSDoc:

     * Une bibliothèque pour effectuer des opérations arithmétiques de base.
     * @module arithmetic
     */
    module.exports = {
        
        
         * Additionne deux nombres.
         * @param {number} a - Le premier nombre.
         * @param {number} b - Le second nombre.
         * @return {number} La somme des deux nombres.
         * @throws {TypeError} Si l'un des arguments n'est pas un nombre.
         * 
         * @example
         * const arithmetic = require('arithmetic');
         * const sum = arithmetic.add(5, 10);
         * console.log(sum);
         */
        add: function(a, b) {
            if (typeof a !== 'number' || typeof b !== 'number') {
                throw new TypeError('Les deux arguments doivent être des nombres.');
            }
            return a + b;
        },

        
         * Soustrait le deuxième nombre du premier nombre.
         * @param {number} a - Le nombre duquel soustraire.
         * @param {number} b - Le nombre à soustraire.
         * @return {number} Le résultat de la soustraction.
         * @throws {TypeError} Si l'un des arguments n'est pas un nombre.
         * 
         * @example
         * const arithmetic = require('arithmetic');
         * const difference = arithmetic.subtract(10, 5);
         * console.log(difference);
         */
        subtract: function(a, b) {
            if (typeof a !== 'number' || typeof b !== 'number') {
                throw new TypeError('Les deux arguments doivent être des nombres.');
            }
            return a - b;
        }
    };
    

Les commentaires JSDoc fournissent une description claire et complète de la bibliothèque et de ses fonctions, en précisant:

  • La description et l’objectif de la bibliothèque.
  • Les paramètres de chaque fonction, avec leur type et une brève description.
  • La valeur et le type retournés par chaque fonction.
  • Les erreurs que chaque fonction peut générer et les conditions qui les provoquent.
  • Un exemple d’utilisation de chaque fonction.

Les commentaires incluent également la balise `@module` pour indiquer que ce fichier est un module et la balise `@example` pour illustrer l’utilisation de chaque fonction.

Documenter Correctement le Code du Développeur

Comme vous pouvez le constater, JSDoc est un outil très pratique pour documenter votre code JavaScript. Grâce à sa facilité d’intégration, vous pouvez générer rapidement une documentation détaillée au fur et à mesure de votre codage. Vous pouvez également gérer et mettre à jour la documentation directement dans votre environnement de travail.

Cependant, aussi utile que soit l’automatisation de JSDoc, vous devez toujours respecter certaines directives pour créer une documentation de qualité.