JavaScriptで配列を作成する方法！リテラル表記とArrayコンストラクタを比較

1. 配列（Array）とは？初心者向けに基礎から解説

1. 配列（Array）とは？初心者向けに基礎から解説

JavaScriptの配列（Array）とは、複数のデータを「背番号」を振って一つのグループとしてまとめて管理できる便利な仕組みです。プログラミングでは、変数という箱に一つの値を入れるのが基本ですが、配列を使えば一つの変数に大量のデータを並べて格納できます。

例えば、学校のクラス名簿や、スマートフォンの連絡先リスト、買い物カートの中身などをイメージしてみてください。これらはバラバラに管理するよりも、一つの「リスト」としてまとまっていた方が扱いやすいですよね。配列の中に入っている一つひとつのデータのことを「要素」と呼び、それぞれの場所を示す番号を「インデックス（添字）」と呼びます。

まずは、簡単なコードで配列のイメージを掴んでみましょう。プログラミング未経験の方でも、以下のコードを見れば、一つの名前に複数のフルーツが紐付いていることがわかるはずです。

// 好きなフルーツを一つの「fruits」という名前にまとめる
let fruits = ["りんご", "バナナ", "みかん"];

// 配列の中身を丸ごと表示する
console.log(fruits);

// 1番目（インデックスは0から始まる）の要素だけを表示する
console.log(fruits[0]);

["りんご", "バナナ", "みかん"]
りんご

このように、関連する情報をひとまとめにすることで、データの追加や削除、並べ替えといった操作が効率的に行えるようになります。JavaScriptを学ぶ上で、配列は避けて通れない非常に重要な概念です。

2. 配列リテラル（ [ ] ）を使って作成する

2. 配列リテラル（ [ ] ）を使って作成する

JavaScriptで配列を作る際に、プロの現場でも最も一般的に使われているのが「リテラル表記」という書き方です。特殊な命令を覚える必要はなく、中身を角かっこ [ ] で囲むだけで作成できます。

リテラル表記は、ソースコードを見ただけで「ここにデータが並んでいる」と一目でわかるため、コードの読みやすさ（可読性）が非常に高く、初心者の方にも推奨される方法です。

まずは、好きな果物の名前をいくつか並べた配列を作ってみましょう。データの間はカンマ（ , ）で区切るのがルールです。

// 文字列（テキスト）を並べて配列を作る例
let fruits = ["りんご", "バナナ", "みかん"];

// コンソールに表示して中身を確認
console.log(fruits);

["りんご", "バナナ", "みかん"]

プログラミング未経験の方は、「複数の変数を別々に作らなくていい」というメリットを意識してみてください。例えば、3つの果物を管理するのに fruit1, fruit2... と変数を作るのは大変ですが、配列なら1つの箱にまとめて整理整頓できます。

また、配列の中身には文字だけでなく、数値を入れることも可能です。学校のテスト点数などを管理するイメージで見てみましょう。

// 数値を並べて配列を作る例
let scores = [80, 95, 60];
console.log(scores);

[80, 95, 60]

このように、[] を使うだけで直感的にデータをグループ化できるのが、リテラル表記の最大の魅力です。

3. Arrayコンストラクタを使った配列の作り方

3. Arrayコンストラクタを使った配列の作り方

JavaScriptで配列を作成するもう一つの方法が、new Array() という記述を使う「Arrayコンストラクタ」です。これはJavaScriptにあらかじめ備わっている配列専用の組み立てツール（コンストラクタ）を呼び出して作成するイメージです。

プログラミング未経験の方には少し難しく聞こえるかもしれませんが、使い方はとてもシンプルです。以下のコードを見てみましょう。

// 3つの数値を格納した配列を作成する
let numbers = new Array(10, 20, 30);

// コンソールに表示して確認
console.log(numbers);

[10, 20, 30]

このように、カッコの中にカンマ区切りで値を入れることで、角かっこ（リテラル）を使った時と同じように配列を作ることができます。

ただし、このArrayコンストラクタには「数値が1つだけ渡された場合」に特有の動きをするという注意点があります。例えば new Array(5) と書くと、「5」という要素が入るのではなく「5つ分の空き枠がある空の配列」が作られてしまいます。初心者の方は、まずはより直感的でミスが起きにくい「角かっこ []」での作成を基本にしつつ、この書き方の存在を知っておくのがベストです。

4. 数値で長さを指定したときの挙動と注意点

4. 数値で長さを指定したときの挙動と注意点

Arrayコンストラクタの引数に「数値だけを1つ」渡すと、その数値の分だけ「枠（長さ）」が確保された空の配列が作成されます。これはプログラミングの世界では「疎な配列」と呼ばれる状態です。

