読み込み中...

JavaScriptにおけるfor…in文のムダな書き方を回避する7つの方法

JavaScriptのfor...in文を配列に使う際の注意点と代替手段 JS
2024.05.08
この記事は約12分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●for…in文の注意点

JavaScriptのfor…in文は、オブジェクトのプロパティを列挙するのに便利な構文ですが、配列に対して使用する際には注意が必要です。

配列に対してfor…in文を使うと、予期しない動作をする可能性があるのです。

○配列に使うべきではない理由

配列に対してfor…in文を使うべきではない主な理由は、配列の要素だけでなく、配列オブジェクトに追加されたすべてのプロパティが列挙されてしまうからです。

これにより、意図しないプロパティが含まれる可能性があり、バグの原因になりかねません。

たとえば、Array.prototypeに新しいメソッドを追加した場合、そのメソッド名もfor…in文で列挙されてしまいます。

これは、配列の要素だけを処理したい場合には問題になります。

○プロパティの列挙順序が保証されない

for…in文では、プロパティの列挙順序が保証されません。

つまり、配列の要素が順番通りに処理されるとは限らないのです。

これは、配列の要素を順番に処理する必要がある場合に問題になります。

○サンプルコード1：for…in文で配列を操作した場合

次のサンプルコードは、for…in文を使って配列を操作した場合の例です。

const arr = [1, 2, 3];
Array.prototype.newMethod = function() {};

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

実行結果

0
1
2
newMethod

このように、配列の要素だけでなく、Array.prototypeに追加したnewMethodも列挙されてしまいます。

また、列挙順序が保証されないため、意図した順番で処理されない可能性があります。

このような問題を避けるために、配列の操作にはfor…in文を使うべきではありません。

では、代わりにどのような方法を使えばいいのでしょうか？

それでは、配列の操作に適した代替手段について詳しく見ていきましょう。

●より適切な代替手段

前の章で、for…in文を配列に使うと問題が起きる可能性があることを説明しましたが、ではどのような方法を使えばいいのでしょうか。

ここからは、配列の操作に適した代替手段を具体的に見ていきましょう。

○for…of文の使用

ES2015(ES6)で導入されたfor…of文は、配列の要素を順番に処理するのに最適な構文です。

for…of文を使えば、配列の要素だけを簡単に列挙できます。

for…of文の構文はシンプルで、次のようになります。

for (変数 of 配列) {
  // 処理
}

変数には、配列の各要素が順番に代入されます。

これで、配列の要素に対して順番に処理を行うことができます。

○サンプルコード2：for…of文での配列の操作

では、実際にfor…of文を使って配列を操作してみましょう。

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

実行結果

apple
banana
orange

このように、for…of文を使えば配列の要素だけを簡単に列挙できます。

また、列挙順序も保証されているため、意図した順番で処理が行われます。

○forEachメソッドの活用

配列の操作に使えるもう1つの方法が、forEachメソッドです。

forEachメソッドは、配列の各要素に対してコールバック関数を実行します。

forEachメソッドの構文は次のようになります。

配列.forEach(コールバック関数);

コールバック関数には、配列の各要素、インデックス、配列自体が引数として渡されます。

これにより、配列の要素を柔軟に処理できるのです。

○サンプルコード3：forEachメソッドによる配列の処理

forEachメソッドを使って配列を処理する例を見てみましょう。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
  console.log(`Index: ${index}, Value: ${number}`);
});

実行結果

Index: 0, Value: 1
Index: 1, Value: 2
Index: 2, Value: 3
Index: 3, Value: 4
Index: 4, Value: 5

forEachメソッドを使えば、インデックスも含めて配列の要素を柔軟に処理できます。

また、コールバック関数内で配列の要素を直接変更することもできるため、便利ですね。

○従来のfor文の利用

もちろん、従来のfor文を使って配列を操作することもできます。

