【JavaScript】forとは?

こんにちは、パキラです


今回はプログラミングでとても重要な繰り返し処理の構文【for】を紹介します
呼び方は【for文】(フォーブン)と言われます
プログラミングをするときに繰り返し処理が行われることが多いですが、それを1つ1つ記述すると膨大な量になってしまいます
【for文】を使用することでプログラミングする上でコードをわかり易く、スマートに記述できます
このブログサイトは全くの未経験者が勉強した内容ですので、初心者向けの基本的しか記載されていないのでご了承ください



【初心者向け】ブログの始め方完全ガイド!立ち上げから収入を得る方法まで

for 基本文法

for文は繰り返す範囲を指定した反復処理をすることができます

for ( 初期化式; 条件式; 増分式 ){
    実行する内容;
  }

1.初期化式で変数の宣言
2.条件式の評価結果が true なら次に進む or falseならそこで終了
3.実行する内容を実行する
4.増分式で変数を更新
5.2~4を繰り返し条件式がfalseになったら3を実行せずに終了

let abc = 0; 
for ( let i = 0; i < 5; i++){
abc += i + 1;
}
console.log(abc);  ⇒ コンソールで15と表示される


上記は数字の1から5を加算したコードです
その合計をコンソールで表示させています

まず、for文の前に変数abcを宣言しておきます
これはfor文で実行した処理の結果を代入するために、変数という入れ物をあらかじめ作っておくためです
続いてfor文ですが、大きく分けると繰り返す範囲の指定、回数実行する内容2種類になります
繰り返し範囲の指定と回数は『 ( ) 』で挟みます
実行の内容は波括弧『 { } 』で挟みます



確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

価格:2,728円
(2022/7/19 09:34時点)

初期化式

では繰り返しの範囲の指定と回数についてです
最初に初期化式の変数を宣言しますが、もちろんこの値は0でなくても大丈夫です
0からではなく2からループ処理をしたいなどもできます
大抵の場合は0が多いと思います
そしてこの変数名は、この後の条件式で回数を決定する時に基準、初期値となる数値を決めておくだけなので、名前は特に意味はありませんので今回はただの『 i 』にしています

条件式


続いて条件式は、何回繰り返すのか指定するわけですが、上記のコードでは『 i<5 』ですので、変数 i が5未満であれば実行するとなります
最初の変数の0ですので、0,1,2,3,4と5回繰り返すというわけです
ここでは数字を加算するだけですので『 i<5 』と数字で回数を指定していますが、これを変数にすることも可能です
そうすることにより、繰り返したい変数の数だけ繰り返すなどといったことができます

増分式

次に、初期化式の変数をいくつづつ更新するか記述します
インクリメント演算子デクリメント演算子を使うことが多いと思います
インクリメント演算子は『 ++ 』デクリメント演算子は『』と記述しますが、変数を更新のたびに1増やす、若しくは1減らすといった使い方をします
その他にも3の倍数で変数を更新させるなんてこともできます
その場合は加算代入演算子を使用して『 +=3 』といった記述になります
ここまでがfor文の初期化式、条件式、増分式になります
続いて、実行される内容ですが、これは何を繰り返し実行したいかなのでプログラムによって様々です
上記のコードでは1から5までを加算して合計を出したいので、加算代入演算子を使用しています
加算代入演算子を使用しないでコードを記述すると、『abc = abc + i + 1』となります
ここで変数abcを2回記述することになるので『 += 』にすることで変数abcの記述を1回にまとめることができます
1回目『 abc += i + 1 』の変数 i には0になりますので『 0+1 』で1になり、変数abcの中に1が代入されます
2回目には変数 i の中には1が代入されているので『 1+1 』で2になり、1回目で既に変数abcの中にある1と加算して変数abcの中に3が代入されます
3回目は変数 i の中には2が代入されているので『 2+1 』で3になり、2回目で既に変数abcの中にある3と加算して変数abcの中に6が代入されます
4回目は変数 i の中には3が代入されているので『 3+1 』で4になり、3回目で既に変数abcの中にある6と加算して変数abcの中に10が代入されます
5回目は変数 i の中には4が代入されているので『 4+1 』で5になり、4回目で既に変数abcの中にある10と加算して変数abcの中に15が代入されます

今回は例としてただ数字を加算をしたものですが、プログラミングでは任意の数値の入った配列を受け取り、その合計を返す関数を作ったりと使えます

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ]

価格:2,640円
(2022/7/19 09:51時点)

for文の中にfor文

for文で実行する文には任意の文を記述できますので、別のfor文を記述することもできます

for (let i = 0; i < 5; i++){
  for(let j = 0; j < 5; j++){
   console.log( 'i=' + i , 'j=' + j);  
⇒  i=0 j=0 ← 外側 i の繰り返し処理(0回目)が実行され、ブロック内 j の繰り返しが実行される
    i=0 j=1
    i=0 j=2
    i=0 j=3
    i=0 j=4 ← ここでブロック内 j の繰り返し処理(0~4回目)が終わり、外側の i の変数(0 → 1)が更新される
    i=1 j=0 ← 外側の i の繰り返し(1回目)が実行され、ブロック内 j の繰り返しが実行される 
   ・ ・   以降は上記の繰り返しで外側の変数が 5 になったら外側の繰り返し処理が終わる
   ・ ・
 }
}

この様にfor文の中にfor文を記述することで、多次元配列などで配列の中を繰り返し同じ処理をしたいときに大変役に立ちます
同じコードを何回も記述しないで済みます

JavaScript 第7版 [ David Flanagan ]

価格:5,060円
(2022/7/19 09:38時点)

まとめ

ここまで読んでいただきありがとうございます
今回はJavaScriptで繰り返し処理のfor文について書きました
内容はfor文の基本的な構文の説明でした
本当に基本の基本ですので、ご了承ください

ありがとうございました

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

価格:2,728円
(2022/7/19 09:34時点)


コメント