JavaScript で「繰り返し」１

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

１　while 文とは

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

書式

while（条件式）{
    行わせたい処理
}

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

HTML（コード入力）

<!DOCTYPE html>
<html>
<head>
    <title>繰り返し</title>
    <meta charset="UTF-8">
</head>
<body>
<p>
    <script>
        let a = 0;
        while(a < 3){
            document.write("whileで繰り返し_");
            a++;
        }
    </script>
</p>
</body>
</html>

ブラウザ（実行結果）

繰り返し

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

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

HTML（コード入力）の一部

let a = 0;　　　　　　　　　　　　　　 　１回目 ２回目 ３回目 ４回目
while(a < 3){　　　　　　　　　　　　　① a = 0　a = 1  a = 2　a = 3
    document.write("whileで繰り返し_");② 実行   実行   実行
    a++;　　　　　　　　　　　　　　　 ③ a = 1　a = 2  a = 3
}

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

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

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

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

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

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

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

HTML（コード入力）の一部

let b = 0;
while(b < 3){
    document.write("くりかえし" + b + "_");
    b++;
}

ブラウザ（実行結果）

繰り返し

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

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

HTML（コード入力）の一部

let c = 0;
while(c < 3){
    c++;
    document.write("くりかえし" + c + "_");
}

ブラウザ（実行結果）

繰り返し

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

３　for 文とは

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

書式

for（初期化処理; 条件式; 増分処理）{
    行わせたい処理
}

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

HTML（コード入力）の一部

for(let d = 0; d < 3; d++){
    document.write("forで繰り返し_");
}

ブラウザ（実行結果）

繰り返し

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

HTML（コード入力）の一部

       ①       ②    ④
for(let d = 0; d < 3; d++){
    document.write("forで繰り返し_"); ③
}

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

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

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

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

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

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

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

HTML（コード入力）の一部

for(let e = 0; e < 3; e++){
    document.write("forで繰り返し" + e + "_");
}

ブラウザ（実行結果）

繰り返し

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

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

HTML（コード入力）の一部

for(let f = 1; f < 4; f++){
    document.write("forで繰り返し" + f + "_");
}

ブラウザ（実行結果）

繰り返し

５　次回

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

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

JavaScript で「繰り返し」１

１　while 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

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

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３　for 文とは

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

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

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

５　次回

カテゴリー

更新記事

タグ

JavaScript で「繰り返し」１

１ while 文とは

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

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

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３ for 文とは

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

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

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

５ 次回

カテゴリー

更新記事

タグ

１　while 文とは

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

３　for 文とは

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

５　次回