JavaScriptのfor...of文で配列をループする方法｜初心者でもわかる基本から解説

1. for...of文とは？

1. for...of文とは？

JavaScript（ジャバスクリプト）におけるfor...of文とは、配列の中に入っている値を1つずつ取り出して処理するための文（＝決まった書き方）です。

「配列（はいれつ）」とは、データを順番に並べた箱のようなものです。たとえば、「りんご」「みかん」「バナナ」といった果物を並べたものが配列になります。

2. 配列とは何か？初心者向けに簡単に説明

2. 配列とは何か？初心者向けに簡単に説明

配列とは、複数の値を1つにまとめたものです。たとえば、以下のように書きます。

const fruits = ["りんご", "みかん", "バナナ"];

この例では、fruitsという名前の配列に、3つの果物の名前が入っています。

3. for...of文の基本的な書き方

3. for...of文の基本的な書き方

for...of文の基本的な使い方は、次のようになります。

for (let item of 配列名) {
  // itemを使った処理
}

let itemの部分には、配列から1つずつ取り出した値が入ります。ofの右側に書くのが対象となる配列です。

4. 具体的な例：果物を1つずつ表示する

4. 具体的な例：果物を1つずつ表示する

それでは、実際に配列の中身を1つずつ取り出して表示してみましょう。

const fruits = ["りんご", "みかん", "バナナ"];
for (let fruit of fruits) {
  console.log(fruit);
}

りんご
みかん
バナナ

このように、配列fruitsの中の値が、1つずつ取り出されてfruitに入り、それをconsole.log()で表示しています。

5. 「for...of」と「for」や「for...in」との違い

5. 「for...of」と「for」や「for...in」との違い

JavaScriptにはいくつかループ（繰り返し）の書き方がありますが、for...ofは配列の中の「値」を1つずつ取り出すのに適しています。

簡単に違いをまとめると：

• for文 → インデックス（番号）を使って1つずつ処理
• for...in文 → 配列の番号（キー）を1つずつ取り出す
• for...of文 → 配列の「値」そのものを取り出す

初心者には、配列の「中身」を扱うだけならfor...ofがもっとも簡単です。

6. よくある間違いと注意点

6. よくある間違いと注意点

以下のような間違いには注意しましょう。

• 配列ではなく、オブジェクトに対してfor...ofを使うとエラーになります
• for...ofの後ろには「of」があることを忘れない（「in」と間違えやすい）

配列に対してだけ使える書き方だと覚えておくと良いでしょう。

7. 配列に番号（インデックス）を一緒に使いたいとき

7. 配列に番号（インデックス）を一緒に使いたいとき

for...of文だけでは、何番目かの番号（インデックス）を直接使うことはできません。でも、entries()という機能を使えば、番号と値を両方取り出せます。

const fruits = ["りんご", "みかん", "バナナ"];
for (let [index, fruit] of fruits.entries()) {
  console.log(index + "番目：" + fruit);
}

0番目：りんご
1番目：みかん
2番目：バナナ

このようにすると、何番目の果物かも一緒にわかるようになります。

8. どんな場面でfor...of文を使うと便利？

8. どんな場面でfor...of文を使うと便利？

for...of文は、次のような場面でよく使われます：

• 複数の項目を順番に処理したいとき（買い物リストなど）
• 順番にメッセージを表示したいとき
• ボタンやチェックボックスの一覧を操作したいとき

とてもシンプルな書き方なので、初心者が最初に覚えるループとして最適です。

9. for...of文は配列だけに使える

9. for...of文は配列だけに使える

for...of文は、基本的には「配列」に対して使うための構文です。配列以外の「オブジェクト」などには使えないので注意が必要です。

間違えてオブジェクトに使おうとすると、次のようなエラーが出てしまいます。

const person = { name: "太郎", age: 30 };
for (let value of person) {
  console.log(value);
}
// → エラー：person is not iterable

このようなエラーが出たときは、「配列かどうか」を確認してみましょう。

まとめ

まとめ

ここまでJavaScriptにおける「for...of文」の基本的な使い方から、実戦で役立つ応用テクニックまで詳しく解説してきました。プログラミングにおいて、データの集合体である「配列」を効率よく扱うスキルは、Web開発の現場でも欠かせない必須知識です。特にfor...of文は、従来のfor文と比較しても記述がシンプルで読みやすく、バグを生みにくいという大きなメリットがあります。

for...of文の重要ポイントの振り返り

JavaScriptでループ処理を行う方法はいくつかありますが、for...of文を使いこなすために以下の3点をしっかりとおさらいしておきましょう。

• 直感的な構文： for (let 変数 of 配列) という形式で、インデックスを意識せずに値そのものを直接取り出せる。
• 可読性の向上： コードが短くなるため、後から見返した際やチーム開発において、何をしている処理なのかが一目で理解しやすくなる。
• 反復可能オブジェクトに対応： 配列だけでなく、文字列（String）やMap、Setといった「iterable（イテラブル）」なオブジェクトに対しても同様にループを回すことが可能。

実践的な活用例：数値配列の合計計算

例えば、テストの点数が入った配列があり、その合計点を出したい場合もfor...of文を使えば非常にスマートに記述できます。

const scores = [85, 92, 78, 64, 95];
let total = 0;

for (let score of scores) {
  total += score;
}

console.log("合計点は" + total + "点です。");

合計点は314点です。

このように、配列の各要素を一つずつ score という変数に取り出し、それを total に加算していくという流れが、一文でスッキリと表現できていることがわかります。

注意すべき「for...in文」との使い分け

初心者の方が最も混同しやすいのが「for...in文」です。名前は似ていますが、その役割は全く異なります。

配列に対して for...in を使ってしまうと、値ではなく「0, 1, 2...」といったインデックス番号が文字列として取り出されてしまうため、予期せぬ挙動を招くことがあります。配列のデータを扱うときは「of」、オブジェクトの構造を調べるときは「in」と使い分けるのがベストプラクティスです。

モダンなJavaScript開発に向けて

現代のフロントエンド開発（ReactやVue.jsなど）では、配列のメソッドである forEach や map もよく使われます。しかし、for...of には「途中で break（中断）ができる」というこれらにはない独自の利点があります。状況に応じて最適なループ処理を選択できるようになることが、脱・初心者への近道と言えるでしょう。

まずは自分で小さな配列を作り、実際に console.log で中身を表示させるところから始めてみてください。実際に手を動かしてコードを書くことで、文法が自分の血肉となり、自然と使いこなせるようになります。

const colors: string[] = ["赤", "青", "緑"];

for (const color of colors) {
  console.log(`色名: ${color}`);
}