Lire et comprendre le code IA · Cours Coder avec l'IA

L'étude qui fait réfléchir

Anthropic a mené une étude contrôlée : à un quiz de compréhension du code, les ingénieurs qui avaient laissé l'IA générer sans s'impliquer ont obtenu environ 17 points de moins (50% contre 67%) que ceux qui restaient dans le code. Déléguer sans relire, ça se paie en compréhension.

Autrement dit : plus vous copiez-collez du code IA sans le comprendre, plus vous perdez la capacité de maintenir votre projet. C'est l'équivalent de prendre un GPS partout et ne plus savoir lire une carte.

La bonne nouvelle : il suffit d'une habitude simple pour éviter ce piège. Expliquer avant de shipper.

La règle "Explain before you ship"

Avant d'intégrer du code IA dans votre projet, posez-vous une question : "Est-ce que je peux expliquer chaque ligne à un collègue ?"

Si la réponse est non, ne shippez pas. Prenez le temps de comprendre. Voici la méthode en 3 étapes :

Lisez ligne par ligne : pas en diagonale, mais chaque instruction
Surlignez ce que vous ne comprenez pas : une variable mystérieuse, une syntaxe inconnue, une logique obscure
Demandez à l'IA d'expliquer CE point précis : pas "explique ce code", mais "explique ce que fait array_reduce ici et pourquoi pas une boucle foreach"

La technique "teach the AI" : expliquez le code à l'IA comme si elle ne le connaissait pas. "Ce code fait X, puis Y, puis Z." Si l'IA vous corrige, c'est que vous aviez mal compris une partie.

Patterns courants qui semblent corrects

L'IA génère souvent du code qui a l'air correct mais qui contient des bugs subtils. Voici les pièges les plus fréquents :

Off-by-one : boucles qui itèrent une fois de trop ou de moins. L'IA confond souvent < et <=
Null check manquant : l'IA suppose que les données existent toujours. Elle oublie que document.querySelector() peut retourner null
Injection SQL : l'IA génère parfois des concaténations de strings au lieu de requêtes préparées, surtout dans les exemples "simples"
Logique inversée : conditions if/else qui font le contraire de ce qui est décrit dans les commentaires

Le code IA est comme le code d'un stagiaire brillant : syntaxiquement correct, structurellement cohérent, mais potentiellement dangereux dans les détails.

Exercice de lecture

Regardez ce code généré par l'IA pour une fonction de recherche utilisateur. Trois lignes sont commentées avec "// Que fait cette ligne ?" : essayez de répondre avant de lire la suite :

function findUser(users, searchTerm) {
    const term = searchTerm.toLowerCase();        // Que fait cette ligne ?
    return users.filter(user =>
        user.name.toLowerCase().includes(term)    // Que fait cette ligne ?
    )[0];                                         // Que fait cette ligne ?
}

Réponses :

Ligne 2 : convertit le terme de recherche en minuscules pour une recherche insensible à la casse
Ligne 4 : filtre les utilisateurs dont le nom (en minuscules) contient le terme recherché
Ligne 5 : prend le premier résultat du tableau filtré : attention : retourne undefined si aucun utilisateur ne correspond

Bug subtil : que se passe-t-il si searchTerm est null ? La ligne 2 plantera avec TypeError: Cannot read property 'toLowerCase' of null. L'IA n'a pas ajouté de validation d'entrée.

The study that makes you think

Anthropic ran a controlled study: on a code-comprehension quiz, engineers who let the AI generate without engaging scored about 17 points lower (50% vs 67%) than those who stayed in the code. Delegating without rereading costs you comprehension.

In other words: the more you copy-paste AI code without understanding it, the more you lose the ability to maintain your project. It is the equivalent of using GPS everywhere and no longer knowing how to read a map.

The good news: one simple habit is enough to avoid this trap. Explain before you ship.

The "Explain before you ship" rule

Before integrating AI code into your project, ask yourself one question: "Can I explain every line to a colleague?"

If the answer is no, do not ship. Take the time to understand. Here is the 3-step method:

Read line by line — not skimming, but each instruction
Highlight what you do not understand — a mysterious variable, unknown syntax, obscure logic
Ask the AI to explain THAT specific point — not "explain this code", but "explain what array_reduce does here and why not a foreach loop"

The "teach the AI" technique: explain the code to the AI as if it does not know it. "This code does X, then Y, then Z." If the AI corrects you, it means you misunderstood a part.

Common patterns that look correct

AI often generates code that looks correct but contains subtle bugs. Here are the most frequent traps:

Off-by-one — loops that iterate one time too many or too few. AI often confuses < and <=
Missing null check — AI assumes data always exists. It forgets that document.querySelector() can return null
SQL injection — AI sometimes generates string concatenations instead of prepared statements, especially in "simple" examples
Inverted logic — if/else conditions that do the opposite of what is described in the comments

