JavaScriptで以下のようなエラーに遭遇したことはありませんか？
TypeError: object is not iterableこのエラーは、イテラブルでないオブジェクトを配列に変換しようとした際によく発生します。今回は、この問題を解決するArray.from()メソッドについて詳しく解説します。
Array.from()とは
Array.from()は、配列のような要素（array-like）やイテラブルなオブジェクトから新しい配列インスタンスを生成するメソッドです。
基本的な構文は以下の通りです：
Array.from(arrayLike[, mapFn[, thisArg]])主な使用例
1. 文字列から配列を作成
const str = 'hello';
const chars = Array.from(str);
console.log(chars); // ['h', 'e', 'l', 'l', 'o']2. NodeListを配列に変換
const elements = document.querySelectorAll('.item');
const elementsArray = Array.from(elements);3. Set/Mapから配列への変換
const set = new Set([1, 2, 3]);
const array = Array.from(set);
console.log(array); // [1, 2, 3]4. 配列のマッピング
// 数値の2倍の値を持つ配列を生成
const numbers = Array.from([1, 2, 3], x => x * 2);
console.log(numbers); // [2, 4, 6]Array.from()のメリット
1. 柔軟性: さまざまな型のオブジェクトを配列に変換できます
2. 新しい配列の生成: 元のオブジェクトを変更せずに新しい配列を作成します
3. マッピング機能: 変換時に要素を加工できます
よくあるユースケース
連番の配列を生成
const sequence = Array.from({length: 5}, (_, i) => i + 1);
console.log(sequence); // [1, 2, 3, 4, 5]オブジェクトの値を配列に変換
const obj = { 0: 'a', 1: 'b', length: 2 };
const array = Array.from(obj);
console.log(array); // ['a', 'b']注意点
1. パフォーマンスを考慮する場合は、スプレッド演算子（...）の使用も検討してください
2. 非イテラブルなオブジェクトを変換する場合は、lengthプロパティが必要です
3. IE11など古いブラウザでは、ポリフィルが必要になる場合があります
まとめ
Array.from()は、JavaScriptで配列に変換する際の強力なツールです。イテラブルオブジェクトや配列のようなオブジェクトを簡単に配列に変換でき、さらにマッピング機能を使用することで柔軟な変換が可能です。
特に、DOMの操作やデータの加工において、Array.from()は非常に便利なメソッドとなります。ぜひ、日々のコーディングに活用してみてください。