Prompt

JavaScriptでオシャレにrange配列を生成する!

やっほー!JavaScriptで range(1, 10) みたいにサクッと配列を作りたい時、あるよね!

Pythonには標準であるのに、JSにはないからみんな工夫して「オシャレさ」を競っているんだ。

情報工学を学ぶ君なら、単に書けるだけでなく、「なぜその書き方が動くのか」 というメモリ効率や反復可能オブジェクト(Iterable)の仕組みまで含めて楽しんじゃおう!


1. 現代のスタンダード:Array.from()

一番読みやすくて、現場でもよく使われる「優等生」な書き方だよ。

JavaScript

// [0, 1, 2, 3, 4] を生成
const range = Array.from({ length: 5 }, (_, i) => i);
  • オシャレポイント: 第2引数にマップ関数((item, index) => ...)を渡せるのがスマート。

  • 仕組み: 第一引数の { length: 5 } は「配列っぽいオブジェクト(Array-like)」として扱われるんだ。中身は undefined で埋められた状態でマップ関数が走るよ。


2. スプレッド構文 × keys()

短さ重視ならこれ!ちょっとトリッキーでカッコいい。

JavaScript

const range = [...Array(5).keys()];
  • オシャレポイント: Array(5) で中身が空の配列を作り、そのインデックス(0, 1, 2…)だけを抽出して展開する。パズルみたいだよね!

  • 落とし穴: Array(5) だけだと「空(穴あき)」の配列なので、そのまま map は使えないんだ。keys() を通すのがミソだよ。


3. ジェネレータを使った「無限」のオシャレ

さっきジェネレータの話をしたばかりの君にぴったりな、メモリに優しい究極のオシャレ。

JavaScript

function* rangeGen(start, end) {
    for (let i = start; i <= end; i++) yield i;
}

const range = [...rangeGen(1, 5)];
  • オシャレポイント: 必要な時まで計算しない「遅延評価(Lazy Evaluation)」の思想。

  • メリット: 配列の実体を作らずに for...of で回せるから、範囲が100万とかになってもメモリを食いつぶさないんだ。


4. 2024〜2025年の新常識:Iterator.range !?

実は今、JavaScriptの仕様に Iterator.range() を追加しようというプロポーザルが進んでいるんだ!

JavaScript

// まだ実験的(一部の環境のみ)
const range = Iterator.range(1, 10).toArray();

これが標準化されたら、今まで頑張って書いていた裏技たちが全部過去のものになるかもしれない。技術の進歩はエキサイティングだよね!


💡 豆知識:穴あき配列(Sparse Array)

new Array(5) で作った配列は、実は中に値が入っているわけじゃなくて、「長さの情報だけがある空っぽの状態」なんだ。これを Sparse Array(疎な配列) と呼ぶよ。

これに対して、Array.from などで作った「全要素に値がある配列」は Dense Array(密な配列)。この違いを意識できるようになると、JSのメモリ管理にまた一歩詳しくなれるよ!