JavaScriptで範囲（レンジ）を作成する3つの方法

さまざまな関数を書いていると、データを扱うために「範囲（レンジ）」を作成したくなることがよくあります。範囲とは、開始値と終了値を持つ一連のデータを配列やオブジェクトとして表現したものです。

多くのプログラミング言語には、範囲を作成するための組み込みメソッドが用意されています。たとえばRubyにはto_aというメソッドがあります。

('a'..'e').to_a => ["a", "b", "c", "d", "e"]

一方、JavaScriptにはこのための専用の組み込みメソッドは存在しません。しかし、範囲を作成する方法はいくつもあります。この記事では、代表的な3つの方法をご紹介します。

1. _.range() – Lodashを使う

数値の範囲を最も手軽に作成したい場合は、Lodashのユーティリティメソッドである_.range()を活用しましょう。

このメソッドは配列を返し、3つの引数を受け取ります。1つ目は範囲の開始値、2つ目は範囲の終了値（その値自体は含まない）、3つ目はステップ（増減させる幅）です。

_.range(-2);
// => [0, -1]
 
_.range(1, 3);
// => [1, 2]
 
_.range(1, 10, 4);
// => [1, 5, 9]

引数を1つだけ指定した場合は、0から指定した数値までの範囲が作成される点に注意してください。また、Lodashは別途インストールが必要な外部ライブラリであることも覚えておきましょう。

2. 独自のrange()関数を作成する

ライブラリのオーバーヘッドを避けたい場合は、独自の数値範囲関数を作成するのがおすすめです。実は、自分で範囲生成関数を実装するのは非常に簡単です。

function range(start, end, step = 1){
  if(start === end) return [start];
  const range = [];
  for(let i = start; i <= end; i += step){
     range.push(i);
  }
  
  return range;
}

range(1, 10, 4)
//  => [1, 5, 9]
range(1, 10)
// => [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10]

このようにシンプルに書けるため、1つの関数のためだけにLodashのようなライブラリを導入する必要がなくなります。

3. 数値以外の範囲関数を作成する

「数値以外の範囲、たとえばアルファベットの文字の場合はどうすればいいのか？」と疑問に思った方もいるでしょう。JavaScriptでも、工夫次第で文字の範囲を作成できます。

ここでは、charCodeAt()メソッドで文字を文字コード（数値）に変換し、その数値を増加させながら、文字コードから文字を返すString.fromCharCode()を使って配列に追加していく方法を紹介します。

function charRange(start, stop) {
  const range = [];
  const end = stop.charCodeAt(0)
  for (let i = start.charCodeAt(0); i <= end; i++){
    range.push(String.fromCharCode(i));
  }
  return range;
};

charRange('A','F')
// => [ 'A', 'B', 'C', 'D', 'E', 'F' ]

思ったよりも簡単に実装できたのではないでしょうか？

まとめ

この記事では、JavaScriptで範囲を作成する3つの方法を学びました。ライブラリを使う方法と、自前で実装する方法のどちらも、状況に応じて使い分けることで開発効率が向上します。ぜひこれらの便利な関数をスニペットとして保存しておき、必要なときにすぐ取り出せるようにしておきましょう！