AI code is like the code of a brilliant intern: syntactically correct, structurally coherent, but potentially dangerous in the details.

Reading exercise

Look at this AI-generated code for a user search function. Three lines are commented with "// What does this line do?" — try to answer before reading on:

function findUser(users, searchTerm) {
    const term = searchTerm.toLowerCase();        // What does this line do?
    return users.filter(user =>
        user.name.toLowerCase().includes(term)    // What does this line do?
    )[0];                                         // What does this line do?
}

Answers:

Line 2: converts the search term to lowercase for case-insensitive search
Line 4: filters users whose name (lowercased) contains the search term
Line 5: takes the first result from the filtered array — warning: returns undefined if no user matches

Subtle bug: what happens if searchTerm is null? Line 2 will crash with TypeError: Cannot read property 'toLowerCase' of null. The AI did not add input validation.

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

Avec l'IA

Testez la technique 'teach the AI'. Copiez ce prompt dans Claude :

Je vais t'expliquer ce que fait cette fonction JavaScript, et tu me dis si j'ai bien compris : la fonction findUser prend un tableau d'utilisateurs et un terme de recherche. Elle convertit le terme en minuscules, puis filtre les utilisateurs dont le nom contient ce terme, et retourne le premier résultat. Est-ce que mon explication est correcte ? Qu'est-ce que j'ai oublié ?

💬 Ré-explique sans regarder

Ré-explique sans regarder

Sans relire : un collègue colle du code de l'IA et veut le merger tout de suite. Avec tes mots, explique-lui la règle « Explain before you ship » et pourquoi elle protège le projet.

Une bonne explication dit : on ne shippe pas une ligne qu'on ne saurait pas justifier à un collègue. Concrètement : lire ligne par ligne, surligner ce qu'on ne comprend pas, puis demander à l'IA d'expliquer CE point précis (pas « explique ce code »). L'enjeu n'est pas le style : c'est qu'on reste capable de maintenir et debugger le projet. Sans ça, on perd la compréhension de sa propre codebase (les fameux -17%).

Exercice : Trouvez les bugs

Ce code IA semble correct mais contient 3 problèmes. Décrivez-les ci-dessous. Indices : pensez à la validation d'entrée, aux cas limites, et à la sécurité.

function getUserAge(birthDate) {
    const today = new Date();
    const birth = new Date(birthDate);
    const age = today.getFullYear() - birth.getFullYear();
    return age;
}

Bug 1 : ...
Bug 2 : ...
Bug 3 : ...

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

Tu as demandé à l'IA une fonction qui renvoie le prix TTC d'un panier. Tu la relis ligne par ligne avant de la merger. Tu l'acceptes telle quelle ou tu la rejettes ?

function totalTTC(items) {
    let total = 0;
    for (let i = 0; i <= items.length; i++) {
        total += items[i].price;
    }
    return total * 1.2; // TVA 20%
}

Rejeter. C'est le piège off-by-one de la leçon : i <= items.length fait une itération de trop. Au dernier tour, items[items.length] vaut undefined, et undefined.price jette TypeError. Le code « a l'air » correct (commentaire TVA rassurant, structure propre), mais il plante dès le premier appel. Correctif : i < items.length. C'est exactement pourquoi on relit ligne par ligne au lieu de faire confiance à l'allure du code.

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : en une phrase, que dit la règle « Explain before you ship », et cite deux pièges fréquents du code IA qui « a l'air » correct.

« Explain before you ship » : ne pas intégrer de code qu'on ne saurait pas expliquer ligne par ligne à un collègue. Pièges fréquents (deux suffisent) : off-by-one (< vs <=), null check manquant (querySelector() qui renvoie null), injection SQL par concaténation, logique inversée dans un if/else.

Que montre l'étude Anthropic sur la compréhension ?

L'IA améliore la compréhension de 17% -17% pour ceux qui copient sans comprendre Aucun impact mesurable

La meilleure façon de vérifier qu'on comprend le code ?

Expliquer le code ligne par ligne Vérifier que ça compile Faire confiance à l'IA

Si l'IA génère du code que vous ne comprenez pas, vous devez :

L'utiliser quand même, l'IA sait mieux Le supprimer et réécrire à la main Demander à l'IA d'expliquer avant d'utiliser

Prochaine étape

Vous savez relire et comprendre ce que l'IA produit. Le souci, c'est qu'une grosse demande d'un seul coup donne du code illisible. La prochaine leçon, décomposer et itérer, montre comment découper une fonctionnalité en petites étapes que l'IA traite proprement, une à une.

Leçon 4 : Décomposer et itérer →