配列風オブジェクトから簡単に配列を作成! JavaScript Array.from の使い方

2024-04-02

JavaScript Array.from とは?

従来の配列リテラルやArrayコンストラクタと比較して、Array.fromは以下のような利点があります。

配列風オブジェクトから簡単に配列を作成できる

例えば、NodeListやStringなど、配列ではないオブジェクトでも、Array.fromを使えば簡単に配列に変換できます。

// NodeListから配列を作成
const nodeList = document.querySelectorAll('.target');
const arr = Array.from(nodeList);

// Stringから配列を作成
const str = 'Hello World!';
const arr = Array.from(str);

反復可能オブジェクトから簡単に配列を作成できる

MapやSetなど、反復可能なオブジェクトからも、Array.fromを使って簡単に配列を作成できます。

// Mapから配列を作成
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const arr = Array.from(map);

// Setから配列を作成
const set = new Set([1, 2, 3, 4, 5]);
const arr = Array.from(set);

マップ関数と組み合わせて、変換処理を簡潔に記述できる

Array.fromは、引数としてマップ関数を渡すことで、要素変換処理を同時に実行できます。

// 数字の配列を作成し、各要素に2を乗算する
const arr = Array.from(Array(5), (_, i) => i * 2);
console.log(arr); // [0, 2, 4, 6, 8]

オプション引数で、配列の初期値を設定できる

Array.fromは、2番目の引数として初期値を設定できます。

// 3つの要素を持つ空の配列を作成
const arr = Array.from(3);
console.log(arr); // [undefined, undefined, undefined]

// 3つの要素を持つ、値が1の配列を作成
const arr = Array.from(3, () => 1);
console.log(arr); // [1, 1, 1]

Array.from の使い方

Array.fromは、以下の構文で使用します。

Array.from(iterable, [mapFunc], [thisArg])
  • iterable: 配列風オブジェクトまたは反復可能オブジェクト
  • mapFunc: オプション。各要素を変換する関数
  • thisArg: オプション。mapFuncのthisオブジェクト

Array.from の注意点

  • 配列風オブジェクトや反復可能オブジェクトでない場合は、TypeError例外が発生します。
  • mapFuncで返された値は、必ず配列に追加されます。undefinedやnullであっても、空要素にはなりません。

Array.fromは、配列風オブジェクトや反復可能オブジェクトから簡単に配列を作成できる便利な関数です。従来の配列リテラルやArrayコンストラクタよりも簡潔で柔軟な記述が可能なので、ぜひ使いこなしてみましょう。



Array.from サンプルコード

配列風オブジェクトから配列を作成

NodeList

// HTML要素のリストを取得
const nodeList = document.querySelectorAll('.target');

// NodeListから配列を作成
const arr = Array.from(nodeList);

// 配列の内容を出力
console.log(arr);

String

// 文字列を分割
const str = 'Hello World!';

// Stringから配列を作成
const arr = Array.from(str);

// 配列の内容を出力
console.log(arr);

反復可能オブジェクトから配列を作成

Map

// Mapを作成
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// Mapから配列を作成
const arr = Array.from(map);

// 配列の内容を出力
console.log(arr);

Set

// Setを作成
const set = new Set([1, 2, 3, 4, 5]);

// Setから配列を作成
const arr = Array.from(set);

// 配列の内容を出力
console.log(arr);

マップ関数で要素変換

// 数字の配列を作成し、各要素に2を乗算する
const arr = Array.from(Array(5), (_, i) => i * 2);

// 配列の内容を出力
console.log(arr);

オプション引数で初期値を設定

空の配列

// 3つの要素を持つ空の配列を作成
const arr = Array.from(3);

// 配列の内容を出力
console.log(arr);

値が1の配列

// 3つの要素を持つ、値が1の配列を作成
const arr = Array.from(3, () => 1);

// 配列の内容を出力
console.log(arr);

配列の要素を逆順にする

// 数字の配列を作成
const arr = Array.from(Array(5), (_, i) => i);

// 配列を逆順にする
const reversedArr = arr.reverse();

// 配列の内容を出力
console.log(reversedArr);

配列の重複要素を除く

// 数字の配列を作成
const arr = [1, 2, 3, 1, 2, 4];

// 配列の重複要素を除く
const uniqueArr = Array.from(new Set(arr));

// 配列の内容を出力
console.log(uniqueArr);


Array.from の代替方法

スプレッド構文は、イテレータを展開して配列を作成する簡潔な方法です。

const arr = [...nodeList];
const arr = [...str];

ただし、スプレッド構文は、ES6以降のブラウザでのみ使用可能です。

Array コンストラクタは、配列リテラルよりも柔軟に配列を作成できます。

const arr = new Array(nodeList.length);
for (let i = 0; i < nodeList.length; i++) {
  arr[i] = nodeList[i];
}

const arr = new Array(str.length);
for (let i = 0; i < str.length; i++) {
  arr[i] = str[charAt(i)];
}

