どうも、カメ助(@kamesuke_blog)です。
プログラミング言語JavaScriptのfor文を使った繰り返し処理について、ITエンジニアの筆者が初心者向けに丁寧に解説します。
本記事を読めば、JavaScript for文の書き方・使い方について理解できます。
for文のサンプルコードを用意しましたのでご自由にお使いください。
最後には理解度テストがありますので、全問正解してJavaScriptのfor文マスターになりましょう！！
for文を使用したサンプル
はじめに、「for文がどのようなものか？」イメージを掴んでもらうために基本的なサンプルコードを2つ用意しましたのでご覧ください。
基本：配列の中身を順番に出力する
|
1 2 3 4 5 |
//配列の中身を順番に出力する let lists = ['1番目','2番目','3番目'];//配列に値をセット for(let i = 0; i < lists.length; i++){ console.log(lists[i]); //コンソールに配列に入っている文字列を出力する } |
|
1 2 3 4 |
//出力結果 1番目 2番目 3番目 |
配列の中身の値を出力するプログラムです。最も基本的なfor文の使用例なので覚えておきましょう。
九九の計算を行う
|
1 2 3 4 5 6 |
//九九の計算を行う for(let i=1;i<=9;i++){ for(let j=1;j<=9;j++){ console.log(i+'×'+j+'='+i*j) } } |
|
1 2 3 4 5 6 7 8 |
//出力結果 1×1=1 1×2=2 1×3=3 … 9×7=63 9×8=72 9×9=81 |
九九の計算(1×1～9×9)を行うプログラムです。
以上、for文を使ったサンプルでした。ここからは、for文の基本的な書き方について解説していきます。
for文の基本的な書き方
for 文を書くときの書式は次の通りです。Javaなどの他プログラミング言語も基本的には同じです。
|
1 2 3 4 |
//JavaScriptのfor文(繰り返し処理) for ( [①初期化式]; [②条件式]; [③加算式]){ ④[条件が真(true)の場合に実行される処理] } |
実際にプログラムでは以下のように記述します。
|
1 2 3 4 |
//0,1,2,…,9と順番に出力する for(let i = 0; i < 10; i++){ console.log(i); //コンソールに数字iを出力する } |
こちらについて、詳しく解説します。
①：初期化式
繰り返し処理用のカウンタ変数を初期化します。for文の最初に一度だけ実行されます。この初期化は省略可能ですが、特別な理由がない場合は省略しない方がいいです。
最初は「let i = 0」と覚えておきましょう。
カウンタ変数「i」を定義し、その初期値を「０」にすることを意味しています。
②：条件式
繰り返し処理の条件式を記述します。ループ前に評価され、結果が真(true)の場合に、波括弧{…}内の処理④が実行されます。条件式が省略された場合は、常に真(true)になります。(無限ループになるので注意！！)
「i < 10」と記述することで、カウンタ変数「i」が10未満の間、繰り返し処理を行います。
③：加算式
ループの前に実行される式で、カウンタ変数の加算を行います。この式も省略可能ですが、その場合は波括弧{…}内の処理④で変数の加算処理などを記述する必要があります。
i++：カウンタ変数を＋１する。
i = i + 2：カウンタ変数を+2する。（1つ飛ばしで繰り返し処理をする）
条件式に使用する比較演算子
for文の条件式に使用する比較演算子の一覧です。for文を使用する際に確認することが多いと思うので記載しておきます。
| 演算子 | 意味 | 備考 |
|---|---|---|
| > | より大きい | |
| >= | 以上 | |
| < | より小さい | |
| <= | 以下 | アロー関数「=>」と間違えないように注意 |
| == | 等しい | データ型については比較対象外 |
| != | 等しくない | データ型については比較対象外 |
| === | 値が等しい、かつデータ型も等しい | |
| !== | 値が等しくない、またはデータ型が異なる |
カメ助「=>」はアロー関数という別のものを指すので注意しましょう！
for文のサンプルコード
for文を使用したサンプルコードを5つ用意しました。
サンプル1：0～4の数字を順に出力
|
1 2 3 4 |
//サンプルコード①(0,1,2,3,4と順番に出力する) for(let i = 0; i < 5; i++){ console.log(i); //コンソールに「i」に入っている数字を出力する } |
出力結果
|
1 2 3 4 5 |
0 1 2 3 4 |
加算式に「i++」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+1し、「i」の値を出力します。
サンプル2：配列のデータをすべて出力
|
1 2 3 4 5 |
//サンプルコード②(配列の中身を順番に出力する) let lists = ['1番目','2番目','3番目'];//配列に値をセット for(let i = 0; i < lists.length; i++){ console.log(lists[i]); //コンソールに配列に入っている文字列を出力する } |
出力結果
|
1 2 3 |
1番目 2番目 3番目 |
条件式に「lists.length」を使っています。これは配列の要素数を取得するメソッドで、今回の場合は「i < 3」と同じ意味になります。
あとは、加算式に「i++」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+1し、lists[ i ]で順番に配列のデータを出力します。
サンプル3：0~10の数字の内、偶数のみ出力
|
1 2 3 4 |
//サンプルコード③(0~10の数字の内、偶数のみ出力する) for(let i = 0; i <= 10; i = i+2){ console.log(i); } |
出力結果
|
1 2 3 4 5 6 |
0 2 4 6 8 10 |
加算式に「i=i+2」を指定しているので、繰り返し処理毎にカウンタ変数「i」を+2します。
そのため、0、0+2=2、2+2=4、4+2=6、・・・と偶数のみ出力します。
サンプル4：0~4を数字の大きい順に出力
|
1 2 3 4 |
//サンプルコード④(0~4の数字を数の大きい順に出力する) for(let i = 4; i >= 0; i--){ console.log(i); } |
出力結果
|
1 2 3 4 5 |
4 3 2 1 0 |
初期化式でi=4を指定し、加算式に「i–」を指定しているので、繰り返し処理毎にカウンタ変数「i」を-1します。そのため、4、4-1=3、3-1=2、2-1=1、・・・と大きい数字から順に出力します。
理解度テスト
難易度Debut★
問題：次のソースコードの「XXX」の部分を埋めて、「0～10」までを順番にコンソールへ出力するプログラムを完成させてください。
|
1 2 3 |
for(XXX){ console.log(i); } |
カメ助ヒント！：サンプル1を参考に初期値、条件式、加算式を記述しよう！
|
1 2 3 |
for(let i = 0; i <= 10; i++){ console.log(i); } |
難易度Regular★★
問題：次のソースコードの「XXX」の部分を埋めて、配列(lists)の要素をすべてコンソールへ出力するプログラムを完成させてください。
|
1 2 3 4 |
let lists = ['リンゴ','ゴリラ','ラッパ','パンダ']; for(XXX){ console.log(lists[i]); } |
カメ助ヒント！：サンプル2を参考に初期値、条件式、加算式を記述しよう！
|
1 2 3 4 |
let lists = ['リンゴ','ゴリラ','ラッパ','パンダ']; for(let i = 0; i < lists.length; i++){ console.log(lists[i]); } |
難易度Pro★★★
問題：「10～100」までを順番にコンソールへ出力するプログラムを作成してください。なお、数値は「10, 20, 30,…, 100」と出力させて下さい。
[expander_maker id=”1″ more=”答え” less=”答えを隠す”]|
1 2 3 |
for(let i = 10; i <= 100; i = i+10){ console.log(i); } |
難易度Master★★★★
問題：以下のソースコードと出力結果が同じになるように、配列とfor文を使用したプログラムを作成してください。
|
1 2 3 4 5 |
console.log('パンダ'); console.log('ダチョウ'); console.log('ウサギ'); console.log('ギター'); console.log('タンス'); |
|
1 2 3 4 |
let lists = ['パンダ','ダチョウ','ウサギ','ギター','タンス']; for(let i = 0; i < lists.length; i++){ console.log(lists[i]); } |
難易度Master+★★★★★
問題：「0～100」までの数値を順番に要素に持つ配列を作成し、その配列の全要素をコンソールへ出力するプログラムを作成してください。
[expander_maker id=”1″ more=”答え” less=”答えを隠す”]|
1 2 3 4 5 6 7 8 9 10 11 12 |
//配列のインスタンス作成 let lists = new Array(); //配列の要素に0～100までの値を追加 for(let i = 0; i <= 100; i++){ lists.push(i); } //配列の各要素をコンソールへ出力 for(let i = 0; i < lists.length; i++){ console.log(lists[i]); } |
まとめ
最後に、これまで学習してきたfor文の使い方をまとめておきます。
まずは基本的なfor文による繰り返し処理をおさらいしましょう！
|
1 2 3 |
for(let i = 0; i < 10; i++) { console.log(i); } |
for()の引数に初期化式「let i = 0」、条件式「i < 10」、加算式「i++」をそれぞれ設定することでループ処理を実現しています。
同様に、配列の各要素を1つずつ繰り返し処理することも簡単です。
|
1 2 3 4 |
let lists = ['カメ', 'メダカ', 'カラス', 'スイカ', 'カモメ', 'メロン']; for (let i = 0; i < lists.length; i++) { console.log (lists[i] ); } |
ポイントは、条件式に配列の要素数を取得するメソッドである「lists.length」を利用している点です。
これにより、配列の各要素をすべて1つずつ処理できます。
今回は以上で終了です。お疲れさまでした！
おまけ：for文のメリットは？
for文を使うメリットは、プログラムのソースコード量を少なくできることです。for文を使用しなくても、処理する回数分だけソースコードを記述すれば同じことが実現可能ですが、数百回、数千回の繰り返し処理を行う場合には現実的ではありません。
また、一般的にソースコード量が大きくなるとバグ(不具合)が発生しやすくなります。
さらに、実際の業務では、ソースコードを修正する場合がよくあります。その際に、ソースコード量が少ない(修正箇所が少ない)ほうが修正漏れを防ぎやすいです。
カメ助for文を積極的に使用し、ソースコード量を少なくするように心がけよう！！
コメント
コメント一覧 （8件）
[…] >>「for」文の解説についてはこちら […]
[…] ※今回の問題は、for文を使用しています。for文の解説はこちら […]
[…] 参考：if～else文についてはこちら、for文についてはこちら […]
[…] for文の解説ページはこちら […]
[…] for文の解説ページはこちら […]
[…] for文の解説ページはこちら […]
[…] for文の解説ページはこちら […]
[…] 【JavaScript入門】for文を使って繰り返し処理する方法 […]