初心者向け!JavaScriptプログラミングスタート講座 3章

JavaScript

こんにちは、ECF Techブログ
担当のMichiharu.Tです。

本記事はプログラミングを始めてみたいという方のために作成された連載記事です。実際にプログラムを作って動かしながら学べるWeb教材となっています。Web教材全体の目次は下記のリンクからご覧いただけます。ぜひ、日ごろのプログラミング学習にご活用ください。

今回は、前回に引き続き制御構文です。その一つであるくりかえし文をご紹介します。

初心者向け!JavaScriptプログラミングスタート講座
こんにちは、ECF Techブログ 担当のMichiharu.Tです。 本記事はプログラミングを始めてみたいという方のために作成された連載記事の目次ページです。実際にプログラムを作って動かしながら学べるWeb教材です。 JavaScrip...

while文

最初にくり返し文の基本となるwhile文をご紹介します。文法は次のようになります。

while(条件式){
    //条件式がtrueの間、くり返す処理
}

条件式を記述し、その条件式がtrueの間ブロック内の処理をくり返し実行するという動作をします。プログラム例を示します。

let i = 0;
//変数iが5より小さい間くり返し
while(i < 5){
    //iの値を表示
    console.log(i);
    //iの値を1増やす
    i++;
}

実行結果

0
1
2
3
4

iが5より小さい間、ブロック内の処理をくり返します。ここでiを1増やす処理(i++)は重要です。この処理がないとiはいつまでたっても5に達することがなくなり、プログラムが 無限ループ となり、プログラムが終了しなくなってしまいます。while文を使う際はこの点に注意が必要です。また、変数iのような、主に数えることを目的に使われる変数を特に 「カウンタ」 と呼ぶ場合があります。

無限ループになってしまった場合は、ブラウザを終了させましょう。といっても処理が重くなってしまうこともありますので、実行前にプログラムをきちんと確認することが重要です。

for文

次にfor文をご紹介します。for文はくり返し回数が決まっている場合に便利な構文です。 文法を示します。

for(初期処理; 条件式; 後処理){
    くり返し処理
}

for文は上のように大きく4つの処理や式から成ります。実行順番を把握しておきましょう。 初期処理条件式くり返し処理後処理となります。以降条件式が真の間、条件式くり返し処理後処理をくり返します。プログラム例を示します。

for(let i = 0; i < 5; i++){
    console.log(i);
}

実行結果

0
1
2
3
4

「iを0〜4まで1ずつ増やしながら、iの値を表示する」プログラムです。初期処理でiを宣言し、0を代入しています。以降はi<5の条件式が真の間、「iの表示」と「iの1加算」をくり返しています。

くり返し文の使用例

ここまで、基本的なくり返し文であるwhile文とfor文をみてきましたが、実際どのように活用するのかイメージがつきづらいという方もいらっしゃるかと思います。ここでは、「1〜10までの足し算を行い、その結果を表示する」というプログラムをwhile文、for文それぞれで作成したサンプルをご紹介します。

while文によるサンプルプログラム

let i = 1;
//合計を格納する変数
let sum = 0;
while(i <= 10){
    sum = sum + i;
    i++;
}
//合計を表示
console.log('合計は' + sum + 'です。');

for文によるサンプルプログラム

//合計を格納する変数
let sum = 0;
for(let i = 1; i <= 10; i++){
    sum = sum + i;
}
//合計を表示
console.log('合計は' + sum + 'です。');

実行結果(while文、for文バージョン共通)

合計は55です。

どちらのプログラムも合計を入れておく変数sumを用意し、そのsumにiの値(1~10まで変化する)をどんどん足しこんでいくことで合計値を求めています。

本日はここまでとなります。最後までご覧くださりありがとうございました。くり返し文は、様々なプログラムを経験して慣れていく必要があります。というわけで、今回もいくつかの練習問題をご用意しました。ご自身で作成にチャレンジしたり、解答例をサンプルプログラムとして練習して頂ければと思います。ぜひ、学習にお役立てください。

練習問題

問題1

提供コードの空欄①〜③を埋め、実行結果を得てください。

for(let i = 0;①;②){
    console.log(①);
}

実行結果

i = 0
i = 1
i = 2
i = 3
i = 4
for(let i = 0; i < 5; i++){
    console.log('i = ' + i);
}

問題2

5の段を表示するプログラムを作成し、実行結果を得てください。

実行結果

5
10
15
20
25
30
35
40
45
for(let i = 1; i <= 9; i++){
    console.log(5*i);
}
タイトルとURLをコピーしました