【Javascript超基本】for文による繰り返し処理の解説！

2023年12月17日

プログラミングを行う際、条件に応じて繰り返しの処理を行うことが多々あります。

JavaScriptで繰り返し処理をするために用意されているのがfor文やwhile文です。

今回はfor文を取り上げて、繰り返し処理方法を解説します。

コンソールに表示するのでブラウザは「Google Chrome」を使って説明します。

繰り返しをするfor文

同じプログラムを繰り返し実行するにはforという構文を使います。

基本の書き方は下記になります。

for(初回に実行する処理; 繰り返し条件; 各繰り返し後の処理) {
   繰り返し実行する処理
}

上の構文だけではわかりづらいので簡単な例を見ながら内容を理解しましょう。

下のコードではコンソールに「こんにちわ」と10回表示させるコードになります。

for(let i = 1; i <= 10; i++) {
  console.log('こんにちわ');
}

コンソールを見てみましょう。

コンソールの表示の仕方は

macの方は「Command」 + 「Option」 + 「J」

Windowsの方は「Ctrl 」+ 「Shift 」+ 「J」

このようになっていれば成功です。

左側に10と出ているのは同じものが10回表示されたという意味です。

しかし初学者の方にはいきなり「let」やら「i」やら出てきてわかりにくいと思いますので一つ一つ見ていきましょう。

let i = 1;の部分は初回に実行する処理を表します。ここでは変数「i」を作成しその中に「１」を入れています。

なぜ変数なのかというと1回目、2回目、3回目・・・と「i」の部分が更新されるためです。

つまり何回目の繰り返しかを記憶させるためのものになります。

別に「i」でなくても動きますが繰り返し処理では「i」という変数名がよく使われますので他の人がコードを見てもわかるように「i」で統一するのが良いと思います。

i <= 10;の部分は繰り返し処理を実行するための条件を指定します。

変数「i」が10以下であれば「{}」ブロック内の内容を実行するという意味になります。

変数「i」が11になると条件に当てはまらなくなるため繰り返し処理は停止します。

毎回の処理の後「i++」が実行されます。「i = i + 1」と同じ意味で、繰り返し処理の後に「i」を「1」増やします。

「i++」の後には「;（セミコロン）」を書きません。エラーになるので気をつけましょう。

変数「i」に何が起こっているのかいまいちピンと来ないと思いますのでコンソールに変数「i」の値を出力してみましょう。

先ほどのコードを以下のように変更してください

for(let i = 1; i <= 10; i++) {
  console.log(`${i}回目のこんにちわ`);
}

出力されるたびに「１」が足され、回数が増えていくのがわかります。

今回はJavascriptの基本、繰り返し文について解説しました。

繰り返しの処理はJavascriptに限らず他のプログラミング言語でも使われる機会が多いので必須で覚えておきましょう。

ではまた！