JavaScript for…inの基礎と使い分け：オブジェクト反復の落とし穴を避ける方法

2026年5月6日2026年5月8日

制御構文

JavaScriptにおいて、データの集合を扱う際に避けては通れないのが「ループ処理」です。

その中でも for...in 文は、言語の初期から存在する非常に息の長い構文ですが、エンジニアの間では「挙動が直感的ではない」「バグの温床になりやすい」と敬遠されることも少なくありません。

しかし、その特性を正しく理解し、適切な場面で使い分けることができれば、オブジェクトの動的な操作において非常に強力な武器となります。

本記事では、for…in 文の基本的な仕組みから、陥りやすい落とし穴、そして2026年現在の開発現場で推奨される代替手法までを詳しく解き明かしていきます。

目次 [ close ]

for…in 文の基礎知識

JavaScriptの for...in 文は、主にオブジェクトのプロパティを列挙するために設計されたループ構文です。

まずは、その基本的な構文と動作を確認しましょう。

基本的な構文

for...in の構文は非常にシンプルです。

オブジェクトの各プロパティ名 (キー) を順に変数に代入しながら処理を繰り返します。

JavaScript

const user = {
  name: "田中太郎",
  age: 30,
  role: "admin"
};

for (const key in user) {
  // key にはプロパティ名が代入される
  console.log("キー:", key);
  console.log("値:", user[key]);
}

実行結果

キー: name
値: 田中太郎
キー: age
値: 30
キー: role
値: admin

反復の対象となるもの

for...in が列挙するのは、オブジェクト自身が持つプロパティだけでなく、「列挙可能 (enumerable) なプロパティ」すべてが対象となります。

これには、後述する継承されたプロパティも含まれるため注意が必要です。

for…in と for…of の決定的な違い

初心者から中級者にかけて最も混同しやすいのが、for...in と for...of の使い分けです。

この2つは似て非なるものであり、誤った使い方をすると予期せぬエラーを引き起こします。

扱う対象の違い

最も大きな違いは、何を「回す」のかという点にあります。

構文	主な対象	取得できるもの
`for...in`	オブジェクト	列挙可能なプロパティ名 (キー)
`for...of`	反復可能オブジェクト (Array, Map, Setなど)	要素の値 (バリュー)

コードによる比較

配列に対して両方の構文を使用した場合の挙動を比較してみましょう。

JavaScript

const colors = ["red", "green", "blue"];

console.log("--- for...in の場合 ---");
for (const index in colors) {
  console.log(index, typeof index); // インデックスが文字列として出力される
}

console.log("--- for...of の場合 ---");
for (const color of colors) {
  console.log(color); // 値が直接出力される
}

実行結果

--- for...in の場合 ---
0 string
1 string
2 string
--- for...of の場合 ---
red
green
blue

この結果からわかる通り、for...in を配列に使うと、インデックス番号が 数値ではなく文字列として 取得されます。

これが、配列の反復に for...in を使用すべきではない理由の一つです。

計算にインデックスを使おうとして "0" + 1 が "01" になるといったバグが多発します。

for…in に潜む「落とし穴」と回避策

for...in が「危険」と言われる最大の理由は、その継承の仕組みにあります。

プロトタイプチェーンの継承

JavaScriptはプロトタイプベースの言語であり、オブジェクトは他のオブジェクトを継承できます。

for...in は、オブジェクト自身のプロパティだけでなく、プロトタイプチェーンを遡って親オブジェクトの列挙可能なプロパティも拾い上げてしまいます。

JavaScript

// 親オブジェクトの定義
const parent = {
  inheritedProp: "これは継承されたプロパティです"
};

// parent をプロトタイプに持つ child オブジェクトを作成
const child = Object.create(parent);
child.ownProp = "これは自身のプロパティです";

for (const key in child) {
  console.log(key); 
}

実行結果

ownProp
inheritedProp

意図せず親クラスのメソッドや拡張されたプロパティがループ内に現れることは、多くのバグの原因となります。