for文は古くから使われている構文ですが、配列の要素を順番に処理するのに適しています。

for文の構文は次のようになります。

for (初期化式; 条件式; 増減式) {
  // 処理
}

初期化式でカウンター変数を初期化し、条件式でループを続行するかどうかを判定し、増減式でカウンター変数を更新します。

これにより、配列のインデックスを使って要素を順番に処理できるのです。

●オブジェクトに対するfor…in文の使用

さて、ここまでは配列に対するfor…in文の注意点と代替手段について説明してきましたが、実はfor…in文の本来の使い道はオブジェクトのプロパティを列挙することなのです。

オブジェクトは、キーと値のペアで構成されるデータ構造です。

for…in文を使えば、オブジェクトのすべてのプロパティを簡単に列挙できます。

for…in文を使ってオブジェクトのプロパティを列挙する構文は、次のようになります。

for (キー変数 in オブジェクト) {
  // 処理
}

キー変数には、オブジェクトの各プロパティのキーが順番に代入されます。

これにより、オブジェクトのすべてのプロパティに対して処理を行うことができるのです。

ただし、for…in文を使ってオブジェクトのプロパティを列挙する際には、次の点に注意が必要です。

  • プロトタイプチェーン上のすべてのプロパティが列挙される可能性がある
  • 列挙順序は保証されない

この点を理解した上で、for…in文をオブジェクトに対して使用すれば、便利なツールとして活用できます。

○サンプルコード5：オブジェクトのプロパティ列挙

では、実際にfor…in文を使ってオブジェクトのプロパティを列挙してみましょう。

const person = {
  name: 'Alice',
  age: 25,
  job: 'Engineer'
};

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

実行結果

name: Alice
age: 25
job: Engineer

このように、for…in文を使えばオブジェクトのすべてのプロパティを簡単に列挙できます。

キー変数にはプロパティのキーが代入され、オブジェクトの各プロパティの値にアクセスできるのです。

ただし、先ほども述べたように、プロトタイプチェーン上のすべてのプロパティが列挙される可能性があるため、必要なプロパティだけを処理するように注意が必要ですね。

●よくあるエラーと対処法

for…in文を使う際には、いくつかの注意点があることを説明してきましたが、実際のコーディングの現場ではどのようなエラーが発生するのでしょうか。

ここからは、よく遭遇するエラーとその対処法について詳しく見ていきましょう。

○「’for…in’ 文は配列には適していません。」警告への対処

VSCodeなどの統合開発環境（IDE）を使用していると、for…in文を配列に対して使用した際に「’for…in’ 文は配列には適していません。」という警告が表示されることがあります。

この警告は、for…in文が配列の操作に適していないことを示しているのです。

この警告に対処するには、まず配列の操作にfor…in文を使うべきではないことを理解することが重要です。

代わりに、for…of文やforEachメソッド、従来のfor文を使用するようにしましょう。

これにより、コードの可読性と保守性が向上し、予期しない動作を防ぐことができます。

○プロトタイプ汚染の回避

for…in文を使ってオブジェクトのプロパティを列挙する際には、プロトタイプチェーン上のすべてのプロパティが列挙される可能性があることを説明しました。

これは、プロトタイプ汚染と呼ばれる問題につながる可能性があります。

プロトタイプ汚染とは、オブジェクトのプロトタイプに予期しないプロパティが追加されることで、オブジェクトの動作が変更されてしまう問題です。

これを回避するには、for…in文でプロパティを列挙する際に、hasOwnProperty()メソッドを使用して、オブジェクト自身のプロパティだけを処理するようにしましょう。

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    // オブジェクト自身のプロパティに対する処理
  }
}

このように、hasOwnProperty()メソッドを使用することで、プロトタイプチェーン上の予期しないプロパティを除外し、プロトタイプ汚染を回避できるのです。

○パフォーマンス面での考慮

for…in文は、他のループ構文と比較して、パフォーマンスが劣る場合があります。

