ユーニックス総合研究所

  • home
  • archives
  • js-for

JavaScriptのfor文の書き方: 初期化、判定、更新、処理についてやinやofの使い方

  • 作成日: 2020-08-13
  • 更新日: 2023-12-28
  • カテゴリ: JavaScript

JavaScriptのfor文の書き方

JavaScriptにはfor文（フォーぶん）というループ処理を書ける文があります。
for文を使うと大量の処理を行うプログラムを作ることが可能です。
大量処理はプログラミングのだいご味！
ぜひともマスターしておきたいのがfor文です。

この記事ではJavaScriptのfor文の書き方を解説します。
最初に簡単に紹介しますが、JavaScriptのfor文は↓のように書きます。 

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

出力結果。 

0  
1  
2  
3

この記事ではJavaScriptのfor文について具体的に↓を見ていきます。

  • for文とは？
  • for文の種類と構造
  • 基本となるfor文の処理順序
  • 処理の省略
  • 基本となるfor文で配列を参照する
  • inを使うfor文
  • ofを使うfor文
  • 問題

関連記事

プログラミングの種類とできることを解説します【Python, JavaScript】
for文とリストの賢い使い方4つ【Python】
Vueのwatchの革命的な使い方【JavaScript】
Rustのfor文の書き方を解説します【for in, iter】
Rustのfor_eachメソッドの書き方【iter().for_each()】

for文とは？

そもそもfor文（フォーぶん）とはなんなのでしょうか？
for文は多くのプログラミング言語で使うことが出来る文です。
for文はループ処理を書く時に使われます。

プログラミングにおけるループ処理とは、大量にあるデータを処理したい時に使う処理です。
また、配列や連想配列などのデータ構造を参照したい時にもよく使われます。
ループ処理は大量のデータと非常に相性がよく、これを行うことでプログラムにたくさんのデータを処理させることができます。

for文はそのループ処理を書ける文の1つです。
この他にはwhile文などもあります。

for文を使ったループ処理は、現代的なプログラミングでは必ずと行っていいほど行われます。
もはやif文と並んでプログラミングにおける代名詞と言っても良い文でしょう。
for文をマスターしておかないと大量のデータを1つ1つ処理していかなくてはならないため、非効率的なプログラムしか作れません。
効率の良い処理を行うプログラムを作るには、このfor文はぜひともマスターしておきたい文です。

JavaScriptのfor文には同じ文でありながら、複数の文脈があり、これらを必要によって使い分ける必要があります。
それはたとえば添字を使ったfor文や、inを使ったfor文、それからofを使ったfor文です。
これらのfor文を使いこなせるようになれば、あなたの書くJavaScriptはかっこよくなるでしょう。

🦝 < for文を使いこなそう

for文の種類と構造

基本となる添字を使ったfor文は↓のような構造になっています。
まずforと書きます。それからカッコ（()）を書いて、その中に「初期化」、「判定」、「更新」の部分を書き、それらをセミコロン;で区切ります。
カッコを閉じたらブレース（{}）を書き、その中にループさせたい処理を書きます。 

for (初期化; 判定; 更新) {  
    処理  
}

それからinやofを使う場合は↓のような構造になります。
カッコの中が基本のfor文と異なっています。

inを使ったfor文ではカッコの中に「変数」を書いてinをはさみ「オブジェクト」となる変数などを書きます。 

for (変数 in オブジェクト) {  
    処理  
}

ofを使ったfor文ではカッコの中に同様に「変数」を書き、ofをはさんで「配列」などの変数を書きます。 

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

inを使ったfor文とofを使ったfor文の形はほぼ同じです。

🦝 < inとofが違うだけですね

しかし動作は結構違うので間違えないように注意しましょう。

基本となるfor文の処理順序

for文がどのように実行されていくかを見ていきます。
for文は基本となるfor文が一番複雑ですが、1つ1つ理解していけばだいじょうぶです。
また、この基本のfor文は他のプログラミング言語でも同じ構造であることが多いので、1つ覚えておけばほかでも知識の応用がききます。

まず基本の↓のfor文ですが、 

for (初期化; 判定; 更新) {  
    処理  
}

これは↓のような順番で処理が進みます。
最初に「初期化」、次に「判定」、そして「処理」「更新」と進んで、再び「判定」処理に戻ります。
この「判定」処理に「戻っている」ところがループ処理といわれるところです。

  1. 初期化
  2. 判定
  3. 処理
  4. 更新
  5. 2に戻る

たとえば↓のコードを見てみると、 

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

最初にlet i = 0;が実行され、変数が定義されます。
それからi < 4;が実行されます。変数iの値は0なので式の結果はtrueになります。
判定がtrueのあいだ、for文は実行され続けます。
次にconsole.log(i)が実行されます。
そしてi++が実行され、再びi < 4;が実行されるという流れです。

↑のfor文はカウント変数iが4より下の間、console.log(i)を実行します。
よって出力結果は 

0  
1  
2  
3

になります。
判定がfalseになるとfor文は終了します。

このようにfor文は判定部分がtrueの間、処理を繰り返し続けます。
判定の部分は変数だったり、比較演算子だったりといろいろです。
ちなみに判定がずっとtrueで永遠とループが続くことを「無限ループ」といいます。
無限ループはバグかと思われがちですが、普通のプログラムでもよく使われるループのテクニックの1つです。
特にゲーム開発などではよく使われています。

