JavaScriptのfor…in文完全ガイド｜基本から応用、注意点まで徹底解説

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. はじめに｜for…in文で解決できる問題とは？

この記事の目的

• JavaScriptのfor…in文の基本構文と使用方法
• 配列に対する使用時の注意点
• 他のループ構文（for…ofやforEach）との違い
• よくあるエラーとその解決策

この記事を読むとわかること

• オブジェクトや配列のプロパティや要素を効率よく処理する方法
• for…in文の注意点と安全な使い方
• 実践で役立つコード例とパフォーマンスの比較

2. JavaScriptのfor…in文とは？【基本解説】

基本構文

for (変数 in オブジェクト) {
  // 繰り返し処理
}

• 変数：現在のプロパティ名（キー）が格納されます。
• オブジェクト：ループ処理を行いたい対象のオブジェクトです。

使用例：オブジェクトのプロパティを列挙する

const person = {
  name: "太郎",
  age: 25,
  city: "東京"
};

for (const key in person) {
  console.log(\`\${key}: \${person[key]}\`);
}

name: 太郎
age: 25
city: 東京

注意点：列挙されるプロパティの順番

特徴まとめ

1. オブジェクトのキーを簡単に取得可能: オブジェクトのプロパティ名を動的に取得する際に役立ちます。
2. 列挙可能なプロパティのみ対象: 非列挙プロパティ（enumerable: false）はループ対象になりません。
3. プロトタイプ継承されたプロパティも列挙される: これが問題となるケースは次のセクションで詳しく説明します。

3. 配列とfor…in文｜注意すべきポイント

配列に対する基本動作

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

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 りんご  
1 バナナ  
2 みかん  

注意点1: プロトタイププロパティも列挙される可能性

Array.prototype.newMethod = function () {
  return "新しいメソッド";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 りんご  
1 バナナ  
2 みかん  
newMethod undefined

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

注意点2: 順序の保証がない

const data = [];
data[10] = "リンゴ";
data[1] = "バナナ";
data[5] = "みかん";

for (const index in data) {
  console.log(index, data[index]);
}

1 バナナ  
5 みかん  
10 リンゴ

注意点3: 数値インデックスではなく文字列として扱われる

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

まとめ

• for…in文は配列よりもオブジェクトの処理に適している。
• 順序や数値インデックスを扱いたい場合は、for…of文や通常のforループを推奨。

4. for…in文とfor…of文の違い【比較表付き】

基本構文の比較

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // キーを取得
}

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // 値を取得
}

比較表

実践例｜配列処理での違い

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // 出力: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // 出力: 'a', 'b', 'c'
}

まとめ

• for…in文: オブジェクトのキー処理に適している。
• for…of文: 配列やイテラブルオブジェクトに最適。

5. 実践編：for…in文の応用例とベストプラクティス

1. 応用例1｜オブジェクトのプロパティフィルタリング

const user = {
  name: "田中",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

{ name: '田中', age: 30, email: 'tanaka@example.com' }

2. 応用例2｜ネストされたオブジェクトの処理

const data = {
  user: {
    name: "佐藤",
    info: {
      age: 28,
      city: "大阪"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(\`\${key}: \${obj[key]}\`);
    }
  }
}

printNested(data);

name: 佐藤
age: 28
city: 大阪

3. ベストプラクティス｜プロトタイププロパティの除外

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(\`\${key}: \${obj[key]}\`);
  }
}

a: 1
b: 2

まとめ

• オブジェクトのフィルタリングやネスト処理に適した使い方を紹介しました。
• プロトタイプ継承の影響を防ぐためにhasOwnProperty()を活用しましょう。

6. for…in文のよくあるエラーと解決策【初心者必見】

1. エラー例1｜プロトタイププロパティが列挙される

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

a 1
b 2
c 3

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. エラー例2｜配列に対するfor…in文の使用

const arr = [10, 20, 30];
Array.prototype.extra = "追加データ";

for (const index in arr) {
  console.log(index, arr[index]);
}

0 10
1 20
2 30
extra undefined

for (const value of arr) {
  console.log(value);
}

3. エラー例3｜未定義値の処理

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

for (const key in obj) {
  const value = obj[key] ?? "デフォルト値";
  console.log(key, value);
}

まとめ

• プロトタイププロパティ対策: hasOwnProperty()を使用。
• 配列処理: for…ofやforEachを推奨。
• 未定義値対策: デフォルト値を設定する。

7. for…in文のパフォーマンス検証と代替手段

1. パフォーマンス比較

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. 比較結果例

for...in: 0.015ms
Object.keys: 0.005ms

3. 推奨手段

• オブジェクト処理: Object.keys()を推奨。
• 配列処理: for…of文やforEachが高速で安全。

まとめ

• for…in文は便利だが、パフォーマンスや安全性を考慮して適切な構文を選択しましょう。

8. まとめ｜for…in文の理解と次のステップ

1. 記事の要点まとめ

1. for…in文の基本構文と用途:

• オブジェクトのプロパティ名を反復処理するために使用される。
• 配列ではなくオブジェクトのキー処理に特化している。

1. 配列への使用時の注意点:

• 順序が保証されず、プロトタイプチェーンも列挙されるリスクがある。
• 配列処理にはfor…of文やforEach()を推奨。

1. for…in文とfor…of文の違い:

• for…in文: プロパティ名（キー）を列挙する。
• for…of文: 配列やイテラブルオブジェクトの値を直接処理できる。

1. 応用例とベストプラクティス:

• 再帰処理を利用したネストオブジェクトの処理。
• hasOwnProperty()を用いたプロトタイプ継承の除外。
• Object.keys()やObject.entries()を使った代替手段でパフォーマンスと安全性を向上。

1. パフォーマンス最適化:

• Object.keys() + forEach()は、順序保証とパフォーマンスの点で優れているため、for…in文の代替として推奨される。

2. よくある疑問への回答

• A: オブジェクトのプロパティ列挙には適していますが、配列やパフォーマンス重視の処理では他の手法（for…of文やObject.keys()）の方が安全かつ効率的です。

• A: はい、標準の仕様としてプロトタイプ継承されたプロパティも対象になります。これを回避するには、hasOwnProperty()を使う必要があります。

• A:
• オブジェクト: for…in文またはObject.keys()を使用。
• 配列: for…of文やforEach()を推奨。

3. 次のステップ｜さらに学ぶべきトピック

1. イテラブルと反復可能オブジェクト:

• Map, Set, WeakMap, WeakSetなどのデータ構造と、それらを処理するループ構文。

1. 高階関数によるデータ操作:

• map(), filter(), reduce()の使い方と応用例。

1. オブジェクトと配列の応用テクニック:

• Object.values(), Object.entries()を活用したデータ処理。

1. 最新のJavaScript機能:

• ES6以降の新機能（スプレッド演算子, デストラクチャリングなど）を使った簡潔な記述方法。

1. 非同期処理とPromise/Async/Await:

• データ取得や動的なオブジェクト操作を含むリアルタイム処理への応用。

4. 結論｜JavaScriptのループ処理を自在に使いこなそう

• for…in文はオブジェクトのプロパティ列挙に適しているが、配列処理やパフォーマンス重視の場合には他の方法を選ぶべき。
• エラーや予期しない挙動を防ぐために、ベストプラクティスや安全対策を常に意識してコーディングを行うことが重要です。