JavaScript 入門 - Array.from

本記事では、JavaScript の Array.fromの使い方を解説します。

結論： Array.fromとは？

まず結論をいうと、JavaScript の Array.fromメソッドは、配列のようなオブジェクトを本物の配列に変換するためのメソッドです。

配列のようなオプジェクトとは、以下のようなオブジェクトです。

• 配列風のオブジェクト：argumentsオブジェクトやNodeListなど。

• 反復可能なオブジェクト：SetやMapなど。

Array.fromは、ES6（ECMAScript 2015）で導入された静的なメソッドで、次のような用途で使用されます：

配列風のオブジェクトを配列に変換

function example() {
  console.log(arguments); // [object Arguments] - 配列ではない
  const argsArray = Array.from(arguments);
  console.log(argsArray); // 本物の配列
}

example(1, 2, 3);

文字列を配列に変換する

const str = 'Hello';
const chars = Array.from(str);
console.log(chars); // ['H', 'e', 'l', 'l', 'o']

NodeListを配列に変換する

const nodeList = document.querySelectorAll('div');
const nodesArray = Array.from(nodeList);

Setの変換

const mySet = new Set([1, 2, 3]);
const arrayFromSet = Array.from(mySet);
console.log(arrayFromSet); // [1, 2, 3]

Mapの変換

const myMap = new Map([[1, 'one'], [2, 'two']]);
const arrayFromMap = Array.from(myMap);
console.log(arrayFromMap); // [[1, 'one'], [2, 'two']]

配列の重複を削除する

const numbers = [1, 2, 2, 3, 3, 3];
const uniqueNumbers = Array.from(new Set(numbers));
console.log(uniqueNumbers); // [1, 2, 3]

発展：第二引数（マッピング関数）

Array.fromは、第二引数としてマッピング関数を受け取ります。これは、Array.prototype.mapと同様の機能を提供します。

const numbers = [1, 2, 3];
const doubled = Array.from(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6]

まとめ

Array.fromは、配列風オブジェクトや反復可能なオブジェクトを簡単に配列に変換できる強力なメソッドです。

データ操作を配列として扱いたい場合に非常に便利なので、ぜひ活用してみてください。