ただし、Array コンストラクタは、スプレッド構文や Array.from よりも冗長な記述になります。

forEach ループを使用して、イテレータの各要素を配列に追加することもできます。

const arr = [];
nodeList.forEach((element) => {
  arr.push(element);
});

const arr = [];
str.forEach((char) => {
  arr.push(char);
});

ただし、forEach ループは、スプレッド構文や Array.from よりも処理速度が遅くなる可能性があります。

map 関数を使用して、イテレータの各要素を変換してから配列に追加することもできます。

const arr = nodeList.map((element) => element);
const arr = str.map((char) => char);

ただし、map 関数は、要素変換処理が必要な場合にのみ有効です。

Array.from の代替方法はいくつかありますが、それぞれにメリットとデメリットがあります。状況に応じて最適な方法を選択する必要があります。

一般的には、以下の条件を考慮すると良いでしょう。

  • ブラウザの互換性
  • コードの簡潔性
  • 処理速度



JavaScript初心者必見!Date.setUTCMillisecondsメソッドを徹底解説

メソッドの役割Date. setUTCMillisecondsメソッドは、以下の2つの役割を担います。既存の日付時刻のミリ秒部分を変更する: すでに作成済みのDateオブジェクトに対して、ミリ秒単位で時刻を調整できます。新しい日付時刻を作成する: 引数にミリ秒値のみを渡すことで、ミリ秒単位の精度で新しいDateオブジェクトを作成できます。



JavaScriptでその他の便利なメソッドを活用する

時間: 24時間表記で、先頭にゼロパディングされた 2 桁の数字で表現されます。分: 先頭にゼロパディングされた 2 桁の数字で表現されます。秒: 先頭にゼロパディングされた 2 桁の数字で表現されます。時間帯: GMT (グリニッジ標準時) とのオフセットを、符号 (+/-)と 4 桁の数字で表現されます。


協定世界時 (UTC)

Date. getUTCMilliseconds()メソッドは、JavaScriptの「Date」オブジェクトにおいて、**協定世界時 (UTC)**におけるミリ秒単位の時刻を取得するために使用されます。ミリ秒は、1秒の1000分の1を指します。


JavaScript DateオブジェクトのsetHoursメソッドで時間を自在に操ろう!

DateオブジェクトのsetHoursメソッドは、日付オブジェクトの時刻をローカル時間に基づいて設定するために使用されます。メソッドの構成引数hoursValue: 設定する時(0~23の範囲)minutesValue: 設定する分(省略可、0~59の範囲)


JavaScript Date.setUTCSeconds() の詳細解説

Date. setUTCSeconds() は、JavaScript の Date オブジェクトのメソッドであり、UTC 時間に基づいて秒を設定するために使用されます。オプションでミリ秒も設定できます。構文パラメータsecondsValue: 設定する秒の値。0 から 59 までの整数です。



JavaScriptでアンカー要素を簡単作成!Stringオブジェクトのanchor()メソッド徹底解説

構文:引数:name: アンカーの名前を表す文字列。省略可能。省略された場合は、空文字列("")が使用されます。戻り値:アンカー要素を含む新しい文字列。この例では、str変数に格納された文字列 "Hello, world!" に "greeting" という名前のアンカー要素を追加し、新しい文字列 anchoredStr に格納しています。


【完全ガイド】JavaScript Number.isInteger メソッドで整数判定をマスターし、開発効率をアップ!

使い方引数value: 判定対象となる数値戻り値数値が整数であれば true、そうでなければ false例整数判定を簡単に記述できる他の判定方法と比べて処理速度が速いNaN や Infinity は常に false を返す浮動小数点数が整数に変換できる場合でも false を返す (例: 5.0000000000000001)


「Errors: Called on incompatible type」エラーの徹底調査

「Errors: Called on incompatible type」エラーは、JavaScriptコードで関数やメソッドを呼び出す際に、呼び出し先と呼び出し元の型が互換性がない場合に発生します。これは、関数やメソッドが特定の型のオブジェクトに対してのみ動作するように設計されているためです。


型ガードや型変換でエラーを防ぐ!JavaScript エラー「予期しない型」の解決方法

変数や関数の引数に、期待と異なる型の値が渡された場合例:この例では、add 関数は数値を受け取って加算する関数です。しかし、最後の呼び出しでは、1つ目の引数は数値ですが、2つ目の引数は文字列です。そのため、JavaScript は "予期しない型" エラーを発生させます。


JavaScriptの Object.getOwnPropertyDescriptors メソッドのサンプルコード

このメソッドは、オブジェクトの独自プロパティのみを検査します。つまり、プロトタイプチェーンから継承されたプロパティは含まれません。メソッドの戻り値は、オブジェクトであり、各プロパティ名がキー、そのプロパティ記述子が値となります。プロパティ記述子は、以下のプロパティを持つオブジェクトです。