JavaScript配列チェック方法解説

JavaScriptでオブジェクトが配列かどうかチェックする方法

JavaScriptにおいて、ある値が配列であるかどうかを判定する方法はいくつかあります。最も信頼性が高く、推奨される方法は Array.isArray() メソッドを使用することです。

Array.isArray() メソッド

このメソッドは、引数として渡された値が配列である場合に true、そうでない場合に false を返します。

const myArray = [1, 2, 3];
const notArray = { a: 1, b: 2 };

console.log(Array.isArray(myArray));  // 出力: true
console.log(Array.isArray(notArray)); // 出力: false

以下の方法は、一般的には推奨されませんが、理解のために説明します。

typeof 演算子

配列の場合、typeof 演算子は 'object' を返します。しかし、他のオブジェクト型も同じ結果を返すため、信頼性が低いです。

const myArray = [1, 2, 3];
console.log(typeof myArray); // 出力: 'object'

instanceof 演算子

instanceof 演算子は、オブジェクトが特定のコンストラクタから作成されたかどうかをチェックします。しかし、異なるブラウザや環境での挙動が異なる可能性があるため、推奨されません。

const myArray = [1, 2, 3];
console.log(myArray instanceof Array); // 出力: true (多くの場合)

Array.isArray() メソッドが配列のチェックに最も適しています。他の方法は、信頼性が低いか、または環境依存性があるため、使用を避けるべきです。

// 配列の例
const myArray = [1, 2, 3, 'apple'];

// オブジェクトの例
const myObject = { name: 'John', age: 30 };

// 配列かどうかチェック
console.log(Array.isArray(myArray));  // 出力: true
console.log(Array.isArray(myObject)); // 出力: false

• myObject
  プロパティ name と age を持つオブジェクトです。
• myArray
  数値と文字列を含む配列です。
• Array.isArray() メソッド
  引数に渡された値が配列かどうかを判定します。配列であれば true、そうでなければ false を返します。

typeof 演算子を使った例（推奨されません）

const myArray = [1, 2, 3];
console.log(typeof myArray); // 出力: 'object'

• typeof 演算子
  変数のデータ型を文字列で返します。配列の場合、'object' を返しますが、他のオブジェクト型も 'object' を返すため、配列であることを確実に判断できません。

const myArray = [1, 2, 3];
console.log(myArray instanceof Array); // 出力: true (多くの場合)

• typeof 演算子や instanceof 演算子は、配列以外のオブジェクトも object と判断してしまうため、誤った結果になる可能性があります。
• Array.isArray() メソッドが、配列かどうかを判断する最も信頼できる方法です。

• 配列のようなオブジェクト
  Array.prototype のメソッドを継承しているオブジェクトは、配列のように振る舞う可能性がありますが、厳密には配列ではありません。
• 空の配列
  空の配列も Array.isArray() で true と判断されます。
• 配列はオブジェクトの一種
  JavaScript では、配列はオブジェクトとして扱われます。

応用例

• ユーザー入力の検証
  

  const userInput = document.getElementById('userInput').value;
  if (Array.isArray(JSON.parse(userInput))) {
      // JSON文字列を配列に変換して処理
  } else {
      console.error('入力は配列ではありません');
  }
  

• 関数に配列を渡す前にチェック
  

  function processArray(array) {
      if (Array.isArray(array)) {
          // 配列の処理
      } else {
          console.error('引数は配列ではありません');
      }
  }
  

代替方法

constructor プロパティを用いた方法

const myArray = [1, 2, 3];
console.log(myArray.constructor === Array); // true

• 注意点
  
  • 自作の配列クラスなど、Array のサブクラスの場合には誤判定になる可能性があります。
  • 他の言語から JavaScript に移植されたオブジェクトでは、constructor プロパティが期待通りに動作しない場合があります。
• 考え方
  オブジェクトのコンストラクタが Array であれば、そのオブジェクトは配列であると判断します。

Object.prototype.toString() メソッドを用いた方法

const myArray = [1, 2, 3];
console.log(Object.prototype.toString.call(myArray) === '[object Array]'); // true

• 注意点
  
  • 非常に古いブラウザでは、このメソッドが正しく動作しない可能性があります。
  • カスタムオブジェクトで toString() メソッドをオーバーライドしている場合、誤った結果になることがあります。
• 考え方
  Object.prototype.toString() メソッドは、オブジェクトの内部的なクラス名を文字列で返します。配列の場合は [object Array] となります。

どちらの方法を選ぶべきか？

• 特殊なケース
  自作の配列クラスを使用している場合や、他の言語からの移植コードを扱っている場合は、constructor プロパティを用いた方法が有効な場合があります。
• 互換性を重視する場合
  古いブラウザとの互換性を考慮する必要がある場合は、Object.prototype.toString() メソッドが選択肢に入ります。ただし、Array.isArray() をポリフィルで補うことも可能です。
• Array.isArray() が最も推奨
  現代のJavaScriptでは、Array.isArray() が最もシンプルかつ信頼性の高い方法です。

JavaScriptでオブジェクトが配列かどうかを判定する方法は、Array.isArray() が最も一般的かつ安全な方法です。しかし、状況に応じて他の方法も検討できます。どの方法を選ぶかは、プロジェクトの要件や対象とする環境によって異なります。

重要な注意点

• instanceof 演算子は環境依存性がある
  ブラウザや環境によって異なる結果を返す可能性があります。
• typeof 演算子は使用しない
  typeof 演算子は配列に対して 'object' を返すため、配列であることを確実に判定できません。

• ポリフィル
  Array.isArray() がサポートされていない環境では、ポリフィルを使用して機能を追加することができます。

具体的な使用例

function isArray(value) {
  return Array.isArray(value); // 最も一般的な方法
}

function isArrayByConstructor(value) {
  return value.constructor === Array;
}

function isArrayByToString(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

これらの関数を用いて、任意の値が配列かどうかを判定することができます。

注意
上記の例はあくまで一例であり、実際の開発ではプロジェクトの要件に合わせて適切な方法を選択してください。

• JavaScriptの配列に関する他のメソッドやプロパティについても、MDN Web Docsで詳しく解説されています。
• より詳細な情報については、MDN Web Docsの Array.isArray() のドキュメントを参照してください。