処理の省略

基本となるfor文の各処理（初期化、判定、処理、更新）は省略することが出来ます。
しかしそれらの部分は省略できても、セミコロン（;）は省略できません。
ですのですべて省略した場合はfor文のカッコの中にセミコロンが2つ残ることになります。 

for (;;) {  
    console.log(1)  
}

↑のfor文は初期化、判定、更新を省略していますが、for文自体は実行されます。
判定部分は省略するとtrueになります。falseではないので注意が必要です。
よって↑のfor文は延々に実行され続ける無限ループになります。

↑のコードの出力結果↓。 

1  
1  
1  
...

このfor文は先ほども紹介しましたが、無限ループと呼ばれます。
無限ループを使ったプログラムの例としては、GUIプログラムがあげられます。
GUIプログラムとは、ウィンドウが表示されるプログラムのことで、エディターやブラウザなどもGUIプログラムです。

これらは「閉じる」ボタンを押さないあいだ、永遠と画面に表示され続けていますが、この表示には無限ループが使われています。
「閉じる」ボタンを押してイベントを受信したら、ループが終了して無限ループからプログラムが脱出するというのが一般的です。

無限ループはプログラミングでは非常によく使われるループです。
無限ループから脱出するときはCtrl + Cです。覚えておきましょう。

基本となるfor文で配列を参照する

普通のfor文で配列を参照するには、↓のようにカウント変数（i）を作って配列にアクセスします。
↓の場合、参照する配列がaryで、それをfor文内の処理で添字を使って参照（ary[i]）しています。 

const ary = [1, 2, 3]  

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

出力結果。 

1  
2  
3

この配列と添字、そしてfor文の組み合わせは非常によく使われるfor文の形です。
for文における配列の参照方法はこれが基本形と言ってもいいでしょう。
あとは応用的にこの形が変形することが多いですが、まずはじっくり↑の基本形を理解してみてください。

それからこの形のfor文の処理は、後述するofを使ったfor文に近いものがあります。
後述のofを使ったfor文は、↑の形のfor文で置き換え可能です。

inを使うfor文

for文にはinが使えます。
これはオブジェクトをfor文で回したい時に使います。
ここで言うオブジェクトとは、キーが存在するオブジェクトのことです。

たとえば↓のように使います。 

const obj = {  
    name: 'Taro',  
    age: 16,  
}  

for (const key in obj) {  
    console.log(key, obj[key])  
}

出力結果。 

name Taro  
age 16

objという変数がオブジェクトです。
変数keyにはobj内のキーが順に代入されていきます。
ですのでそのkeyを使えばobj内の値にアクセスできるようになります。
オブジェクトの要素の参照は角カッコ（[]）をつけてその中にキーを書けばアクセス可能です。
このfor文はオブジェクトの各値に順次アクセスしたい時によく使われます。

inは配列にも使うことが出来ます。
配列に使う場合、変数には添え字が代入されます。 

const ary = [1, 2, 3]  

for (const i in ary) {  
    console.log(i, ary[i])  
}

出力結果。 

0 1  
1 2  
2 3

↑の変数iには配列の添字が0から順に代入されていきます。
先ほどの添字を使ったfor文に比べると、こっちのinを使ったfor文のほうがシンプルに見えると思います。
それはそのはずで、JavaScriptの熟練者は特に理由がない限り、配列を順に参照していく時はこのinや後述のofを使ったfor文を使います。
しかしこれらのfor文は添字を使った基本のfor文に比べると自由度が低いため、なにか複雑なことをしたい場合は基本となる添字を使ったforが使われるのです。

簡略化するならinやof、複雑なことをしたいなら普通のfor文と覚えておきましょう。

ofを使うfor文

ES6以降ではfor文にofが使えます。
これは配列をfor文で回したい時に使います。
配列のメソッドforEachに相当する機能です。 

const ary = [1, 2, 3]  

for (const el of ary) {  
    console.log(el)  
}

出力結果。 

1  
2  
3

変数elには配列aryの要素が先頭から代入されていきます。
inと違って変数elには配列の要素がそのまま代入されていきます。
添字もiもいらないとき、要素のみ使えればいいという時にこのfor文は使われます。

非常によく使うfor文なので覚えておきたいところです。

関連記事
JavaScriptのforEach: 配列を順に参照していく簡略された記法

for分の使い道とは？

それでfor文はどういうときに使うのでしょうか？
これはやはり大量処理をしたい時です。

たとえば1万件のユーザー情報を参照したい時など手作業で1つ1つ見ていっては大変です。
しかしfor文を使えば1万件もすぐにおわります。

このような大量処理ではfor文は非常によく使われます。
もはやプログラムはfor文がないと機能しない……は言いすぎでしょうか。
しかしfor文がないプログラミング言語でプログラミングしたいという人はけっこう変わってる人かもしれません。

問題

Q1: キーを持ったオブジェクトを参照するときに適したfor文をあげよ

  1. inを使ったfor文
  2. ofを使ったfor文
  3. 普通のfor文

Q2: 普通のfor文では初期化のあとにどの処理が呼ばれるか？

  1. 更新
  2. 判定
  3. 処理

Q3: 普通のfor文で配列を参照するときに使われる変数はなんというか？

  1. 要素
  2. 添え字
  3. キー

答え
Q1: 1
Q2: 2
Q3: 2

カテゴリー

メニュー