JavaScriptのfor...of文で配列をループする方法｜初心者でもわかる基本から解説
生徒
「JavaScriptで、配列の中のデータを1つずつ取り出すにはどうすればいいですか？」
先生
「JavaScriptでは、for...of文という書き方を使うと、配列の中身を1つずつ取り出すことができますよ。」
生徒
「それって、難しいですか？初めてでも使えますか？」
先生
「とても簡単なので、プログラミングが初めての人でもすぐに理解できますよ。一緒に基本から見ていきましょう！」
1. for...of文とは？
JavaScript（ジャバスクリプト）におけるfor...of文とは、配列の中に入っている値を1つずつ取り出して処理するための文（＝決まった書き方）です。
「配列（はいれつ）」とは、データを順番に並べた箱のようなものです。たとえば、「りんご」「みかん」「バナナ」といった果物を並べたものが配列になります。
2. 配列とは何か？初心者向けに簡単に説明
配列とは、複数の値を1つにまとめたものです。たとえば、以下のように書きます。
const fruits = ["りんご", "みかん", "バナナ"];
この例では、fruitsという名前の配列に、3つの果物の名前が入っています。
3. for...of文の基本的な書き方
for...of文の基本的な使い方は、次のようになります。
for (let item of 配列名) {
// itemを使った処理
}
let itemの部分には、配列から1つずつ取り出した値が入ります。ofの右側に書くのが対象となる配列です。
4. 具体的な例：果物を1つずつ表示する
それでは、実際に配列の中身を1つずつ取り出して表示してみましょう。
const fruits = ["りんご", "みかん", "バナナ"];
for (let fruit of fruits) {
console.log(fruit);
}
りんご
みかん
バナナ
このように、配列fruitsの中の値が、1つずつ取り出されてfruitに入り、それをconsole.log()で表示しています。
5. 「for...of」と「for」や「for...in」との違い
JavaScriptにはいくつかループ（繰り返し）の書き方がありますが、for...ofは配列の中の「値」を1つずつ取り出すのに適しています。
簡単に違いをまとめると：
for文 → インデックス（番号）を使って1つずつ処理for...in文 → 配列の番号（キー）を1つずつ取り出すfor...of文 → 配列の「値」そのものを取り出す
初心者には、配列の「中身」を扱うだけならfor...ofがもっとも簡単です。
6. よくある間違いと注意点
以下のような間違いには注意しましょう。
- 配列ではなく、オブジェクトに対して
for...ofを使うとエラーになります for...ofの後ろには「of」があることを忘れない（「in」と間違えやすい）
配列に対してだけ使える書き方だと覚えておくと良いでしょう。
7. 配列に番号（インデックス）を一緒に使いたいとき
for...of文だけでは、何番目かの番号（インデックス）を直接使うことはできません。でも、entries()という機能を使えば、番号と値を両方取り出せます。
const fruits = ["りんご", "みかん", "バナナ"];
for (let [index, fruit] of fruits.entries()) {
console.log(index + "番目：" + fruit);
}
0番目：りんご
1番目：みかん
2番目：バナナ
このようにすると、何番目の果物かも一緒にわかるようになります。
8. どんな場面でfor...of文を使うと便利？
for...of文は、次のような場面でよく使われます：
- 複数の項目を順番に処理したいとき（買い物リストなど）
- 順番にメッセージを表示したいとき
- ボタンやチェックボックスの一覧を操作したいとき
とてもシンプルな書き方なので、初心者が最初に覚えるループとして最適です。
9. for...of文は配列だけに使える
for...of文は、基本的には「配列」に対して使うための構文です。配列以外の「オブジェクト」などには使えないので注意が必要です。
間違えてオブジェクトに使おうとすると、次のようなエラーが出てしまいます。
const person = { name: "太郎", age: 30 };
for (let value of person) {
console.log(value);
}
// → エラー：person is not iterable
このようなエラーが出たときは、「配列かどうか」を確認してみましょう。
