JavaScriptのArray.from()とは？配列変換の基本から実践まで徹底解説

JavaScriptのArray.from()は、「配列のようなもの」を本物の配列に変換するための便利なメソッドです。
DOM操作や文字列処理など、実務でも頻繁に登場するため、基礎から理解しておくことが重要です。

この記事では、Array.from()の基本構文から具体的な使い方、実務での活用例までを丁寧に解説します。

Array.from()とは

配列のようなものを配列に変換するメソッド

Array.from()は、配列風のオブジェクト（配列ライクオブジェクト）やイテラブルを配列に変換するメソッドです。

// array-from-basic.js
const str = "hello";

const result = Array.from(str);

console.log(result); // ["h", "e", "l", "l", "o"]

このように、文字列を1文字ずつ分解して配列に変換できます。

Array.from()の基本構文

構文の形

Array.from(変換元, マッピング関数, thisArg)

各引数の説明

配列ライクオブジェクトとは

lengthを持つオブジェクト

配列ライクオブジェクトとは、lengthプロパティを持つオブジェクトのことです。

// array-like.js
const arrayLike = {
  0: "A",
  1: "B",
  2: "C",
  length: 3
};

const result = Array.from(arrayLike);

console.log(result); // ["A", "B", "C"]

このようなオブジェクトも、Array.from()を使えば配列として扱えるようになります。

NodeListを配列に変換する

DOM操作でよく使うパターン

querySelectorAll()の戻り値はNodeListであり、そのままでは配列メソッドが使えません。

// nodelist-to-array.js
const nodes = document.querySelectorAll("div");

const array = Array.from(nodes);

console.log(Array.isArray(array)); // true

これにより、map()やfilter()などが使えるようになります。

※配列メソッドについては、以下の記事も参考になります。
→ JavaScriptの配列操作まとめ（map・filter・reduce）

マッピング関数を使った変換

同時に値を加工できる

Array.from()は、第2引数に関数を渡すことで、変換と同時に加工ができます。

// mapping-function.js
const numbers = Array.from([1, 2, 3], function(num) {
  return num * 2;
});

console.log(numbers); // [2, 4, 6]

アロー関数でも記述できます。

// mapping-arrow.js
const numbers = Array.from([1, 2, 3], num => num * 2);

console.log(numbers); // [2, 4, 6]

配列を生成する（連番の作成）

指定した長さの配列を作る

Array.from()は、新しい配列を生成する用途でも非常に便利です。

// create-sequence.js
const numbers = Array.from({ length: 5 }, function(_, index) {
  return index;
});

console.log(numbers); // [0, 1, 2, 3, 4]

アロー関数で簡潔に書くこともできます。

// create-sequence-arrow.js
const numbers = Array.from({ length: 5 }, (_, i) => i + 1);

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

Array.from()とスプレッド構文の違い

似ているが用途が異なる

スプレッド構文（...）でも配列に変換できます。

// spread-vs-from.js
const str = "abc";

const arr1 = Array.from(str);
const arr2 = [...str];

console.log(arr1); // ["a", "b", "c"]
console.log(arr2); // ["a", "b", "c"]

主な違い

Array.from()を使うメリット

可読性と柔軟性が高い

• 配列変換と加工を同時に行える
• 配列生成にも使える
• DOM操作との相性が良い

よくある注意点

lengthが必要

配列ライクオブジェクトにはlengthが必要です。

// no-length.js
const obj = {
  0: "A",
  1: "B"
};

const result = Array.from(obj);

console.log(result); // []

nullやundefinedは変換できない

// null-error.js
// Array.from(null); // エラー

まとめ

Array.from()は、配列変換・生成・加工を一度に行える強力なメソッドです。

• 配列ライクやイテラブルを配列に変換できる
• マッピング関数で同時に加工できる
• 連番配列の生成にも使える

配列操作を扱う上で、非常に重要な基礎知識のひとつです。

関連記事

• JavaScriptの配列操作まとめ（map・filter・reduce）
• JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説
• JavaScriptのfilter()とは？配列の絞り込みを徹底解説
• JavaScriptのreduce()とは？配列を1つにまとめる方法