特に、外部ライブラリなどが Object.prototype を拡張している場合、すべての for...in ループにその拡張が紛れ込むことになります。

落とし穴の回避策1：Object.hasOwn()

この問題を回避する最も現代的で確実な方法は、Object.hasOwn() メソッドを使用することです (従来の hasOwnProperty() に代わる、より安全なメソッドです)。

JavaScript

for (const key in child) {
  if (Object.hasOwn(child, key)) {
    console.log("自身のプロパティのみ:", key);
  }
}

これにより、継承されたプロパティをフィルタリングして除外することができます。

落とし穴の回避策2：順序の不確実性

for...in におけるプロパティの列挙順序は、仕様上「実装依存」とされる部分があり、特に古いブラウザや特定の状況下では 記述した順序で取得できる保証がありません。

2026年現在の主要なブラウザエンジン (V8など) では、整数値のようなキーが先に数値順で並び、その後に文字列キーが追加順で並ぶという規則性が一般的ですが、これに依存したロジックを組むのはリスクが伴います。

順序が重要なデータを扱う場合は、Map オブジェクトを使用するか、配列に格納して管理するのが鉄則です。

オブジェクトを反復処理する「2026年の推奨手法」

現代のJavaScript開発において、for...in を直接記述する機会は減っています。

より安全で、関数型プログラミングのスタイルにも親和性が高い代替メソッドを紹介します。

Object.keys() / Object.values() / Object.entries()

これらのメソッドは、オブジェクト自身の列挙可能なプロパティのみを配列として返します。

プロトタイプチェーンを気にする必要がないため、非常に安全です。

1. Object.keys()：キーの配列を取得

キーだけが必要な場合に最適です。

JavaScript

const settings = { theme: "dark", notifications: true };
Object.keys(settings).forEach(key => {
  console.log(key);
});

2. Object.values()：値の配列を取得

値だけを処理したい場合に便利です。

JavaScript

const prices = { apple: 100, banana: 150 };
const total = Object.values(prices).reduce((sum, val) => sum + val, 0);
console.log("合計:", total); // 250

3. Object.entries()：キーと値のペアを取得

最も汎用性が高く、現代の開発で多用されるのがこのメソッドです。

[key, value] の形式で取得できるため、分割代入と組み合わせて非常に綺麗に記述できます。

JavaScript

const inventory = { apples: 5, oranges: 10 };

for (const [item, count] of Object.entries(inventory)) {
  console.log(`${item}の在庫は${count}個です。`);
}

この Object.entries() と for...of の組み合わせこそが、2026年現在におけるオブジェクト反復のデファクトスタンダードと言えるでしょう。

for…in を使うべき数少ない場面

ここまで代替手法を推奨してきましたが、for...in が全く不要というわけではありません。

以下のような特定のケースでは有用です。

1. プロトタイプチェーンを含めた全探索

デバッグツールや、オブジェクトの構造を深く解析するライブラリを作成する場合など、継承されているものも含めてすべてのプロパティを調査する必要がある際には、for...in が適しています。

2. シンプルなプレーンオブジェクトの素早い処理

パフォーマンスの観点では、新しい配列を生成する Object.keys() よりも、直接オブジェクトを走査する for...in の方が、メモリ効率の面で僅かに有利な場合があります。

ただし、数千回、数万回のループでなければ、現代のJavaScriptエンジンの最適化によりその差は無視できるレベルです。

実践的な使い分けフローチャート

どのような場合にどの構文を使うべきか、判断基準を整理しましょう。

対象が配列（Array）であるか？
- YES → for...of または .forEach() などの配列メソッドを使用。
対象がオブジェクト（Object）であるか？
- 自身のプロパティだけが必要か？
  - YES → Object.entries() と for...of の組み合わせが推奨。
  - NO (継承プロパティも必要) → for...in を使用。
パフォーマンスが極限まで求められる特殊な環境か？
- YES → 配列生成を避けるため for...in と Object.hasOwn() の組み合わせを検討。