【JS応用｜豆知識】配列リテラル「[]」を使いこなそう！モダンなJavaScript配列作成術

導入

JavaScriptでデータを扱う際、最も頻繁に利用するのが「配列」です。その配列を最も簡潔かつ高速に生成できるのが「配列リテラル（[]）」です。なぜコンストラクタ（new Array()）ではなくリテラルを使うべきなのか、その重要性と正しい使い方を解説します。可読性の向上と、予期せぬバグの回避に直結する重要な知識です。

基礎知識

配列リテラルとは、角括弧「[]」を使って配列を直接記述する方法です。JavaScriptには「new Array()」というオブジェクト生成のための記法も存在しますが、これには落とし穴があります。例えば「new Array(5)」と書くと、要素が5つ入った配列ではなく、「長さが5の空配列」が生成されてしまいます。一方、配列リテラルを使えば、直感的かつ安全に配列を定義できます。

実装/解決策

配列リテラルを使用する際は、初期値を格納したい場合は「[1, 2, 3]」のようにカンマ区切りで記述し、空の配列を作成したい場合は単純に「[]」と記述します。また、ES6以降で登場したスプレッド構文「…」と組み合わせることで、既存の配列をコピーしたり、複数の配列を結合したりすることが非常に容易になります。

サンプルプログラム

以下のコードは、配列リテラルの基本的な定義から、スプレッド構文を用いた応用例です。

// 1. 基本的な配列の定義
const fruits = ['りんご', 'バナナ', 'オレンジ'];
console.log(fruits); // ['りんご', 'バナナ', 'オレンジ']

// 2. 空の配列の定義（これが最も安全で推奨される方法です）
const emptyArray = [];

// 3. スプレッド構文を使った配列のコピーと要素の追加
const original = [1, 2, 3];
// ...を使うことで、元の配列を展開して新しい配列を作成
const copied = [...original, 4, 5]; 

console.log(copied); // [1, 2, 3, 4, 5]

// 4. 2つの配列を結合する例
const groupA = ['A', 'B'];
const groupB = ['C', 'D'];
const combined = [...groupA, ...groupB];
console.log(combined); // ['A', 'B', 'C', 'D']

応用・注意点

現場での開発において特に注意すべきなのは、「constで定義した配列の中身は変更可能」という点です。配列リテラルで宣言した変数は再代入できませんが、配列内の要素を書き換えたり、pushメソッドで要素を追加したりすることは可能です。もし配列自体を完全に不変（イミュータブル）にしたい場合は、「Object.freeze()」を検討しましょう。また、パフォーマンス面ではリテラルの方がコンストラクタよりも若干高速に動作するため、特別な理由がない限りは「[]」を使用するのがフロントエンド開発の鉄則です。