くり返しとデータの持ち方

前の章で書いたプログラムには、大きな限界がひとつあった。扱える値の数が、書いた行数の分しかないということだ。3人ぶんのデータを出したいなら3行、100人ぶんなら100行。これでは現実のアプリは作れない。

この章で、その壁を壊す。使う道具は2つ。くり返しとまとめて持つ入れ物だよ。

くり返しは while と for の2つの書き方で覚える。while は「条件が成り立つあいだ、ずっと同じことをする」。for は「回数を決めて、その分だけ同じことをする」。どちらも同じことができるけれど、回数がはっきりしているときは for のほうが読みやすい。

ここで一度は必ず出会うのが 無限ループ。終わる条件を書きまちがえると、プログラムが止まらなくなる。この教材では一定時間で自動的に止めて、何が起きたかを表示するようにしてある。こわがらずに、わざと作ってみるといい。「なぜ終わらないのか」を自分で説明できるようになれば、それはもう理解したということだよ。

入れ物のほうは 配列 から。["りんご", "みかん", "ぶどう"] のように、値を順番に並べて1つの名前で持つ。中身は fruits[0] のように0から数える番号で取り出す。1からではなく0から、というのは最初は必ず戸惑うところで、「最後の要素は length - 1 番目」という言い回しに慣れるまで少しかかる。

もうひとつが オブジェクト。配列が「番号で取り出す入れ物」なら、オブジェクトは「名前で取り出す入れ物」だ。{ name: "ゆい", age: 15 } と書いて person.name で取り出す。人やお店や商品のように、いくつかの項目がひとまとまりになっているものを表すのに向いている。

この2つは組み合わせて使うのが本番だよ。「オブジェクトを配列に並べる」という形にすると、名簿や商品一覧といった現実のデータがそのまま表現できる。そこにくり返しをかければ、100件だろうと1000件だろうと同じコードで処理できる。

章の終わりでは、値が入っていないときに出てくる undefined も扱う。存在しない番号や項目を取りに行ったときに返ってくる値で、これを知らないとエラーの原因が読めない。

くり返しと条件分岐を組み合わせるところも、この章の山場のひとつだ。「配列を1件ずつ見て、条件に合うものだけ表示する」という形は、この先いやというほど書くことになる。合計を出す、最大値を探す、件数を数える。どれも同じ骨組みでできているよ。

ここで身につけたい書き方がひとつある。合計を入れる変数はループの外で用意するということだ。中で作ってしまうと、1周するたびに0に戻ってしまう。「どこで変数を作るか」が結果を変えるという体験は、この章で初めて出てくるものだよ。

うまく動かないときの調べ方も覚えておこう。ループの中で console.log を書いて、1周ごとに変数がどうなっているかを出してみる。頭の中で追いかけるより、実際に出したほうが速いし確実だ。この教材には1行ずつ実行して変数の中身を見られる機能もあるので、行き詰まったら使ってみてほしい。

くり返し・配列・オブジェクト・条件分岐がそろうと、書けるものの幅が一気に広がる。この章を抜けたあたりから「プログラムを書いている」という感覚が出てくるはずだよ。逆にここがあいまいなまま先へ進むと、あとの章がつらくなる。この章はゆっくりやる価値がある。