[{"data":1,"prerenderedAt":850},["ShallowReactive",2],{"page-\u002Fpratiques\u002Fnommer-et-organiser":3,"pieces-pratiques":804,"autour-\u002Fpratiques\u002Fnommer-et-organiser":830,"prerequis-\u002Fpratiques\u002Fnommer-et-organiser":835,"plan-pratiques":839},{"id":4,"title":5,"body":6,"description":776,"extension":777,"ligne":778,"meta":779,"motsCles":780,"navigation":287,"niveau":786,"path":787,"prerequis":788,"ressources":790,"seo":799,"sources":800,"stem":802,"__hash__":803},"docs\u002Fpratiques\u002F01.nommer-et-organiser.md","Nommer et organiser son code",{"type":7,"value":8,"toc":766},"minimark",[9,14,27,31,35,38,94,129,144,148,156,159,193,207,213,217,223,263,266,317,320,324,331,334,444,447,527,530,534,540,559,562,590,593,597,600,603,661,664,667,721,728,738,742,762],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Choisir des noms de variables et de fonctions qui expliquent ce qu'ils contiennent.",[18,22,23],{},"Découper un long bloc de code en petites fonctions qui font une seule chose.",[18,25,26],{},"Ranger tes fichiers dans une structure de dossiers que tu retrouves en six mois.",[10,28,30],{"id":29},"un-code-se-lit-plus-quil-ne-sécrit","Un code se lit plus qu'il ne s'écrit",[32,33,34],"p",{},"Tu écris une ligne une fois. Toi ou quelqu'un d'autre la relira dix fois. Un code propre est donc un code que l'on comprend vite.",[32,36,37],{},"Compare ces deux versions du même calcul, sur le site de recettes :",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","const x = r.filter(a => a.t \u003C 30)\n","js","",[46,47,48],"code",{"__ignoreMap":44},[49,50,53,57,61,64,68,72,75,79,82,85,88,91],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sOnC1","const",[49,58,60],{"class":59},"s5iOY"," x",[49,62,63],{"class":55}," =",[49,65,67],{"class":66},"scfrF"," r.",[49,69,71],{"class":70},"syCW7","filter",[49,73,74],{"class":66},"(",[49,76,78],{"class":77},"sIXEE","a",[49,80,81],{"class":55}," =>",[49,83,84],{"class":66}," a.t ",[49,86,87],{"class":55},"\u003C",[49,89,90],{"class":59}," 30",[49,92,93],{"class":66},")\n",[39,95,97],{"className":41,"code":96,"language":43,"meta":44,"style":44},"const recettesRapides = recettes.filter(recette => recette.dureeMinutes \u003C 30)\n",[46,98,99],{"__ignoreMap":44},[49,100,101,103,106,108,111,113,115,118,120,123,125,127],{"class":51,"line":52},[49,102,56],{"class":55},[49,104,105],{"class":59}," recettesRapides",[49,107,63],{"class":55},[49,109,110],{"class":66}," recettes.",[49,112,71],{"class":70},[49,114,74],{"class":66},[49,116,117],{"class":77},"recette",[49,119,81],{"class":55},[49,121,122],{"class":66}," recette.dureeMinutes ",[49,124,87],{"class":55},[49,126,90],{"class":59},[49,128,93],{"class":66},[32,130,131,132,135,136,139,140,143],{},"La seconde se lit presque comme une phrase. Tu n'as pas besoin de deviner ce que ",[46,133,134],{},"x",", ",[46,137,138],{},"r"," ou ",[46,141,142],{},"t"," signifient.",[10,145,147],{"id":146},"des-noms-qui-disent-la-vérité","Des noms qui disent la vérité",[32,149,150,151,155],{},"Un ",[152,153,154],"strong",{},"nom"," est l'étiquette d'une variable, d'une fonction ou d'un fichier. Un bon nom répond à la question « qu'est-ce que c'est ? » sans qu'on lise le code autour.",[32,157,158],{},"Quelques règles simples :",[160,161,162,172,181,190],"ol",{},[18,163,164,165,168,169,171],{},"Un nom précis plutôt qu'un nom court : ",[46,166,167],{},"prixTotal"," plutôt que ",[46,170,32],{},".",[18,173,174,175,135,178,171],{},"Une variable est un nom, une fonction est un verbe : ",[46,176,177],{},"recettes",[46,179,180],{},"chargerRecettes()",[18,182,183,184,135,187,171],{},"Un booléen se lit comme une question : ",[46,185,186],{},"estPublie",[46,188,189],{},"aDesIngredients",[18,191,192],{},"Un seul style dans tout le projet.",[32,194,195,196,199,200,203,204,171],{},"Le style le plus courant en JavaScript est le ",[152,197,198],{},"camelCase"," : les mots sont collés, chaque mot après le premier prend une majuscule (",[46,201,202],{},"dureeCuisson","). Pour un composant ou une classe, on met aussi une majuscule au premier mot : ",[46,205,206],{},"CarteRecette",[208,209,210],"tip",{},[32,211,212],{},"Évite de mélanger le français et l'anglais dans les noms de ton code. Choisis une langue et garde-la. Le code que tu écris pour apprendre peut être en français, comme ici.",[10,214,216],{"id":215},"pas-de-nombres-magiques","Pas de nombres magiques",[32,218,150,219,222],{},[152,220,221],{},"nombre magique"," est une valeur écrite directement dans le code, sans explication. Personne ne sait d'où elle vient.",[39,224,226],{"className":41,"code":225,"language":43,"meta":44,"style":44},"if (recette.dureeMinutes \u003C 30) {\n  afficherBadge('rapide')\n}\n",[46,227,228,243,257],{"__ignoreMap":44},[49,229,230,233,236,238,240],{"class":51,"line":52},[49,231,232],{"class":55},"if",[49,234,235],{"class":66}," (recette.dureeMinutes ",[49,237,87],{"class":55},[49,239,90],{"class":59},[49,241,242],{"class":66},") {\n",[49,244,246,249,251,255],{"class":51,"line":245},2,[49,247,248],{"class":70},"  afficherBadge",[49,250,74],{"class":66},[49,252,254],{"class":253},"shWOn","'rapide'",[49,256,93],{"class":66},[49,258,260],{"class":51,"line":259},3,[49,261,262],{"class":66},"}\n",[32,264,265],{},"Que veut dire 30 ? Donne-lui un nom :",[39,267,269],{"className":41,"code":268,"language":43,"meta":44,"style":44},"const DUREE_MAX_RECETTE_RAPIDE = 30\n\nif (recette.dureeMinutes \u003C DUREE_MAX_RECETTE_RAPIDE) {\n  afficherBadge('rapide')\n}\n",[46,270,271,283,289,301,312],{"__ignoreMap":44},[49,272,273,275,278,280],{"class":51,"line":52},[49,274,56],{"class":55},[49,276,277],{"class":59}," DUREE_MAX_RECETTE_RAPIDE",[49,279,63],{"class":55},[49,281,282],{"class":59}," 30\n",[49,284,285],{"class":51,"line":245},[49,286,288],{"emptyLinePlaceholder":287},true,"\n",[49,290,291,293,295,297,299],{"class":51,"line":259},[49,292,232],{"class":55},[49,294,235],{"class":66},[49,296,87],{"class":55},[49,298,277],{"class":59},[49,300,242],{"class":66},[49,302,304,306,308,310],{"class":51,"line":303},4,[49,305,248],{"class":70},[49,307,74],{"class":66},[49,309,254],{"class":253},[49,311,93],{"class":66},[49,313,315],{"class":51,"line":314},5,[49,316,262],{"class":66},[32,318,319],{},"Si la limite change, tu modifies une seule ligne. Une valeur qui ne change jamais s'écrit par convention en MAJUSCULES avec des tirets bas.",[10,321,323],{"id":322},"des-fonctions-petites","Des fonctions petites",[32,325,326,327,330],{},"Une ",[152,328,329],{},"fonction"," est un bloc de code nommé que tu peux appeler plusieurs fois. Une bonne fonction fait une seule chose, et son nom dit laquelle.",[32,332,333],{},"Voici une fonction qui en fait trop :",[39,335,337],{"className":41,"code":336,"language":43,"meta":44,"style":44},"function traiterRecette(recette) {\n  const ingredients = recette.ingredients.map(i => i.trim().toLowerCase())\n  const duree = recette.preparation + recette.cuisson\n  document.querySelector('#titre').textContent = recette.titre\n  return { ingredients, duree }\n}\n",[46,338,339,353,391,409,431,439],{"__ignoreMap":44},[49,340,341,344,347,349,351],{"class":51,"line":52},[49,342,343],{"class":55},"function",[49,345,346],{"class":70}," traiterRecette",[49,348,74],{"class":66},[49,350,117],{"class":77},[49,352,242],{"class":66},[49,354,355,358,361,363,366,369,371,374,376,379,382,385,388],{"class":51,"line":245},[49,356,357],{"class":55},"  const",[49,359,360],{"class":59}," ingredients",[49,362,63],{"class":55},[49,364,365],{"class":66}," recette.ingredients.",[49,367,368],{"class":70},"map",[49,370,74],{"class":66},[49,372,373],{"class":77},"i",[49,375,81],{"class":55},[49,377,378],{"class":66}," i.",[49,380,381],{"class":70},"trim",[49,383,384],{"class":66},"().",[49,386,387],{"class":70},"toLowerCase",[49,389,390],{"class":66},"())\n",[49,392,393,395,398,400,403,406],{"class":51,"line":259},[49,394,357],{"class":55},[49,396,397],{"class":59}," duree",[49,399,63],{"class":55},[49,401,402],{"class":66}," recette.preparation ",[49,404,405],{"class":55},"+",[49,407,408],{"class":66}," recette.cuisson\n",[49,410,411,414,417,419,422,425,428],{"class":51,"line":303},[49,412,413],{"class":66},"  document.",[49,415,416],{"class":70},"querySelector",[49,418,74],{"class":66},[49,420,421],{"class":253},"'#titre'",[49,423,424],{"class":66},").textContent ",[49,426,427],{"class":55},"=",[49,429,430],{"class":66}," recette.titre\n",[49,432,433,436],{"class":51,"line":314},[49,434,435],{"class":55},"  return",[49,437,438],{"class":66}," { ingredients, duree }\n",[49,440,442],{"class":51,"line":441},6,[49,443,262],{"class":66},[32,445,446],{},"Elle nettoie des données, calcule une durée et modifie la page. Découpe-la :",[39,448,450],{"className":41,"code":449,"language":43,"meta":44,"style":44},"function nettoyerIngredients(ingredients) {\n  return ingredients.map(i => i.trim().toLowerCase())\n}\n\nfunction calculerDuree(recette) {\n  return recette.preparation + recette.cuisson\n}\n",[46,451,452,466,491,495,499,512,522],{"__ignoreMap":44},[49,453,454,456,459,461,464],{"class":51,"line":52},[49,455,343],{"class":55},[49,457,458],{"class":70}," nettoyerIngredients",[49,460,74],{"class":66},[49,462,463],{"class":77},"ingredients",[49,465,242],{"class":66},[49,467,468,470,473,475,477,479,481,483,485,487,489],{"class":51,"line":245},[49,469,435],{"class":55},[49,471,472],{"class":66}," ingredients.",[49,474,368],{"class":70},[49,476,74],{"class":66},[49,478,373],{"class":77},[49,480,81],{"class":55},[49,482,378],{"class":66},[49,484,381],{"class":70},[49,486,384],{"class":66},[49,488,387],{"class":70},[49,490,390],{"class":66},[49,492,493],{"class":51,"line":259},[49,494,262],{"class":66},[49,496,497],{"class":51,"line":303},[49,498,288],{"emptyLinePlaceholder":287},[49,500,501,503,506,508,510],{"class":51,"line":314},[49,502,343],{"class":55},[49,504,505],{"class":70}," calculerDuree",[49,507,74],{"class":66},[49,509,117],{"class":77},[49,511,242],{"class":66},[49,513,514,516,518,520],{"class":51,"line":441},[49,515,435],{"class":55},[49,517,402],{"class":66},[49,519,405],{"class":55},[49,521,408],{"class":66},[49,523,525],{"class":51,"line":524},7,[49,526,262],{"class":66},[32,528,529],{},"Chaque morceau se teste, se relit et se réutilise seul. Si tu as du mal à nommer une fonction sans écrire « et » dans son nom, elle en fait trop.",[10,531,533],{"id":532},"les-commentaires-expliquent-le-pourquoi","Les commentaires expliquent le pourquoi",[32,535,150,536,539],{},[152,537,538],{},"commentaire"," est une ligne ignorée par l'ordinateur, écrite pour les humains. Il ne doit pas répéter le code.",[39,541,543],{"className":41,"code":542,"language":43,"meta":44,"style":44},"\u002F\u002F Ajoute 1 à compteur\ncompteur++\n",[46,544,545,551],{"__ignoreMap":44},[49,546,547],{"class":51,"line":52},[49,548,550],{"class":549},"sd6ml","\u002F\u002F Ajoute 1 à compteur\n",[49,552,553,556],{"class":51,"line":245},[49,554,555],{"class":66},"compteur",[49,557,558],{"class":55},"++\n",[32,560,561],{},"Ce commentaire n'apprend rien. Un bon commentaire donne la raison d'un choix qui n'est pas évident :",[39,563,565],{"className":41,"code":564,"language":43,"meta":44,"style":44},"\u002F\u002F L'API renvoie les durées en secondes, on convertit en minutes.\nconst dureeMinutes = recette.duree \u002F 60\n",[46,566,567,572],{"__ignoreMap":44},[49,568,569],{"class":51,"line":52},[49,570,571],{"class":549},"\u002F\u002F L'API renvoie les durées en secondes, on convertit en minutes.\n",[49,573,574,576,579,581,584,587],{"class":51,"line":245},[49,575,56],{"class":55},[49,577,578],{"class":59}," dureeMinutes",[49,580,63],{"class":55},[49,582,583],{"class":66}," recette.duree ",[49,585,586],{"class":55},"\u002F",[49,588,589],{"class":59}," 60\n",[32,591,592],{},"Si tu as besoin d'un commentaire pour expliquer ce que fait une ligne, essaie d'abord de renommer la variable ou d'extraire une fonction.",[10,594,596],{"id":595},"ranger-les-fichiers","Ranger les fichiers",[32,598,599],{},"Un projet qui grandit finit par contenir des dizaines de fichiers. Une structure claire évite de chercher.",[32,601,602],{},"Deux approches courantes :",[604,605,606,622],"table",{},[607,608,609],"thead",{},[610,611,612,616,619],"tr",{},[613,614,615],"th",{},"Approche",[613,617,618],{},"Principe",[613,620,621],{},"Exemple",[623,624,625,645],"tbody",{},[610,626,627,631,634],{},[628,629,630],"td",{},"Par type",[628,632,633],{},"On regroupe les fichiers de même nature.",[628,635,636,135,639,135,642],{},[46,637,638],{},"components\u002F",[46,640,641],{},"pages\u002F",[46,643,644],{},"utils\u002F",[610,646,647,650,653],{},[628,648,649],{},"Par fonctionnalité",[628,651,652],{},"On regroupe tout ce qui concerne un sujet.",[628,654,655,135,658],{},[46,656,657],{},"recettes\u002F",[46,659,660],{},"utilisateurs\u002F",[32,662,663],{},"Les petits projets fonctionnent bien par type. Quand une partie du site devient grosse, regrouper par fonctionnalité aide à tout garder au même endroit. Les frameworks imposent souvent une structure : suis-la plutôt que d'en inventer une.",[32,665,666],{},"Voici un exemple simple pour le site de recettes :",[39,668,672],{"className":669,"code":670,"language":671,"meta":44,"style":44},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","mon-site\u002F\n  index.html\n  recettes.html\n  css\u002F\n    style.css\n  js\u002F\n    recettes.js\n    ingredients.js\n  images\u002F\n","bash",[46,673,674,679,684,689,694,699,704,709,715],{"__ignoreMap":44},[49,675,676],{"class":51,"line":52},[49,677,678],{"class":77},"mon-site\u002F\n",[49,680,681],{"class":51,"line":245},[49,682,683],{"class":77},"  index.html\n",[49,685,686],{"class":51,"line":259},[49,687,688],{"class":77},"  recettes.html\n",[49,690,691],{"class":51,"line":303},[49,692,693],{"class":77},"  css\u002F\n",[49,695,696],{"class":51,"line":314},[49,697,698],{"class":77},"    style.css\n",[49,700,701],{"class":51,"line":441},[49,702,703],{"class":77},"  js\u002F\n",[49,705,706],{"class":51,"line":524},[49,707,708],{"class":77},"    recettes.js\n",[49,710,712],{"class":51,"line":711},8,[49,713,714],{"class":77},"    ingredients.js\n",[49,716,718],{"class":51,"line":717},9,[49,719,720],{"class":77},"  images\u002F\n",[32,722,723,724,727],{},"Les noms de fichiers suivent les mêmes règles que les noms dans le code : explicites, sans espaces, sans accents, en minuscules avec des tirets. Un fichier ",[46,725,726],{},"Recette finale (2).html"," te posera problème tôt ou tard, par exemple dans une adresse web.",[729,730,731],"note",{},[32,732,733,734,737],{},"Un fichier ",[46,735,736],{},"README.md"," à la racine du projet explique à quoi il sert et comment le lancer. Tu le verras dans le cours sur la gestion de projet.",[10,739,741],{"id":740},"à-retenir","À retenir",[15,743,744,747,750,753,756,759],{},[18,745,746],{},"Un bon nom dit ce que contient la variable ou ce que fait la fonction.",[18,748,749],{},"Une valeur écrite en dur sans explication est un nombre magique : donne-lui un nom.",[18,751,752],{},"Une fonction fait une seule chose, et son nom la décrit.",[18,754,755],{},"Un commentaire explique le pourquoi, pas le quoi.",[18,757,758],{},"Une structure de dossiers cohérente, avec des noms de fichiers simples, évite de chercher.",[18,760,761],{},"Choisis un style de nommage et garde-le dans tout le projet.",[763,764,765],"style",{},"html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":44,"searchDepth":245,"depth":259,"links":767},[768,769,770,771,772,773,774,775],{"id":12,"depth":245,"text":13},{"id":29,"depth":245,"text":30},{"id":146,"depth":245,"text":147},{"id":215,"depth":245,"text":216},{"id":322,"depth":245,"text":323},{"id":532,"depth":245,"text":533},{"id":595,"depth":245,"text":596},{"id":740,"depth":245,"text":741},"Choisir des noms qui se lisent comme des phrases, découper en petites fonctions et ranger les fichiers dans des dossiers cohérents.","md","pratiques",{},[781,782,198,783,784,538,785,221],"nommage","nom de variable","petite fonction","responsabilité unique","structure de dossiers","debutant","\u002Fpratiques\u002Fnommer-et-organiser",[789],"\u002Fgit\u002Fpourquoi-git",[791,795],{"nom":792,"url":793,"type":794},"MDN, Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FWhat_went_wrong","cours",{"nom":796,"url":797,"type":798},"MDN, Sécurité","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FSecurity","doc",{"title":5,"description":776},[801],{"nom":792,"url":793},"pratiques\u002F01.nommer-et-organiser","DVh2I5iptBxV4RE1hcZWq7OgE0ulSCXcvsvtk0jgNgY",[805,806,810,814,818,822,826],{"path":787,"title":5,"stem":802},{"path":807,"title":808,"stem":809},"\u002Fpratiques\u002Flire-une-erreur","Lire une erreur","pratiques\u002F02.lire-une-erreur",{"path":811,"title":812,"stem":813},"\u002Fpratiques\u002Fdeboguer","Déboguer méthodiquement","pratiques\u002F03.deboguer",{"path":815,"title":816,"stem":817},"\u002Fpratiques\u002Fgerer-un-projet","Gérer un projet","pratiques\u002F04.gerer-un-projet",{"path":819,"title":820,"stem":821},"\u002Fpratiques\u002Fsecurite-de-base","Sécurité de base","pratiques\u002F05.securite-de-base",{"path":823,"title":824,"stem":825},"\u002Fpratiques\u002Fqualite-et-mise-en-ligne","Qualité et mise en ligne","pratiques\u002F06.qualite-et-mise-en-ligne",{"path":827,"title":828,"stem":829},"\u002Fpratiques","Bonnes pratiques","pratiques\u002Findex",[831,833],{"title":828,"path":827,"stem":829,"description":832,"children":-1},"Le mémo des bonnes pratiques : nommage, erreurs, débogage, gestion de projet, sécurité, qualité et mise en ligne.",{"title":808,"path":807,"stem":809,"description":834,"children":-1},"Ouvrir la console du navigateur, comprendre un message d'erreur et savoir chercher efficacement la cause d'un problème.",[836],{"path":789,"title":837,"ligne":838},"Pourquoi Git","git",[840,841,842,843,845,846,848],{"path":787,"title":5,"niveau":786,"stem":802},{"path":807,"title":808,"niveau":786,"stem":809},{"path":811,"title":812,"niveau":786,"stem":813},{"path":815,"title":816,"niveau":844,"stem":817},"intermediaire",{"path":819,"title":820,"niveau":844,"stem":821},{"path":823,"title":824,"niveau":847,"stem":825},"avance",{"path":827,"title":828,"niveau":849,"stem":829},"memo",1794583451959]