JavaScriptで使えるArray.isArray()の活用方法8選

●Array.isArray()とは？

JavaScriptの配列は、柔軟性が高く多様なデータを扱える反面、時として判定に悩むこともありますよね。

そんな時に頼りになるのが、Array.isArray()メソッドです。

このメソッドは、引数が配列かどうかを判定してくれる強力な味方なのです。

では早速、Array.isArray()メソッドの基本的な使い方から見ていきましょう。

○Array.isArray()の基本的な使い方

Array.isArray()メソッドは、引数に渡された値が配列であるかどうかを判定し、真偽値を返します。

使い方はとってもシンプルです。

○サンプルコード1：配列の判定

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

const obj = { a: 1, b: 2 };
console.log(Array.isArray(obj)); // false

上記のコードでは、変数arrに配列を、変数objにオブジェクトを代入しています。

Array.isArray()メソッドに、それぞれの変数を引数として渡すと、arrは配列なのでtrue、objは配列ではないのでfalseが返ってきます。

なんて簡単なんでしょう！

○サンプルコード2：他のデータ型との比較

Array.isArray()メソッドは、配列以外のデータ型に対してはすべてfalseを返します。

console.log(Array.isArray(123)); // false
console.log(Array.isArray("hello")); // false
console.log(Array.isArray(true)); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray(undefined)); // false

数値、文字列、真偽値、null、undefinedなど、配列以外のデータ型を引数に渡すと、すべてfalseが返ってきますね。

こんな感じで、Array.isArray()メソッドを使えば、配列とそれ以外のデータ型を明確に区別できるのです。

●Array.isArray() の実践的な活用方法

さて、Array.isArray()メソッドの基本的な使い方はわかりましたが、実際の開発現場ではどのように活用できるのでしょうか。

ここからは、Array.isArray()メソッドの実践的な活用方法を、具体的なサンプルコードを交えて解説していきます。

○サンプルコード3：関数の引数チェック

関数の引数が配列であることを確認するのに、Array.isArray()メソッドが役立ちます。

function processArray(arr) {
  if (!Array.isArray(arr)) {
    throw new Error("引数は配列である必要があります。");
  }
  // 配列の処理を行う
}

上記のコードでは、関数processArrayの引数arrが配列でない場合、エラーをスローしています。

このように、Array.isArray()メソッドを使って引数のチェックを行うことで、意図しない引数が渡された場合のバグを未然に防ぐことができます。

○サンプルコード4：再帰処理での配列判定

再帰処理を行う際に、配列かどうかを判定するのにArray.isArray()メソッドが便利です。

function flattenArray(arr) {
  if (!Array.isArray(arr)) {
    return [arr];
  }
  return arr.reduce((acc, val) => acc.concat(flattenArray(val)), []);
}

console.log(flattenArray([1, [2, [3, 4], 5]])); // [1, 2, 3, 4, 5]

上記のコードでは、多次元配列を1次元配列にフラット化する関数flattenArrayを定義しています。

再帰的に配列を処理する際に、Array.isArray()メソッドを使って配列かどうかを判定し、配列でない場合は要素を配列に包んで返しています。

これにより、多次元配列を適切に処理することができます。

○サンプルコード5：配列のフラット化

配列のフラット化処理を行う際に、Array.isArray()メソッドを使って配列かどうかを判定できます。

function flatten(arr) {
  return arr.reduce((acc, val) => (
    Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val)
  ), []);
}

console.log(flatten([1, [2, [3, 4], 5]])); // [1, 2, 3, 4, 5]

上記のコードでは、配列をフラット化する関数flattenを定義しています。

Array.isArray()メソッドを使って、各要素が配列かどうかを判定し、配列の場合は再帰的にflatten関数を呼び出しています。

これにより、多次元配列を1次元配列に変換することができます。

○サンプルコード6：配列のネスト判定

配列がネストされているかどうかを判定する際に、Array.isArray()メソッドが活用できます。

function isNested(arr) {
  return arr.some(val => Array.isArray(val));
}

console.log(isNested([1, [2, 3], 4])); // true
console.log(isNested([1, 2, 3, 4])); // false

上記のコードでは、配列がネストされているかどうかを判定する関数isNestedを定義しています。

Array.isArray()メソッドを使って、配列の各要素が配列かどうかを判定し、1つでも配列が含まれていればtrueを返します。

これにより、配列のネスト構造を簡単にチェックすることができます。

●Array.isArray() を使う上での注意点

Array.isArray()メソッドは、配列の判定に特化した便利なメソッドですが、使う上でいくつか注意点があります。

ここでは、Array.isArray()メソッドを使う際に気をつけたいポイントを詳しく見ていきましょう。

○typeofとの違い

JavaScriptでは、typeofオペレータを使ってデータ型を判定することができます。

しかし、typeofオペレータでは配列とオブジェクトを区別することができません。

const arr = [1, 2, 3];
console.log(typeof arr); // "object"

const obj = { a: 1, b: 2 };
console.log(typeof obj); // "object"

上記のコードでは、配列arrとオブジェクトobjに対してtypeofオペレータを使用していますが、どちらも”object”と出力されています。

