JavaScript・まとめる・くり返す

くり返しはコンピュータにまかせよう:for文

同じことを100回書くのは人間の仕事じゃありません。「くり返し」の書き方を覚えて、面倒な作業はぜんぶコンピュータに。

「1から10まで数えて表示して」と言われたら、console.log(1);を10行書きますか?もし「1から1万まで」だったら?——こういう同じことのくり返しこそ、コンピュータのいちばんの得意技。それを頼む書き方がfor文です。

書いてみよう

for (let i = 1; i <= 10; i = i + 1) {
  console.log(i);
}

たった3行で、コンソールに1から10までが順番に表示されます。( )の中はカンマではなく;で区切られた3つの部品でできています。

部品意味
スタートlet i = 1カウント用の変数を1で用意
続ける条件i <= 10iが10以下のあいだ続ける
進め方i = i + 11周ごとにiを1増やす

iを1にする→10以下?→やることを実行→1増やす→10以下?→……」と、ぐるぐる回るイメージです。

配列と組み合わせると本領発揮

for文がいちばん活躍するのは、配列の中身を順番に処理するときです。

const likes = ["おえかき", "ラーメン", "ゲーム", "しま"];

for (let i = 0; i < likes.length; i = i + 1) {
  console.log(likes[i]);
}

iが0、1、2、3と進むたびにlikes[i]が順番に取り出され、すきなものが4つぜんぶ表示されます。配列の番号が0から始まるので、スタートもlet i = 0から。条件もi < likes.length(個数より小さいあいだ)にするのがお決まりの形です。

動きを見てみよう

くり返しで、画面に星をならべてみます。

空っぽの文字にくり返し「⭐」をれんけつして、最後に画面へ書きこんでいます。10を100に変えたら?——書く行数は変わりません。それがくり返しの力です。
めんどうなことは、ぜんぶコンピュータにおまかせ。ぴよ!

このレッスンのまとめ

  1. for (スタート; 続ける条件; 進め方) { やること }でくり返せる
  2. 回数を数える変数はiという名前を使うのが伝統
  3. 配列とセットで使うと、中身を順番にぜんぶ処理できる

やってみよう

今回学んだ「for文」は、しまちゃんのページには使いません。たくさんのデータを順番に表示したり、同じ処理を何度も行ったりするページのための道具です。覚えておいて、必要になったら使いましょう。