Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【Node.js24.x】Array::from()メソッドの使い方

fromメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

fromメソッドは、イテラブルなオブジェクト(例えばSetやMap、文字列など)や配列のようなオブジェクト(例えばargumentsオブジェクト、NodeListなど)から、新しいArrayインスタンスを生成するメソッドです。このメソッドは、異なるデータ構造を標準的なJavaScriptの配列に変換する際に非常に有用で、コードの柔軟性と可読性を高めます。

このメソッドは主に二つの引数を受け取ります。最初の引数には、新しい配列に変換したいイテラブルなオブジェクトまたは配列のようなオブジェクトを指定します。例えば、文字列を渡せば、その文字列を構成する各文字が新しい配列の要素となります。また、HTMLの要素コレクションであるNodeListを渡せば、それらの要素が配列として取得できます。

二つ目の引数はオプションで、マップ関数を指定できます。このマップ関数は、新しい配列の各要素が生成される直前に、元のオブジェクトから取得した値に対して実行されます。これにより、新しい配列の要素を生成すると同時に、その値を加工したり変換したりすることが可能です。例えば、文字列の配列を数値の配列に変換したり、特定の条件に基づいて要素を変更したりできます。

また、fromメソッドは、既存の配列をシャローコピーする用途にも利用できます。このように、さまざまなデータソースから手軽に配列を生成できるため、Webアプリケーション開発においてDOM操作の結果を配列として扱いたい場合や、関数に渡された引数を配列として処理したい場合など、多岐にわたる場面で活用されます。

構文(syntax)

Array.from(arrayLike);

引数(parameters)

arrayLike, mapFn, thisArg

  • arrayLike: Array.from() メソッドで配列に変換したい、配列のようなオブジェクトまたはイテラブルなオブジェクト
  • mapFn: (optional) 各要素に適用するマッピング関数
  • thisArg: (optional) mapFn を実行する際の this の値

戻り値(return)

Array

Array.from() メソッドは、iterable オブジェクトまたは配列ライクなオブジェクトから、新しい Array インスタンスを生成して返します。

関連コンテンツ

関連プログラミング言語