HTMLとCSSは、なんとなく読めるようになってきた。でもJavaScriptのファイルを開いた瞬間、記号の羅列に見えて閉じてしまう。波カッコ、丸カッコ、イコールが2つも3つも並ぶやつ・・・どこからどこまでが一まとまりなのかも分からない。
安心してください。読むために必要な概念は、たった5つです。この講を終えると、コードが「記号の羅列」から「日本語に直せる手順書」に変わります。書けるようになる話は、今日もしません。
レシピにたとえます。
料理のレシピには、決まった部品しか出てきません。材料、手順、「もし～なら」の分かれ道、繰り返し、そして煮込んでいるあいだの別作業。JavaScriptも同じで、部品は5つです。
1つ目、変数（値に名前をつけた入れ物）。レシピの材料欄です。「玉ねぎ 2個」のように、あとで使うものに名前をつけて置いておく。なお、入れ物には仲間がいます。配列（入れ物を順番に並べた入れ物。買い物リストのようなもの）と、オブジェクト（名前つきの入れ物の束。「玉ねぎ：2個、豚肉：300g」のような一覧表）。見た目は違っても、どちらも"入れ物の仲間"です。
2つ目、関数（手順のかたまりに名前をつけたもの）。レシピの「だしを取る」です。一言で書いてあるけれど、中身は数ステップある。名前を呼べば、その手順一式が実行されます。
3つ目、条件分岐（もし～なら、こうする）。「肉に火が通っていたら次へ、まだなら3分待つ」。コードでは if という単語が目印です。
4つ目、繰り返し（同じ作業を必要な回数やる）。「餃子の皮がなくなるまで包む」。for や while が目印です。
5つ目、非同期（時間のかかる作業を待つあいだ、別のことを進める段取り）。煮込みに20分かかるとき、コンロの前で直立して待つ人はいません。煮込みは火に任せて、そのあいだに洗い物を進め、頃合いになったら鍋に戻る。プログラムも、通信のような時間のかかる作業では「終わったら教えて」方式を使います。async や await という単語が目印ですが、いまは「待ち時間の段取りをしている場所だ」と分かれば十分です。
この5つで、日常のコードのほとんどは説明がつきます。逆に言うと、どんなに長いコードも、この5つの組み合わせでできた"レシピの束"です。壁のように見えていたものの正体は、知らない概念が無限にあることではなく、5つの部品が読めない並び方をしていることなのです。
自分の一枚には、ボタンを押すと挨拶が変わる仕掛けが入っています。その部分・・・JavaScriptのコードを探して、眺めてください。実物がある人は、自分のコードから短めの関数を1つ選んでください。
そして、それを日本語の手順書に書き直します。紙に、箇条書きで。
たとえばこんな具合です。「①挨拶の文をいくつか、入れ物に並べておく ②ボタンが押されたら、次の文を取り出す ③画面の表示を、その文に差し替える」
分からない行があって構いません。そこは「？？？」と書いて飛ばす。全体の7割が日本語になれば合格です。書き終わったら、AIに同じ箇所の説明を頼んで、自分の手順書と見比べてください。「？？？」の行の正体も、ここで判明します。
そのまま貼って使えます。
分からない行を「たぶん要らない」と消すこと。
読めるようになってきた頃に、必ず一度やりたくなります。手順書に直してみて、無くても成立しそうな行があった。消してみた。動いた。ほら要らなかった・・・とは限らないのです。その行は、特定の条件のときだけ働く安全装置かもしれない。レシピの「アクを取る」を省いても料理は完成しますが、味は静かに落ちています。しかも困ったことに、この壊れ方はエラーを出しません。画面は普通に動いていて、気づくのはずっと後です。
行を消していいのは、「消しても大丈夫か」をAIに聞いて、その行の役割を理解してからです。読める人の特権は、消せることではなく、消す前に質問できることです。