広告 Write

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

【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メソッドを呼び出す

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

復習ドリル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デザイン】40代、未経験でも慣れてきた3つの理由

-Write