これは、for…in文がプロトタイプチェーン上のすべてのプロパティを列挙するためです。

パフォーマンスが重要な場面では、for…in文の使用を避け、for…of文やforEachメソッド、従来のfor文を使用することを検討しましょう。

特に、大規模なデータを扱う場合には、パフォーマンスの差が顕著になることがあります。

ただし、パフォーマンスを優先するあまり、コードの可読性や保守性を犠牲にするべきではありません。

状況に応じて適切な構文を選択し、バランスを取ることが大切ですね。

●for…in文の応用例

さて、ここまではfor…in文の注意点や代替手段、よくあるエラーと対処法について説明してきましたが、for…in文にはどのような応用例があるのでしょうか。

ここからは、for…in文を活用した具体的なコード例を見ていきましょう。

for…in文は、オブジェクトのプロパティを列挙するのに便利な構文ですが、それ以外にも様々な場面で活用できます。

例えば、オブジェクトのプロパティの存在チェックや、プロパティの動的アクセスなどです。

○サンプルコード6：オブジェクトのプロパティ存在チェック

for…in文を使って、オブジェクトに特定のプロパティが存在するかどうかを確認することができます。

次のサンプルコードを見てみましょう。

const person = {
  name: '山田太郎',
  age: 30
};

const hasName = 'name' in person;
console.log(hasName); // 結果: true

const hasGender = 'gender' in person;
console.log(hasGender); // 結果: false

このコードでは、personオブジェクトに’name’プロパティと’age’プロパティが存在します。

‘name’ in personの部分で、personオブジェクトに’name’プロパティが存在するかどうかを確認しています。

その結果、hasNameにはtrueが代入されます。

一方、’gender’ in personの部分では、personオブジェクトに’gender’プロパティが存在するかどうかを確認しています。

personオブジェクトには’gender’プロパティが存在しないため、hasGenderにはfalseが代入されます。

このように、for…in文を使ってオブジェクトのプロパティの存在チェックを行うことができるのです。

これは、オブジェクトの特定のプロパティを条件に応じて処理を分岐させる際などに役立ちます。

○サンプルコード7：プロパティの動的アクセス

for…in文を使って、オブジェクトのプロパティに動的にアクセスすることもできます。

下記のサンプルコードを見てみましょう。

const person = {
  name: '山田太郎',
  age: 30,
  gender: '男性'
};

const propertyName = 'age';
console.log(person[propertyName]); // 結果: 30

このコードでは、personオブジェクトにname、age、genderの3つのプロパティが存在します。

propertyNameという変数に’age’という文字列を代入し、person[propertyName]の部分で、personオブジェクトのpropertyNameで指定されたプロパティにアクセスしています。

その結果、person[propertyName]はperson[‘age’]と同じ意味になり、personオブジェクトのageプロパティの値である30が出力されます。

まとめ

JavaScriptのfor…in文は、オブジェクトのプロパティを列挙するのに便利な構文ですが、配列に対して使用する際には注意が必要です。

配列に対してfor…in文を使うと、予期しない動作をする可能性があり、バグの原因になりかねません。

そのため、配列の操作にはfor…of文やforEachメソッド、従来のfor文を使うことをおすすめします。

これらの代替手段を使えば、配列の要素を順番に処理でき、コードの可読性と保守性も向上します。

一方、オブジェクトのプロパティを列挙する際には、for…in文が活躍します。

ただし、プロトタイプチェーン上のすべてのプロパティが列挙される可能性があるため、hasOwnProperty()メソッドを使って、オブジェクト自身のプロパティだけを処理するようにしましょう。

for…in文を適材適所で使いこなすことで、JavaScriptのコーディングの幅が広がります。

今回紹介した注意点や代替手段、応用例を参考に、for…in文を賢く活用していきましょう。

コードの品質を高め、バグの少ないプログラムを書けるようになることを目指してみましょう。