TL;DR

このページでは、Array.from() メソッドの活用方法について詳しく解説しますね。一言で言うと、Array.from() とは、異なるデータ型やイテラブルなオブジェクトから新たな配列を生成する強力なメソッドです。

Array.from() とは？

Array.from() メソッドは、JavaScript において配列を操作するための強力なツールで、配列風のオブジェクトやイテラブル（反復可能）なオブジェクトから新しい配列インスタンスを作成できます。

一般的な使用例として、配列風オブジェクト（配列のように見えるが配列ではないオブジェクト）を本物の配列に変換する場面があります。配列風オブジェクトとは、たとえば arguments オブジェクトや NodeList などが該当します。

Array.from()メソッドは、配列風のオブジェクトや反復可能なオブジェクトを浅くコピーして新しい Array オブジェクトを作成します。

文字列から配列を作成する

文字列は反復可能なオブジェクトなので、Array.from()メソッドを使用して文字列を文字の配列に変換することができます。

const str = 'Hello'
const arr = Array.from(str)

console.log(arr) // ['H', 'e', 'l', 'l', 'o']

ここでは、文字列 'Hello' を配列 ['H', 'e', 'l', 'l', 'o'] に変換しています。

関数を使用して配列の要素を変換する

2 つ目の引数として関数を渡すことで、生成される配列の要素を変換することも可能です。例えば、以下のようにすれば、配列の各要素をその二乗にすることができます。

const arr = Array.from({ length: 5 }, (v, i) => i * i)

console.log(arr) // [0, 1, 4, 9, 16]

このコードは、長さ 5 の配列を生成し、その各要素をそのインデックスの二乗にしています。その結果、配列 [0, 1, 4, 9, 16] が生成されます。これは、Array.from()の 2 つ目の引数として渡された関数 (v, i) => i * i が各要素に対して実行され、その結果が新しい配列の要素となるからです。

配列風のオブジェクトを渡す

他にも、Array.from() メソッドの基本的な使い方を見てみましょう。

const arrayLike = { length: 2, 0: 'a', 1: 'b' }
const arr = Array.from(arrayLike)

console.log(arr) // ["a", "b"]

この例では、配列風のオブジェクト arrayLike を Array.from() メソッドに渡しています。その結果、新たに生成された配列 arr は ["a", "b"] となります。

JavaScript ではオブジェクトリテラルを使用して新しいオブジェクトを生成できます。オブジェクトリテラルは一組のカッコ {} で囲まれたゼロ個以上の名前と値のペアで構成されます。{length: 2} は、lengthというキー（またはプロパティ）を持ち、その値が2であるようなオブジェクトを生成します。

この length プロパティがあると、JavaScript の Array.from() メソッドはこのオブジェクトを配列のように扱います。つまり、この length プロパティの値は新しく生成される配列の長さを決定します。したがって、Array.from({length: 2})は 2 つの要素を持つ配列を生成します。

ただし、生成される配列の各要素は初期化されないため、その値はundefinedになります。つまり、Array.from({length: 2})を実行すると[undefined, undefined]という配列が得られます。

マッピング機能

Array.from() メソッドにはマッピング機能が備わっています。第二引数として関数を渡すことで、新たに生成する配列の全ての要素にその関数を適用することができます。

Array.from()メソッドには 2 つ目の引数として関数を渡すことができます。この関数は生成される配列の各要素に対して実行され、その結果が新しい配列の要素となります。例えば、Array.from({length: 2}, (v, i) => i)を実行すると[0, 1]という配列が得られます。これは、各要素に対してそのインデックスを返す関数 (v, i) => i を実行しているからです。

const numbers = { length: 5, 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 }
const squares = Array.from(numbers, (num) => num * num)

console.log(squares) // [1, 4, 9, 16, 25]

ここでは、数値の配列を Array.from() メソッドで作成し、それぞれの数値を自身で二乗するというマッピング関数を適用しています。その結果、生成された squares 配列は [1, 4, 9, 16, 25] となります。

Next.js で、Array.from() を活用

次に、Next.js と TypeScript を使用して、Array.from() メソッドを実際にどのように活用するのか見ていきましょう。具体的には、配列の生成からレンダリングまでを一貫して行う独自のコンポーネントを作成します。

ファイル名：components/NumberGrid.tsx

import { css } from '@emotion/react'

type NumberGridProps = {
  length: number
}

const NumberGrid = ({ length }: NumberGridProps) => {
  // Array.from() を使って length の長さだけ要素を持つ配列を生成
  const numbers = Array.from({ length }, (_, i) => i + 1)
  return (
    <div css={gridStyle}>
      {numbers.map((num) => (
        <div key={num} css={itemStyle}>
          {num}
        </div>
      ))}
    </div>
  )
}

const gridStyle = css({
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
  gap: '1em',
})

const itemStyle = css({
  backgroundColor: '#ddd',
  padding: '1em',
  borderRadius: '8px',
})

export default NumberGrid

この NumberGrid コンポーネントでは、length というプロパティを受け取り、その数だけ要素を持つ配列を生成しています。配列の生成には Array.from() メソッドを活用し、配列の各要素はそのインデックスに 1 を加えた数値としています。

そして、生成した配列を .map() メソッドでループ処理し、各要素を表示する div 要素に変換しています。この div 要素が、画面に表示される各グリッドアイテムとなります。

イテラブルなオブジェクトを配列に変換

最後に、さらにテクニカルな使用例を見てみましょう。この例では、Array.from() メソッドを使って、イテラブルなオブジェクトを配列に変換します。

イテラブルなオブジェクトとは、要素を一つずつ取り出すことが可能なオブジェクトのことを指します。例えば、JavaScript の文字列は各文字を要素とするイテラブルなオブジェクトとして扱うことができます。

ファイル名：components/StringToArray.tsx

import { css } from '@emotion/react'

type StringToArrayProps = {
  str: string
}

const StringToArray = ({ str }: StringToArrayProps) => {
  // Array.from() を使って文字列を配列に変換
  const characters = Array.from(str)
  return (
    <div css={containerStyle}>
      {characters.map((char, i) => (
        <div key={i} css={charStyle}>
          {char}
        </div>
      ))}
    </div>
  )
}

const containerStyle = css({
  display: 'flex',
  gap: '1em',
})

const charStyle = css({
  backgroundColor: '#ddd',
  padding: '1em',
  borderRadius: '8px',
})

export default StringToArray

この StringToArray コンポーネントでは、str というプロパティを受け取り、その文字列を Array.from() メソッドを使用して配列に変換しています。変換した配列は characters という変数に格納され、.map() メソッドでループ処理されます。

各ループで、文字列の各文字を表示する div 要素に変換しています。これにより、画面上には受け取った文字列の各文字が一つずつ別々の要素として表示されます。

以上が、Next.js と TypeScript を用いた Array.from() メソッドの活用例です。これらのコードは単純なものですが、この方法を理解しておけば、より複雑な状況でも対応することができます。そのため、ぜひ一度試してみて、Array.from() メソッドの使い方に慣れてみてください。