JavaScript TypeError: X is not iterable の原因と解決方法【反復処理の落とし穴と実践的な対処法】

TypeError: X is not iterable とは

JavaScriptで `TypeError: X is not iterable` というエラーに遭遇しましたか？このエラーは、`for…of` ループやスプレッド構文など、反復可能な（iterable）オブジェクトを期待する場所で、そうではない値（`null`, `undefined`, オブジェクトなど）を渡したときに発生します。特に、APIからのレスポンスや外部データの処理でよく見かけるエラーです。

エラーの発生パターン

このエラーは主に以下のようなケースで発生します。

パターン1: `null` または `undefined` を反復しようとした場合

// APIからのレスポンスがまだ来ていない、またはエラーでundefined/nullの場合を想定
let data = undefined; // または null

try {
  // dataが配列であることを期待しているが、実際はundefined
  for (const item of data) { // ここで TypeError: undefined is not iterable
    console.log(item);
  }
} catch (error) {
  console.error(error.message);
}

for...of ループは、イテラブルなオブジェクト（配列、文字列、Map、Setなど）に対してのみ使用できます。undefined や null はイテラブルではないため、このエラーが発生します。APIレスポンスの遅延や失敗で変数が未初期化のままになっているケースが多いです。

// dataがundefined/nullの場合に備えてデフォルト値（空の配列）を設定
let data = undefined; // または null

try {
  // dataがundefined/nullの場合は空の配列を使用する
  for (const item of data || []) {
    console.log(item);
  }

  // または明示的にチェックする
  if (data && typeof data[Symbol.iterator] === 'function') {
    for (const item of data) {
      console.log(item);
    }
  } else {
    console.warn('Data is not iterable or is null/undefined.');
  }
} catch (error) {
  console.error(error.message);
}

パターン2: プレーンなオブジェクトを反復しようとした場合

const user = {
  id: 1,
  name: 'Taro',
  email: 'taro@example.com'
};

// オブジェクトを直接 for...of で反復しようとするとエラー
for (const prop of user) { // TypeError: user is not iterable
  console.log(prop);
}

JavaScriptのプレーンなオブジェクト（{} で作成されるオブジェクト）は、デフォルトではイテラブルではありません。したがって、for...of ループやスプレッド構文で直接反復しようとするとこのエラーが発生します。オブジェクトのプロパティを反復したい場合は、Object.keys(), Object.values(), Object.entries() などのメソッドを使用する必要があります。

const user = {
  id: 1,
  name: 'Taro',
  email: 'taro@example.com'
};

// オブジェクトのキーを反復
for (const key of Object.keys(user)) {
  console.log(`Key: ${key}, Value: ${user[key]}`);
}

// オブジェクトの値を反復
for (const value of Object.values(user)) {
  console.log(`Value: ${value}`);
}

// オブジェクトのキーと値のペアを反復
for (const [key, value] of Object.entries(user)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

パターン3: 数値や真偽値などのプリミティブ型を反復しようとした場合

const count = 5;

// 数値を直接 for...of で反復しようとするとエラー
for (const i of count) { // TypeError: count is not iterable
  console.log(i);
}

const isActive = true;

// 真偽値を直接 for...of で反復しようとするとエラー
for (const value of isActive) { // TypeError: isActive is not iterable
  console.log(value);
}

数値、真偽値、シンボルなどはイテラブルではありません。これらのプリミティブ型を for...of で直接反復しようとするとエラーになります。これらの値を使って反復処理を行いたい場合は、まず配列などのイテラブルな型に変換する必要があります。

const count = 5;

// 数値から配列を作成して反復
for (const i of Array.from({ length: count }, (_, idx) => idx + 1)) {
  console.log(i); // 1, 2, 3, 4, 5
}

const isActive = true;

// 真偽値を使って条件分岐
if (isActive) {
  console.log('Active state is true.');
} else {
  console.log('Active state is false.');
}

// または、真偽値を要素とする配列を作成して反復（稀なケース）
for (const value of [isActive]) {
  console.log(`Value: ${value}`);
}

根本原因の特定方法

エラーが発生した行にブレークポイントを設定し、デバッガで対象の変数の値と型を確認しましょう。`console.log()` で変数を直接出力するのも有効です。特に `typeof` 演算子や `Array.isArray()` メソッドを使って、期待する型と実際の型が一致しているかを確認してください。

```javascript
let problematicData = undefined; // あるいは null, { key: 'value' }, 5 など

console.log('--- Debugging problematicData ---');
console.log('Value:', problematicData);
console.log('Typeof:', typeof problematicData);
console.log('Is Array:', Array.isArray(problematicData));
console.log('Has Symbol.iterator:', typeof problematicData?.[Symbol.iterator] === 'function');
console.log('------------------------------');

// エラーが発生するコード（コメントアウトしてデバッグ情報を確認）
// for (const item of problematicData) {
//   console.log(item);
// }
```

防止策とベストプラクティス

このエラーを防ぐには、{marker}イテレーションを行う前に変数の型や値が存在するかを常にチェックする{/marker}習慣をつけましょう。特にAPIレスポンスや外部入力など、予測不能なデータソースからの値には、デフォルト値を設定するか、条件分岐で処理をガードするコードを記述することが重要です。

```javascript
function processItems(items) {
  // 1. デフォルト値の利用 (より推奨されるパターン)
  const safeItems = items || []; // items が null/undefined の場合は空配列に
  for (const item of safeItems) {
    console.log(`Processing item: ${item}`);
  }

  // 2. 明示的な型チェックと条件分岐
  if (Array.isArray(items)) {
    for (const item of items) {
      console.log(`Processing item: ${item}`);
    }
  } else {
    console.warn('Warning: Expected an array, but received:', items);
    // エラーハンドリングやログ記録
  }
}

processItems(['a', 'b']);
processItems(null);
processItems(undefined);
processItems({ id: 1 }); // Warning: Expected an array, but received: { id: 1 }
```

よくある質問（FAQ）

この用語と一緒に知っておきたい用語