配列のループ（for…of）の基本
for (const v of arr) {}
配列をループするとき、昔ながらの for 文よりも シンプルで読みやすい書き方が for...of です。
天才プログラマー視点で言うと、「インデックスがいらないときはまず for…of を使え」というくらい、実用度が高い構文です。
for…of は「配列の中身を順番に取り出す」文法
const arr = ["Aki", "Mika", "Ken"];
for (const v of arr) {
console.log(v);
}
このコードは、配列 arr から 要素を1つずつ取り出して v に入れ、順番に処理するという意味です。
ここが重要です：
vには インデックスではなく「値そのもの」 が入る- 0, 1, 2… といった番号を意識しなくてよい
- 「配列の中身を順番に全部触りたい」だけなら、ほぼこれ一択でよい
例題：名前リストを表示する
const names = ["Aki", "Mika", "Ken"];
for (const name of names) {
console.log("こんにちは、" + name + "さん");
}
実行イメージ：
- 1回目のループ：
nameは"Aki" - 2回目のループ：
nameは"Mika" - 3回目のループ：
nameは"Ken"
インデックスを一切意識せず、「今の要素」だけに集中できるのが for…of の強みです。
なぜ const v と書くのかを深掘りする
for (const v of arr) {
// v を使った処理
}
ここで const を使う理由はこうです：
- ループの1回ごとに 新しい v が用意される
- その1回の中で v を再代入する必要はほぼない
- 間違って書き換えないように
constにしておくのが安全
もし書き換えたいなら let も使えますが、基本は const 一択でよいです。
for 文との違いを感覚でつかむ
ふつうの for 文
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
iはインデックス（0, 1, 2, …）arr[i]で値を取り出す
for…of 文
for (const v of arr) {
console.log(v);
}
vは 最初から「値そのもの」- インデックスを扱うコードが消えて、読みやすくなる
天才プログラマー目線で言うと、
「インデックスが必要なら for、いらないなら for…of」
と覚えると判断が速くなります。
例題：合計値を計算する（for…of 版）
const numbers = [10, 20, 30, 40];
let sum = 0;
for (const n of numbers) {
sum += n;
}
console.log("合計:", sum);
ここでのポイントは：
nには毎回「配列の要素」がそのまま入るnumbers[0]やnumbers[i]と書かなくてよい- 「配列の中身を全部足す」という意図がコードから一目で伝わる
例題：条件に合う要素だけ処理する
const scores = [90, 55, 78, 30, 100];
for (const score of scores) {
if (score < 60) {
console.log("追試対象:", score);
}
}
このコードは：
- 配列の全スコアを順番に見て
- 60点未満だけをピックアップして表示
という処理を、非常に素直な形で書けています。
文字列にも使える：1文字ずつ処理
const text = "Hello";
for (const ch of text) {
console.log(ch);
}
実行結果は H, e, l, l, o と1文字ずつ。
for…of は「配列だけでなく、反復可能なもの（iterable）全般」に使える、というのもプロ視点では重要なポイントです。
よくある勘違いと注意点を深掘り
インデックスが欲しいときはどうする？
for…of は「値」をくれるだけなので、インデックスは自動では手に入りません。
どうしてもインデックスが必要なら、こういう書き方もあります。
const arr = ["A", "B", "C"];
let index = 0;
for (const v of arr) {
console.log(index, v);
index++;
}
ただし、ここまでしてインデックスが必要なら、最初からふつうの for 文を使う方が素直です。
まとめ：for…of は「読みやすさ最強の配列ループ」
- 配列の中身を順番に処理したいだけなら、まず
for...ofを選ぶ - インデックスを意識しなくてよいので、バグが減る
const v of arrで「値そのもの」を扱える- 合計・フィルタ・表示など、「配列をなめる系の処理」と相性抜群
配列ループを書くとき、
「これ、インデックスいらないよな？」と思ったら for…of を使う。
この感覚が身につくと、あなたのコードは一気に「プロっぽく」なります。