【JavaScript入門】「for – of文」の使い方と間違いやすいポイントを徹底解説!

こんにちは、ライターのマサトです!

みなさんは、「for – in文」とよく似た書き方をする「for – of文」をご存知でしょうか?

この2つは見た目が「似ている」…というだけで、その使い方や概念はまったく違うものです。
なぜオブジェクトではなく、配列などでよく使われているのか…など、その性質を知っているのと知らないのでは大きな差が生じます。

そこで、この記事では「for – of文」の基本的な使い方から始まり、どのような性質を持っているのかまで詳しく解説いたしますので、ぜひ参考にしてみてください!

「for – of文」の構文について

まずは、基本的な使い方から学習していきましょう!

簡単なサンプルとして、「for – of文」を使って配列の繰り返し処理を行う場合の構文は次のようになります。

このように書くと、「配列」の値を1つずつ「変数」へ代入してくれるようになります。通常の「for文」と違い、「繰り返し回数」や「カウンタ変数」などを意識せずに扱えるのでシンプルで使いやすい構文と言えるでしょう。

配列を反復させてみよう!

それでは、「for – of文」の簡単な練習をしてみましょう。

次のような配列データを用意しておきます。

この配列を、先ほどの構文にしたがって「for – of文」で書くと次のようになります。

出力結果は…

バナナ
リンゴ
メロン
ミカン

となります。とてもシンプルですね!

配列「array」の値が、変数「item」に1つずつ代入されていくので、そのままコンソールログへ「item」を出力するだけで良いので分かりやすいです。

DOMを取得してみよう!

今度は、任意のDOM要素を取得して、文字を書き換えてみましょう!

まずは、次のようなHTMLがあったとします。

このHTMLの「p要素」をすべて取得して、文字列「テキスト1」〜「テキスト3」を表示するプログラムを作ってみます。

そこで、まずはすべての「p要素」を取得してみましょう!

このように書くと、「p要素」をすべて含んだDOMコレクションを取得することが出来ます。

あとは、このまま「for – of文」を使えば「p要素」を表示することができますね。

出力結果は次のようになります!

「for – of文」の重要な性質について

さて、これまで「for – of文」の基本的な使い方を学習してきました。

とてもシンプルな記述で「配列、DOM」などを効率よく扱えて便利なのですが、特殊な性質を持っていることに注意が必要です。

それは、「for – of文」を利用することが出来るのは、「イテラブル(iterable)・オブジェクト」が含まれているオブジェクトだけであるという点です!

と、言っても良くわかりませんよね…。

言葉で説明するよりも、実例を見たほうが理解しやすいので、まずは次のコードを見てみましょう!

これは、新しく「空の配列」を作り、それをそのままコンソールログに表示するだけのプログラムです。
そして、コンソールに表示された「__proto__」プロパティを展開した時に表示される「Symbol.iterator」が、イテラブル・オブジェクトになります。

javascript-for-of-tutorial-2

これは、「値」を順番に1つずつ取り出すことができるオブジェクトなのですが、簡単に言ってしまえばコレが存在するかしないかで、「for – of文」を「使える・使えない」が決まってしまいます

もう1つ、先ほどのDOMコレクションも同じようにコンソールログで確認してみましょう!

すると、やはり「イテラブル・オブジェクト」が存在していました!

javascript-for-of-tutorial-3

他にも、 Map、Set、String、TypedArray…など、いくつかのオブジェクトにも含まれているので、これらは「for – of文」が使えるというわけです。

通常のオブジェクトに利用できないワケ

それでは、同じように今度は「空のオブジェクト」で試してみましょう!

すると、コンソールログには「イテラブル・オブジェクト」を見つけることができないはず!

そのため「for – of文」を試してみると…

次のように「エラー」が発生するわけです!

ちなみに、「イテラブル・オブジェクト」は自分で作成することも可能なので、その際はオブジェクトも「for – of文」を利用できるようになります。(参考ドキュメント|MDN)

まとめ

今回は、「for – of文」の基本的な使い方や特殊な性質について学習しました。

簡単にまとめると次のようになります。

・「for – of文」はシンプルな記述で、配列などの反復処理を行える
・「for – of文」を使うには「イテラブル・オブジェクト」が含まれている必要がある
・通常のオブジェクトには「イテラブル・オブジェクト」は含まれていない

という内容でした。

また、「for – of文」はECMASCript2015から導入された構文なので、古いブラウザには対応していない点も注意が必要でしょう。

あと、基本的な繰り返し処理となる「for文」についても、次の記事で分かりやすく解説しているのでこちらも忘れないように学習を済ませておきましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説