JavaScript で「繰り返し」1

 今回はみんな大好き繰り返し処理を試します。


1 while 文とは

 ある処理を while 文で繰り返すことができます。ループ処理といいます。

書式

 書式は上記のようになります。
 条件式 が満たされる場合に、行わせたい処理が実行されます。
 if 文とは異なり、while 文では条件が満たされるときに処理が実行され続けます。

繰り返し

 「whileで繰り返し_」が3回出力されました。なお、今回は <p> タグをループの外に置いていますので、同じ行で3回出力されています。また、繰り返しの回数を数えやすいように「 _ 」を含めています。

 この例ではなぜ3回も出力されたのでしょうか?
 動作を分解してみましょう。

 まず、最初に変数 a に数値「0」が代入されます。
 次に、while ループに入ります。
 まず条件式が判定されます。つまり、a < 3 であるかどうかです。現時点では ① 変数 a の値は「0」であり条件を満たしているため、② write メソッドが実行され、③ で 変数 a に「1」が加算されて a の値は「1」となります。これが1回目です。

 ループですので、また条件式の判定に戻ります。① a の値は「1」ですので、a < 3 が成立するため2回目の処理 ②・処理 ③ が実行されます。この時点で a の値は「2」です。

 さらに条件式の判定に戻ります。① a の値は「2」ですので、a < 3 が成立するため3回目の処理 ②・処理 ③ が実行されます。この時点で a の値は「3」です。

 そして、4回目の判定では、① a の値は「3」のため、a < 3 とならず条件を満たしません。したがって、この時点でループ処理が終了することになります。

 結果的に ② の write メソッドが実行されたのは、合計3回ということになります。


2 回数をわかりやすくしてみる

 動作は理解しましたが、イマイチ回数がわからないので次のような工夫をしてみます。

繰り返し

 変数の値を表示されるようにしてみました。

 しかし0回目というのはおかしいので、1回目というふうに表示されるようにしてみます。つまり、表示よりも先に変数をカウントアップしてみます。

繰り返し

 変数の値を1から表示されるようにしてみました。
 なお、ループ内にある2つの処理を逆にしただけなので、判定には影響ありません。


3 for 文とは

 ループ処理には for 文も使えます。

書式

 書式は上記のようになります。
 条件式 が満たされる場合に、行わせたい処理が繰り返し実行されます。
 while 文とは異なり、書式に変数の初期化処理増分処理が含まれています。
 while 文では初期化の処理、条件式及び増分の処理でそれぞれ1行ずつ必要だったのが、for 文ではそれが1行にまとめられています。

繰り返し

 こちらの例でも write メソッドが3回実行されました。

 まず、ループ処理の1回目。
 ① が一度だけ実行されます。次に ② 条件式の判定が行われ、③ 行わせたい処理の実行、そして最後に ④ 増分の処理がされます。この時点で変数 d は「1」です。

 2回目は ② 条件式の判定、③ 行わせたい処理、④ 増分の処理が実行されます。この時点で変数 d は「2」です。

 3回目は ② 条件式の判定、③ 行わせたい処理、④ 増分の処理が実行されます。この時点で変数 d は「3」です。

 4回目は ② 条件式の判定において条件に合致しません(dは「3」)ので、このループ処理から抜けることになります。

 結果的に ③ の write メソッドが実行されたのは、合計3回ということになります。
 ① の初期化処理は最初の1回目だけ行われることに注意です。


4 回数をわかりやすくしてみる

 これも変数の値を表示するようにしてみましょう。

繰り返し

 変数の値を表示されるようにしてみました。

 なお、変数を「」から始めた場合は、条件式を「<」と変えれば同じ回数だけ処理することになります。

繰り返し


5 次回

 さて次回は、繰り返し処理においてそのループの流れを変える処理を試してみましょう。

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (8) コーチング (1) チーズ (2) ネズミ (2) ノート (2) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (8) IGS (8) Kラーニング (1)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]
価格:2,728円(税込、送料無料) (2024/2/16時点)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)



Categories: