【JavaScript】繰り返しの処理を行なうfor構文の書き方

JavaScriptのfor構文について知りたい。繰り返し処理はプログラムの重要な機能と聞いたから
for構文の具体的な使い方を知っておきたい。注意点や応用などもあれば、なお良しです

本記事はJavaScriptに苦手意識を持っていた過去の自分へ向けて書いています。

この記事でわかること

繰り返し処理を行なうfor構文の書き方
配列を使うfor構文や、for of 文について
for構文を使ったさまざまな繰り返し文

本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます（6ヶ月コース）
学校での使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」
ブログ歴：2019年1月にWordPressで開設（月間最高62,000PV、52,000円）

本記事ではJavaScriptのfor構文について、職業訓練校で学んだことを書いています。
Web業界に興味を持ち始めたばかりの過去の自分へ向けて、理解しやすいようにまとめました。

※JavaScript初心者に究極にやさしい本
自分は復習をサボり、for構文の理解に時間がかかりました。助けになったのは「スラスラ読める JavaScriptふりがなプログラミング」です。教科書よりもわかりやすく、初心者向けに噛み砕かれた本だからです。

Contents

【JavaScript】繰り返しの処理を行なうfor構文の書き方
for構文を使ったさまざまな繰り返し文
まとめ：JavaScriptの繰り返し処理「for構文」を覚えよう

【JavaScript】繰り返しの処理を行なうfor構文の書き方

for構文は、同じ処理を繰り返すときに使います。

for構文の書き方

for構文は、次の書式で書きます。
for構文のカッコ内は「 ;（セミコロン）」で区切って書きます。

for( 初期化 ; 継続条件 ; 最終式 ){
　繰り返したい文
}

//初期化：繰り返しを始める前に初期化を実行
//継続条件：真偽値を書く式や関数を書く
//最終式：ブロックの処理のあとで毎回実行

たとえば、以下です。

　let count = 0;
　for( count ; count < 3 ; count ++ ){
　console.log( '繰り返し' );
}

//出力結果：（3）繰り返し

本来なら「繰り返し」という文字が3回出力されます。
ただ同じ言葉なのでコンソール上では（3）という回数が表示されます。

一般的にはわざわざ変数で定義せずに、for構文と一緒に書きます。
for構文の変数は「 i 」がよく使われます（予想：Indexの頭文字）。

初期化用の変数は、繰り返し処理の中で出力などに使えます。

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

//出力結果：
0
1
2

＋＋は「変数の値を1増やす」というインクリメント演算子です。
詳しくは【JavaScriptの入力】変数の使い方、変数の3つの種類を解説で解説しています。

配列と繰り返し

「配列と繰り返し処理」は、相性が良いです。

配列に出力したいデータを格納しておき、一気に出力できるからです。
JavaScriptの繰り返し文と組み合わせると、連続的に処理できます。

たとえば、以下です。

const foods =[ 'うどん' , 'そば' , 'ラーメン' , 'パスタ' ];

for( let i = 0 ; i < 4 ; i++ ){
　console.log( foods[ i ] );
};

//出力結果：
うどん
そば
ラーメン
パスタ

配列の中にデータ数は「配列名.length」で取得できます。
配列の中のデータをすべて出力する場合は、lengthを使うのが一般的です。

console.log(foods.length);
//出力結果：4

for( let i = 0; i < foods.length; i++ ){
　console.log(foods[ i ]);
}
//出力結果：
うどん
そば
ラーメン
パスタ

lengthを使えば、配列内のデータ数を数えなくてすむので便利です。

なお配列の基礎については「【基礎】JavaScriptの配列の定義方法【今日の日付を出力】」で解説しています。

for構文以外の繰り返しの書き方【for of】

for of 文は、配列から1要素ずつ順番に取り出して繰り返しができます。

for( 変数 of 配列名 ){
　処理
}

配列に記憶している要素を、変数に順次入れます。

記述例です。

const drinks =[ 'ビール' , '日本酒' , '焼酎' ];
　for(drink of drinks){
　　console.log(drink);
}

//出力結果：
ビール
日本酒
焼酎

HTMLに記述してみます。

index.html

const drinks = [ 'ビール', 'サッポロラガー', 'サッポロクラシック', 'サッポロ黒ラベル', 'サッポロエビス', 'ゴールドスター' ]

