Web Design

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

2021年7月16日

JavaScriptの繰り返し
  • 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ふりがなプログラミング
教科書よりもわかりやすく、初心者向けに噛み砕かれた本です。

こーいち
書籍での学びも含め、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

<script>

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

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

</script>

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

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

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

JavaScriptの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

<script>
for (let x = 1; x < 10; x++) {
 for (let y = 1; y < 10; y++) {
  console.log(x * y);
  }
 }
</script>

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

九九の「1×1=1」という式の部分も表示させると、以下のとおり。

index.html

<script>
for (let x = 1; x < 10; x++) {
 for (let y = 1; y < 10; y++) {
  console.log(x + '×' + y + '=' + x * y);
  }
 }
</script>

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

総当たり戦の表をつくる

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

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

index.html

<script>
const team = ['A', 'B', 'C', 'D', 'E'];

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

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

index.html

<script>
const team = ['A', 'B', 'C', 'D', 'E'];

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

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

正解は、以下のとおり。

index.html

<script>
 const team = ['A', 'B', 'C', 'D', 'E'];
 const opps = ['A', 'B', 'C', 'D', 'E'];

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

【解説】※ 書籍より引用

どうプログラムを書いたらいいかわからないときは、一回プログラムのことは忘れて、自分がやりたいことを整理してみましょう。まず、総当たり戦の表を書いてみます。そこから同チーム同士の対戦と、同じ対戦組み合わせを省くと、表の右上半分だけが残ります。

この残った部分だけを表示するプログラムを作ればいいわけです。

今回は対戦相手を表す配列も用意し、変数oppsに入れました。そして、外側のfor文で繰り返すたびに、配列の先頭要素を削除するshiftメソッドを呼び出します。そうすると配列は「 'B', 'C', 'D', 'E' 」→「 'C', 'D', 'E' 」→「 'D', 'E' 」→「 'E' 」と減っていきます。

JavaScriptのfor構文

出典:スラスラ読める JavaScriptふりがなプログラミング

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

復習ドリル2問

スラスラ読める JavaScriptふりがなプログラミングに掲載されている問題2つを引用しました。
実際に考えて、解いてみました。

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

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

簡単にできました。
正解は、以下のとおり。

index.html

<script>

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

</script>

//出力結果:

西

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

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

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

index.html

<script>

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

<script>

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

まとめ:JavaScriptの繰り返し処理「for構文」を覚えよう

JavaScriptのfor構文

 【まとめ】for構文の書き方

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

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

繰り返し処理は、重要なプログラムです。
しっかりと基礎理解を深め、焦らずに進めていきましょう。

テキストだけではなく動画コンテンツなどによる、多角的なアプローチも理解を深める助けになります。

こーいち
ひとつひとつ基礎を積み上げます。

こーいちより

P.S. JavaScriptの繰り返し文「for構文」を覚えよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.