JavaScriptで[0, 1, 2, ... 100]の配列は直接書かずにArrayとkeysを使うべし

[0, 1, 2, ... 100]の配列はArrayとkeysで作成

ある日のこと、あるWebページのReactのセレクトボックスに0から100を入れて選択できるようにする箇所があったのだが、新人のフロントエンドエンジニアの方に任せたところ以下のようなコードが作成されていた。

TSX

function App() {
  const scores = [
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
    21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
    40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58,
    59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77,
    78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96,
    97, 98, 99, 100
  ]

  return (
    <>
      <h1>点数を選択</h1>
      <select name="scores">
        <option value="" selected>
          点数を選択してください
        </option>
        {scores.map((item, i) => (
          <option value={item} key={i}>
            {item}
          </option>
        ))}
      </select>
    </>
  )
}

export default App

確かにこれでも動作しますが、これだとscoresの中に0から100が入っているのか確認するのが大変です😅

このようなケースの場合は以下のようにArrayとkeysを使用すれば0から100までの連番の配列を簡単に作成できます。

JavaScript

const scores = [...Array(101).keys()]
console.log(scores)
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

Reactで0から100のセレクトボックスを作成したサンプル

もし1から10までの連番を作成したい場合はmapを使用して1を追加します。

JavaScript

const scores = [...Array(10).keys().map((k) => k + 1)]
console.log(scores)
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

さらに0から100までの5ステップずつ (0, 5, 10, 15, ... 95, 100) のような配列の場合は、Arrayの数字を21 (100 / 5 + 1) にして、mapを使用して5を掛ければ作成できます。

JavaScript

const scores = [...Array(21).keys().map((k) => k * 5)]
console.log(scores)
// [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100]

時間 (分) の '00' から '59' の場合はArray.fromでlengthを指定して、padStartで先頭の0を埋めて作成します。

JavaScript

const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
console.log(minutes)
// ['00', '01', '02', ..., '58', '59']

[2024, 2023, …, 1901, 1900] のような西暦もArray.fromで作成できますが、西暦の場合は配列の値が毎年同じではなく「現在の年〜1900年」のようにすることが多いので、getFullYear()で現在の年を取得して計算して配列を作成します。

JavaScript

const currentYear = new Date().getFullYear()
const years = Array.from({ length: currentYear - 1899 }, (_, i) => currentYear - i)
console.log(years)
// [2024, 2023, ..., 1901, 1900]

1から10くらいまでならそのまま入れても良いですが、それ以上は配列の内容が本当に正しいのか把握しづらくなるので、Array, keys, map, Array.fromなどを使用せずに直接書くのは控えたほうが良いでしょう。

[0, 1, 2, ... 100]の配列はArrayとkeysで作成

関連した記事