Array.prototype.slice.call の解説

このコードは何をするのか？

• このコードは、そのようなオブジェクトの一部を切り出し、新しい配列として返します。
• Array.prototype.slice.call は、配列っぽく振る舞うオブジェクト (本来は配列ではない) を、本物の配列に変換するために使われます。
  • 例えば、DOM (ウェブページの要素) のコレクションは配列のように扱えますが、実際は配列ではありません。

各部分の役割

• .call : このメソッドは、本来別のオブジェクトに属するメソッドを、別のオブジェクトに対して呼び出すようにします。
  • つまり、.call を使って slice メソッドを、配列ではないオブジェクトに対して実行可能にします。
• Array.prototype.slice : この部分は、本来の配列に対して部分抽出を行うメソッドです。
  • 開始位置と終了位置を指定して、その間の要素を新しい配列として返します (終了位置は含まれません)。
  • 元の配列は変更されません。

Array.prototype.slice.call は、本来配列ではないオブジェクトをあたかも配列のように扱い、その一部を切り出すためのテクニックです。

ポイント

• このテクニックは、古いブラウザや、配列以外のオブジェクトを扱う場合に役立ちます。
  • 最近の Javascript では、より新しいメソッド (例えば Array.from など) が使える場合があるので、そちらが推奨されることもあります。
• slice は、元のオブジェクトを変更しません。新しい配列を返します。

• Array.prototype.slice.call は、このようなオブジェクトをあたかも配列のように扱い、.slice() メソッドを利用するためのテクニックです。
  • .call() メソッドは、本来別のオブジェクトに属するメソッドを、別のオブジェクトに対して呼び出すようにします。
• 通常の配列に対しては、.slice() メソッドを使って部分抽出ができます。
  • しかし、配列っぽく振る舞うオブジェクト (DOM要素のコレクションなど) には直接使えません。

const numbers = [1, 2, 3, 4, 5];
const slicedNumbers = numbers.slice(1, 3); // [2, 3]

console.log(slicedNumbers); // [2, 3] (元の配列は変更されない)

解説

• ここで重要なのは、.slice() メソッドが直接 numbers に対して呼ばれている点です。
• 抽出した部分は、新しい配列 slicedNumbers に格納されます。
• numbers.slice(1, 3) で、インデックス 1 から 3 (除外) までを部分抽出します。
• numbers は通常の配列です。

const elements = document.querySelectorAll('li'); // DOM要素のコレクションを取得

// 通常の slice は使えない (エラーが発生)
// const slicedElements = elements.slice(1, 3);

const slicedElements = Array.prototype.slice.call(elements, 1, 3);

console.log(slicedElements); // NodeList (先頭の 3 つの li 要素)

• 部分抽出された要素は、 slicedElements に格納されます。
  • こちらも配列ではなく、 NodeList というオブジェクトですが、先頭の 3 つの li 要素を順番にアクセスできます。
• Array.prototype.slice.call(elements, 1, 3) では、
  • .call() メソッドを使って、.slice() を elements に対して呼び出します。
  • まるで elements が配列であるかのように扱われます。
• この elements は配列ではありませんが、配列のように要素を扱えます (ただし、.slice() メソッドは使えません)。
• document.querySelectorAll('li') で、リスト要素 (li) のコレクションを取得します。

• Array.prototype.slice.call は、古いブラウザや、配列以外のオブジェクトを扱う場合に役立ちます。

Array.prototype.slice.call の代替メソッド (Javascript)

Array.prototype.slice.call は便利なテクニックですが、最近の Javascript ではより洗練された方法が推奨されます。ここでは、代替となるメソッドを見てみましょう。

Array.from()

• 引数として、変換したいオブジェクトと、オプションでマップ関数 (変換処理) を指定できます。
• Array.from() メソッドは、配列じゃないオブジェクトを、新しい配列に変換できます。

const elements = document.querySelectorAll('li'); // DOM要素のコレクションを取得

const slicedElements = Array.from(elements); // 全要素を配列に変換
const firstThreeElements = Array.from(elements, (element, index) => index < 3); // 最初の 3 つだけ抽出・変換

console.log(slicedElements); // 配列として扱える (li 要素の配列)
console.log(firstThreeElements); // 最初の 3 つの li 要素の配列

• Array.from(elements, mapFunction) では、変換処理 (mapFunction) を使って、各要素を変換しながら配列化できます。
• Array.from(elements) で、 elements を新しい配列に変換します。

spread syntax (スプレッド構文)

• spread syntax (...) は、イテラブルオブジェクト (配列っぽいオブジェクト) を展開して、配列として扱えます。

const elements = document.querySelectorAll('li'); // DOM要素のコレクションを取得

const slicedElements = [...elements].slice(1, 3); // 展開してから slice

console.log(slicedElements); // 配列として扱える (2 番目と 3 番目の li 要素)

• その後、通常の .slice() メソッドを使って部分抽出できます。
• [...elements] で、elements を展開して、配列のように扱えるようにします。