プログラミングが初めての方は、「中身はまだ決まっていないけれど、5人分の予約席だけ確保した状態」をイメージすると分かりやすいでしょう。

// 5つ分のスペースを持つ配列を作成
let seatList = new Array(5);

console.log(seatList);
console.log("配列の長さ: " + seatList.length);

[ <5 empty items> ]
配列の長さ: 5

実行結果を見ると、長さは「5」になっていますが、中身は undefined（未定義）ですらなく、本当に何も入っていない「空（empty）」の状態です。

この方法で作成した配列は、後からデータを1つずつ入れたい場合には便利ですが、そのまま map や forEach といった「中身を順番に処理する命令」を使おうとすると、中身がないために無視されてしまうという特性があります。

「箱は準備されているけれど、中身は空っぽ」というこの独特な感覚を覚えておきましょう。

5. リテラル表記とArrayコンストラクタの比較まとめ

5. リテラル表記とArrayコンストラクタの比較まとめ

• リテラル表記（[]）は簡単で読みやすい
• new Array(要素...)も同じ結果だが書き方に注意
• new Array(数値)は長さだけの配列になる
• IDや初期長さなど特殊な使い方でArrayコンストラクタを使う場合もある

6. 中身が空の配列を使う方法

6. 中身が空の配列を使う方法

リストに追加していくような場合は、まず空の配列を作ってあとから push する方法がおすすめです。

let list = [];
list.push("項目A");
list.push("項目B");
console.log(list);

["項目A","項目B"]

これなら途中で要素を追加してもかんたんに扱えます。

7. どっちを使えばいい？初心者におすすめは？

7. どっちを使えばいい？初心者におすすめは？

基本はリテラル表記一択でOK！

「どうしても長さだけ指定したい」など特殊な理由があるときだけ new Array(数値) を使うイメージで大丈夫です。

まとめ

まとめ

ここまでJavaScriptにおける配列の作成方法について、基礎から具体的な使い分けまで詳しく解説してきました。配列はプログラミングにおいてデータを整理するための非常に重要なツールです。特に、現場で頻繁に目にする「リテラル表記」と、特定の状況で役立つ「Arrayコンストラクタ」の違いを理解しておくことは、コードの可読性や保守性を高めるために欠かせません。

配列リテラル（[]）を優先すべき理由

モダンなJavaScript開発において、配列を作成する標準的な方法は「リテラル表記」です。その理由はシンプルで、直感的であり、実行速度の面でも有利だからです。例えば、あらかじめ中身が決まっているリストを作成する場合は、下記のように記述します。

const memberList = ["田中", "佐藤", "鈴木"];
console.log(memberList);

["田中", "佐藤", "鈴木"]

一目で「これは配列である」と認識できるため、チーム開発においてもコードの意図が伝わりやすくなります。また、空の配列からスタートして動的にデータを追加していく場合も、リテラル表記が最も一般的です。

Arrayコンストラクタを活用する場面

一方で、new Array() という書き方が全く使われないわけではありません。例えば、大量の要素を保持するための領域をあらかじめ確保しておきたい場合や、動的に配列の長さを決定したい場合には便利です。ただし、数値一つだけを引数に渡すと、その数値の数だけ「空の要素」を持つ配列が生成されるという独特の挙動には注意が必要です。

// 要素が10個ある空の配列を作成
const largeArray = new Array(10);
console.log(largeArray.length);

10

この場合、要素の中身は未定義（empty）状態となります。これをそのままループ処理（mapメソッドなど）に使うには少し工夫が必要になりますが、メモリの効率化や特定のアルゴリズムを実装する際には強力な武器となります。

配列操作の応用：データの追加と管理

配列を作成した後は、その中身を操作することが多々あります。代表的なメソッドである push を使って、後から要素を追加する流れを再確認しておきましょう。これはTODOアプリのタスク追加や、ショッピングカートのアイテム追加など、あらゆるWebアプリケーションで活用されている手法です。

const todoList = []; // まずは空で作成
todoList.push("プログラミングの学習");
todoList.push("ブログの更新");
todoList.push("買い物に行く");

console.log("現在のタスク:", todoList);

現在のタスク: ["プログラミングの学習", "ブログの更新", "買い物に行く"]

このように、まずはリテラル表記で空の配列（[]）を定義し、必要に応じてデータを詰め込んでいくスタイルが、最もエラーが少なく安全な書き方だと言えます。

まとめとしての最終アドバイス

初心者のうちは、迷わず「リテラル表記 []」を使ってください。JavaScriptの学習を進めていく中で、もし「特定の個数分だけ初期化したい」という特殊な要件が出てきたら、その時に初めて new Array() を検討すれば十分です。基本をしっかり固めることが、複雑なアプリケーション開発への近道となります。