目次
Array.fromとは
Array.fromは配列のようなオブジェクトを新しい配列に変換するために使用されるメソッドです。
配列の生成や変換の際に使うと便利なのですが、認知度が低く、便利な使い方を理解している方が少ないので、私が利用している便利な使い方を5つご紹介します。
1. 文字列を配列に変換
Array.fromで文字列を文字ごとに配列で分割できます。
const str = 'Hello'
const chars = Array.from(str)
console.log(chars)
// ['H', 'e', 'l', 'l', 'o']スプレッド構文 ([…'Hello'])でも分割できますが、古い開発環境だとスプレッド構文の文字列の分割は使えないことがあるので、その場合はArray.fromを使用します。
2. NodeListを配列に変換
NodeListにはmapやfilterがありません。
そのため、以下のケースではArray.fromの変換が必要です。
// <li class="list">list1</li>
// <li class="list">list2</li>
// <li class="list">list3</li>
const list = document.querySelectorAll('.list')
// ✅️ 配列として操作可能
const listArray = Array.from(list)
const filteredArrayList = listArray.filter((el) => el.textContent === 'list2')
console.log(filteredArrayList)
// ❌️ 配列として操作不可
const filteredList = list.filter((el) => el.textContent === 'list2')
console.log(filteredList)3. イテラブルオブジェクトから配列を作成
SetやMapなどのイテラブルオブジェクトを配列に変換できます。
const set = new Set([1, 2, 2, 3])
const array = Array.from(set)
console.log(array) // [1, 2, 3]const map = new Map([[1, 'a'], [2, 'b'], [2, 'a']])
const keys = Array.from(map.keys())
const values = Array.from(map.values())
console.log(keys) // [1, 2]
console.log(values) // ['a', 'a']4. 初期値を入れた配列を作成
Array(3)だと [undefined, undefined, undefined] になりますが、初期値をnullにしたいことがあります。
そんなときはArray.fromを使用して以下のように配列を作成します。
const result = Array.from({ length: 3 }, () => null)
console.log(result)
// [null, null, null]5. 連番やアルファベットを入れた配列を作成
配列内に連番を入れたい場合もArray.fromを使えば以下のように配列を作成できます。
const result = Array.from({length: 5}, (_, i) => i + 1)
console.log(result)
// [1, 2, 3, 4, 5]0からの連番の場合はスプレッド構文を使用したほうが短く書けます。
const result = [...Array(5).keys()]
console.log(result)
// [0, 1, 2, 3, 4]アルファベットの「AからZ」または「aからz」の配列作成は以下の通りです。
const AtoZ = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i))
console.log(AtoZ)
// ['A', 'B', ..., 'Y', 'Z'] const AtoZ = Array.from({ length: 26 }, (_, i) => String.fromCharCode(97 + i))
console.log(AtoZ)
// ['a', 'b', ..., 'y', 'z']日本語のひらがなの「ぁ から ゖ」またはカタカナの「ァ から ヺ」の配列も作成できます。
日本語の場合は「あ から ん」または「ア から ン」だと誤解されているケースがありますが、文字コード的には間違いなので注意が必要です。
const allHiragana = Array.from({ length: 86 }, (_, i) => String.fromCharCode(12353 + i))
console.log(allHiragana)
// ['ぁ', 'あ', 'ぃ', 'い', 'ぅ', 'う', 'ぇ', 'え', 'ぉ', 'お', 'か', 'が', 'き', 'ぎ', 'く', 'ぐ', 'け', 'げ', 'こ', 'ご', 'さ', 'ざ', 'し', 'じ', 'す', 'ず', 'せ', 'ぜ', 'そ', 'ぞ', 'た', 'だ', 'ち', 'ぢ', 'っ', 'つ', 'づ', 'て', 'で', 'と', 'ど', 'な', 'に', 'ぬ', 'ね', 'の', 'は', 'ば', 'ぱ', 'ひ', 'び', 'ぴ', 'ふ', 'ぶ', 'ぷ', 'へ', 'べ', 'ぺ', 'ほ', 'ぼ', 'ぽ', 'ま', 'み', 'む', 'め', 'も', 'ゃ', 'や', 'ゅ', 'ゆ', 'ょ', 'よ', 'ら', 'り', 'る', 'れ', 'ろ', 'ゎ', 'わ', 'ゐ', 'ゑ', 'を', 'ん', 'ゔ', 'ゕ', 'ゖ']const allKatakana = Array.from({ length: 90 }, (_, i) => String.fromCharCode(12449 + i))
console.log(allKatakana)
// ['ァ', 'ア', 'ィ', 'イ', 'ゥ', 'ウ', 'ェ', 'エ', 'ォ', 'オ', 'カ', 'ガ', 'キ', 'ギ', 'ク', 'グ', 'ケ', 'ゲ', 'コ', 'ゴ', 'サ', 'ザ', 'シ', 'ジ', 'ス', 'ズ', 'セ', 'ゼ', 'ソ', 'ゾ', 'タ', 'ダ', 'チ', 'ヂ', 'ッ', 'ツ', 'ヅ', 'テ', 'デ', 'ト', 'ド', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ', 'ハ', 'バ', 'パ', 'ヒ', 'ビ', 'ピ', 'フ', 'ブ', 'プ', 'ヘ', 'ベ', 'ペ', 'ホ', 'ボ', 'ポ', 'マ', 'ミ', 'ム', 'メ', 'モ', 'ャ', 'ヤ', 'ュ', 'ユ', 'ョ', 'ヨ', 'ラ', 'リ', 'ル', 'レ', 'ロ', 'ヮ', 'ワ', 'ヰ', 'ヱ', 'ヲ', 'ン', 'ヴ', 'ヵ', 'ヶ', 'ヷ', 'ヸ', 'ヹ', 'ヺ']