このように、typeofオペレータでは配列とオブジェクトを区別できないのです。

一方、Array.isArray()メソッドは配列の判定に特化しているため、配列とオブジェクトを明確に区別することができます。

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

const obj = { a: 1, b: 2 };
console.log(Array.isArray(obj)); // false

上記のコードでは、Array.isArray()メソッドを使用することで、配列arrはtrue、オブジェクトobjはfalseと、正しく判定されています。

○nullやundefinedとの比較

JavaScriptでは、nullやundefinedは特殊な値として扱われます。

Array.isArray()メソッドを使う際は、これらの値に対する動作にも注意が必要です。

console.log(Array.isArray(null)); // false
console.log(Array.isArray(undefined)); // false

上記のコードでは、nullとundefinedに対してArray.isArray()メソッドを使用していますが、どちらもfalseと出力されています。

これは、nullやundefinedが配列ではないためです。

ただ、そうするとnullやundefinedが渡された場合のエラーハンドリングが必要になるのではないか？と思います。

例えば、関数の引数チェックで次のように書くことができます。

function processArray(arr) {
  if (arr === null || arr === undefined) {
    throw new Error("引数がnullまたはundefinedです。");
  }
  if (!Array.isArray(arr)) {
    throw new Error("引数は配列である必要があります。");
  }
  // 配列の処理を行う
}

上記のコードでは、引数arrがnullまたはundefinedの場合にエラーをスローし、配列でない場合にもエラーをスローしています。

このように、nullやundefinedのチェックを追加することで、より堅牢なコードを書くことができます。

○古いブラウザでの互換性

Array.isArray()メソッドは、ECMAScript 5th Edition（ES5）で導入されました。

そのため、古いブラウザでは Array.isArray()メソッドがサポートされていない可能性があります。

古いブラウザでの互換性を確保するには、Array.isArray()メソッドのポリフィルを使用する方法があります。

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

上記のコードでは、Array.isArray()メソッドが存在しない場合に、ObjectのtoString()メソッドを使って配列かどうかを判定するポリフィルを定義しています。

これにより、古いブラウザでもArray.isArray()メソッドと同等の機能を使用することができます。

●Array.isArray() の応用例

さて、ここまでArray.isArray()メソッドの基本的な使い方や注意点について見てきましたが、実際の開発現場ではどのような応用例があるのでしょうか。

ここからは、Array.isArray()メソッドをさらに活用した実践的な例を見ていきましょう。

○サンプルコード7：配列のソート

配列のソートは、開発においてよく使われる処理の1つです。

Array.isArray()メソッドを使って、ソート対象が配列であることを確認してからソートを行うことで、エラーを防ぐことができます。

function sortArray(arr) {
  if (!Array.isArray(arr)) {
    throw new Error("引数は配列である必要があります。");
  }
  return arr.sort();
}

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
console.log(sortArray(numbers)); // [1, 1, 2, 3, 3, 4, 5, 5, 6, 9]

const notAnArray = "not an array";
console.log(sortArray(notAnArray)); // Error: 引数は配列である必要があります。

上記のコードでは、sortArray関数の引数がArray.isArray()メソッドで配列であることを確認し、配列の場合はsort()メソッドでソートを行っています。

配列でない場合は、エラーをスローしています。

このように、Array.isArray()メソッドを使ってソート対象が配列であることを確認することで、予期せぬエラーを防ぎ、より堅牢なコードを書くことができます。

○サンプルコード8：配列のユニーク化

配列から重複した要素を取り除き、ユニークな要素だけを残すことを配列のユニーク化と言います。

Array.isArray()メソッドを使って、ユニーク化の対象が配列であることを確認してから処理を行うことができます。

function uniqueArray(arr) {
  if (!Array.isArray(arr)) {
    throw new Error("引数は配列である必要があります。");
  }
  return [...new Set(arr)];
}

const numbers = [1, 2, 3, 4, 4, 5, 5, 6];
console.log(uniqueArray(numbers)); // [1, 2, 3, 4, 5, 6]

const notAnArray = "not an array";
console.log(uniqueArray(notAnArray)); // Error: 引数は配列である必要があります。

上記のコードでは、uniqueArray関数の引数がArray.isArray()メソッドで配列であることを確認し、配列の場合はSet オブジェクトを使ってユニーク化を行っています。

配列でない場合は、エラーをスローしています。

Set オブジェクトは、重複する値を許可しないコレクションです。

配列をSet オブジェクトに変換することで、重複する要素が自動的に取り除かれます。

その後、スプレッド演算子（…）を使ってSet オブジェクトを配列に戻しています。

まとめ

JavaScriptのArray.isArray()メソッドについて、基本的な使い方から実践的な活用方法、注意点、応用例まで幅広く解説しました。

配列のソートやユニーク化への応用まで学んだArray.isArray()メソッドの知識を活かして、コードの可読性と保守性を高め、バグを防ぐことができるでしょう。

ぜひ実際の開発で活用し、JavaScriptのエキスパートを目指しましょう！