主な内容の要点
for…in文の基本
- 書き方
for (変数 in オブジェクト) {
// 繰り返し処理
}
オブジェクトに含まれるプロパティ名（キー）を順番に取り出して処理できる。
オブジェクトに使う場合
const fruit = { orange:170, apple:90, lemon:110 };
for (let i in fruit){
console.log("fruit." + i + " = " + fruit[i]);
}
iにはorange,apple,lemonが順番に入るfruit[i]で値（170, 90, 110）を取り出せる- 注意:
fruit.iではなくfruit[i]と書く必要がある（iは文字列だから）
配列に使う場合
const fruit = ["orange", "apple", "lemon"];
for (let i in fruit){
console.log("fruit." + i + " = " + fruit[i]);
}
iには インデックス番号（0, 1, 2）が入る- その番号を使って配列の要素を取り出せる
ポイント
for...inは オブジェクトのプロパティ名や配列のインデックスを順番に取り出すループ。- 値を使うときは
オブジェクト[プロパティ名]の形でアクセスする。 - 配列の場合はインデックス番号が取り出される。
👉 初心者向けに言うと、「for…inは“名前一覧”を順番に取り出すループ」と覚えると分かりやすいです。
JavaScript for…in のやさしい解説
はじめてのループは少しとっつきにくいもの。for…in は「名前（キー）の一覧を順番に取り出す」ためのループです。オブジェクトのプロパティ名、配列のインデックス番号を1つずつ取り出して処理できます。
基本の使い方
for (let key in obj) {
// key にプロパティ名（または配列のインデックス）が入る
// obj[key] で値にアクセスする
}
- ポイント:
obj.keyではなく、必ずobj[key]を使います。key は文字列や数値が入る「変数」だからです。 - 対象: オブジェクトでも配列でも使えますが、目的が違います。
オブジェクトでの例題
例1: 値段表を表示する
const priceTable = {
orange: 170,
apple: 90,
lemon: 110
};
for (let name in priceTable) {
const price = priceTable[name];
console.log(`${name} は ${price}円`);
}
// 出力例:
// orange は 170円
// apple は 90円
// lemon は 110円
- 取り出すもの:
nameにはorange、apple、lemonといった「キー」が入ります。 - 値へのアクセス:
priceTable[name]で値段（数値）が取れます。
例2: プロパティを合計する
const points = { math: 70, english: 85, science: 60 };
let total = 0;
for (let subject in points) {
total += points[subject];
}
console.log(`合計点は ${total} 点`); // 215
- 目的: キーを使って、すべての値を足し合わせる処理が簡単にできます。
配列での例題（インデックスを使いたいとき）
例3: インデックスと値をセットで表示
const fruits = ["orange", "apple", "lemon"];
for (let i in fruits) {
console.log(`index: ${i}, value: ${fruits[i]}`);
}
// 出力例:
// index: 0, value: orange
// index: 1, value: apple
// index: 2, value: lemon
- 取り出すもの:
iは 0, 1, 2 のような「インデックス番号」。 - 値へのアクセス:
fruits[i]で要素を取得します。
例4: 空の要素や飛び番号にも対応
const data = [];
data[2] = "hello";
for (let i in data) {
console.log(`index: ${i}, value: ${data[i]}`);
}
// 出力例:
// index: 2, value: hello
- 注意: for…in は「存在するキーだけ」を巡回します。未定義の連番は飛ばされます。
よくあるつまずきポイント
- プロパティアクセス:
- 間違い:
obj.key - 正解:
obj[key] - 理由:
keyは変数。ドット記法は「固定の名前」のときだけ使えます。
- 間違い:
- 配列の値を直接取りたいとき:
- おすすめ: 配列の「値」を直接取りたいなら
for...ofを使うとシンプルです（下で解説）。
- おすすめ: 配列の「値」を直接取りたいなら
- ループ順序:
- 性質: for…in の列挙順は「基本的に追加順」に見えますが、厳密な保証は目的によって異なります。順序が重要なら配列と通常の for、または
forEachを使う方が安心です。
- 性質: for…in の列挙順は「基本的に追加順」に見えますが、厳密な保証は目的によって異なります。順序が重要なら配列と通常の for、または
for…in を使う場面、使わない場面
- 使う場面（おすすめ）:
- オブジェクトの全プロパティ名を一つずつ処理したい
- キーと値のペアをまとめて扱いたい（設定一覧、辞書、マップ的なデータ）
- 避けたい場面:
- 配列の「値」を順番に処理したいだけのとき（for…of の方が簡潔）
- 順序が厳密に重要なとき（通常の for や
forEachで制御）
for…in と for…of の違い（配列ならこっちが便利）
const fruits = ["orange", "apple", "lemon"];
// for...in はインデックス（0,1,2）
for (let i in fruits) {
console.log(i, fruits[i]); // 0 orange, 1 apple, 2 lemon
}
// for...of は値（orange, apple, lemon）
for (let value of fruits) {
console.log(value); // orange, apple, lemon
}
- 覚え方:
- for…in: index（インデックス）や key（キー）
- for…of: value（値）
練習問題（解答つき）
問題1: オブジェクトから「科目: 点数」をすべて表示しよう
const scores = { math: 80, english: 75, music: 92 };
// ここに for...in を書いて、
// "math: 80" のように表示してください
【解答例】
for (let subject in scores) {
console.log(`${subject}: ${scores[subject]}`);
}
- 狙い: キーと値のペアに慣れる。
問題2: 商品の在庫合計を計算しよう
const stock = { pen: 12, notebook: 5, eraser: 9 };
// 合計在庫数 total を求めて表示してください
【解答例】
let total = 0;
for (let item in stock) {
total += stock[item];
}
console.log(`合計在庫: ${total}`);
- 狙い: 数値プロパティを足し合わせる。
問題3: 配列のインデックスと値を見比べよう
const ids = [101, 102, 105];
// "index 0 -> 101" の形で表示してください
【解答例】
for (let i in ids) {
console.log(`index ${i} -> ${ids[i]}`);
}
- 狙い: for…in が配列では「インデックス」を返すことを体感。
小さなコツ
- 短い変数名で十分:
key、i、propなどシンプルでOK。 - 値取り出しは1行で:
const v = obj[key];としてから使うと読みやすい。 - 配列は基本 for…of: 値が欲しいなら迷わず for…of。インデックスが必要なときだけ for…in や通常の for。