JavaScript/DOM/Array-Likeオブジェクト

Array-Likeオブジェクト

Array-Likeオブジェクト（配列風オブジェクト）とは、DOMにおいて配列のようにインデックスとlengthプロパティを持ち、[Symbol.iterator]を実装しているオブジェクトのことです。

主な特徴

Array-Likeオブジェクトには以下の特徴があります：

インデックスプロパティ: 配列と同様に数値インデックスを持つ要素にアクセスできる。
lengthプロパティ: 含まれる要素数を示すlengthプロパティを持つ。
[Symbol.iterator]の実装: 必ず[Symbol.iterator]を実装しており、for...ofループやforEachが利用可能。

主な例

DOMのNodeList

document.querySelectorAll()やdocument.getElementsByTagName()などで取得されるArray.prototypeやHTMLCollection|HTMLCollectionはArray-Likeオブジェクトです。

const elements = document.querySelectorAll('p'); // NodeListを取得

console.log(elements[0]); // インデックスでアクセス
console.log(elements.length); // 要素数を取得

// Arrayメソッドは使えない
// elements.map(el => el.textContent); // エラー

関数のargumentsオブジェクト

argumentsは関数に渡された引数を保持するArray-Likeオブジェクトです。

function example() {
  console.log(arguments[0]); // インデックスでアクセス
  console.log(arguments.length); // 引数の数を取得
}
example('A', 'B', 'C');

// Arrayメソッドは使えない
// arguments.map(arg => console.log(arg)); // エラー

Array-Likeオブジェクトの配列への変換

Array-Likeオブジェクトを通常の配列に変換することで、Arrayメソッドを使用可能になります。

Array.from()を使用

Array.from()を使用すると、Array-Likeオブジェクトを簡単に配列に変換できます。

const elements = document.querySelectorAll('p'); // NodeListを取得

// Array.from()で配列に変換
const elementArray = Array.from(elements);
elementArray.map(el => console.log(el.textContent));

スプレッド構文を使用

スプレッド構文[...Array-Like]も配列への変換に利用できます。

const elements = document.querySelectorAll('p');

// スプレッド構文で変換
const elementArray = [...elements];
elementArray.forEach(el => console.log(el.textContent));

注意点

Array-LikeオブジェクトはArrayではないため、直接配列のプロトタイプにアクセスできません。
一部の古い環境ではArray.from()がサポートされていない場合があります。その場合はArray.prototype.slice.call()を使用してください。

例：

const argsArray = Array.prototype.slice.call(arguments);

主なArray-Likeオブジェクトの例

オブジェクト	説明
`NodeList`	DOM操作で取得される要素のリスト。
`HTMLCollection\|HTMLCollection`	タグ名やクラス名で取得されるHTML要素のコレクション。
`arguments`	関数の引数を保持するオブジェクト。
`String`	文字列（文字ごとにインデックスでアクセス可能）。

外部リンク