for (drink of drinks) {
　　console.log(drink);
}

</script>

【解説】
配列drinksを定義して、飲み物の名前を格納。
「配列から1個1個取り出して、繰り返せ」という意味
for of 文で繰り返し処理をする。

数を考えなくていいので使いやすいですね。

for構文を使ったさまざまな繰り返し文

「スラスラ読める JavaScriptふりがなプログラミング」を参考しつつ、for構文の応用をまとめました。

10から1へ逆順で繰り返す

増えていくのではなく、減っていくfor構文です。
デクリメント演算子「ーー」を使います。

index.html

for (let count = 10; count > 0; count--) {
　console.log(count+'回目です');
}

//出力結果：
10回目です
9回目です
8回目です
7回目です
6回目です
5回目です
4回目です
3回目です
2回目です
1回目です

繰り返しを繰り返す【多重ループ】

for構文の中に、for構文を書けます。
多重ループの練習として、よく使われる九九の計算をします。

index.html

//出力結果：九九の組み合わせがすべて表示されます

九九の「1×1＝1」という式の部分も表示させると、以下です。

index.html

//出力結果：九九の組み合わせ「○×○＝○」がすべて表示されます。

総当たり戦の表をつくる

総当たり戦とは、全チームが対戦することです。
すべての組み合わせを、for構文で書けばOKです。

A〜Eの5つのチームがあると仮定します。

index.html

for(t1 of team){
　　for(t2 of team){
　　　console.log(t1 + 'vs' + t2);
　　}
　}
</script>

すべての組み合わせが表示されますが、AvsAなど同チームも出力してしまいます。
よって、以下のようにif構文で切り分ける必要があります。
»【JavaScriptの分岐】if構文の書き方、うるう年の判定方法

index.html

for(t1 of team){
　　for(t2 of team){
　　　if(t1 != t2){
　　　console.log(t1 + 'vs' + t2);
　　　}
　　}
　}
</script>

AvsAなどの同チーム対戦が消えました。
しかしAvsB、BvsAの重複は出力されてしまいます。

正解

index.html

　for (t1 of team) {
　　opps.shift();
　　for (t2 of opps) {
　　　console.log(t1 + 'vs' + t2);
　　　}
　　}
</script>

手順：書籍参考

手順①：総当たり戦の表を書いてみる
手順②：同チーム同士の対戦と、同じ対戦組み合わせを省くと、表の右上半分だけが残る
手順③：残った部分を表示するプログラムをつくる
手順④：対戦相手を表す配列も用意し、変数oppsに入れる
手順⑤：外側のfor文で繰り返すたびに、配列の先頭要素を削除するshiftメソッドを呼び出す

総当たり戦は難しく、自力ではできませんでした。

復習ドリル2問

「スラスラ読める JavaScriptふりがなプログラミング」の問題2つを解いてみました。

問題1．以下の読み下し文を読んで、東西南北を表示するプログラムを書いてください。

配列[ 文字列「東」、文字列「西」、文字列「南」、文字列「北」]を、新規作成した変数dirに入れろ。
変数dirに所属する要素を変数dに順次入れる間、以下を繰り返せ。
{ 変数dをコンソールに表示しろ。}

正解

index.html

const dir = [ '東', '西', '南', '北' ];
　for (d of dir) {
　　console.log(d);
　};

</script>

//出力結果：
東
西
南
北

問題2．以下の読み下し文を読んで、金曜日〜月曜日を表示するプログラムを書いてください。配列には「月、火、水、木、金」の順番に記録されているものとします。

配列[ 文字列「月」、文字列「火」、文字列「水」、文字列「木」、文字列「金」]を、新規作成した変数wdaysに入れろ。
新規作成したcntを数値4で初期化し、継続条件「変数cntは数値0以上」が真の間、以下を繰り返せ。
{ 変数wdaysの要素cntと文字列「曜日」を連結した結果をコンソールに表示しろ。}変数cntを1減らす。

読み下し文のおかげで、すんなりできました。

index.html

const wdays = [ '月', '火', '水', '木', '金' ];
　for (cnt = 4; cnt >= 0; cnt--) {
　　console.log(wdays[cnt] + '曜日');
};

//出力結果：
月曜日
火曜日
水曜日
木曜日
金曜日