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

1. 配列とは？初心者にやさしい説明

1. 配列とは？初心者にやさしい説明

配列（Array）は、複数の値を順番にまとめて保存できる箱のようなものです。たとえば買い物リストや、好きな映画のタイトルを何件もいっぺんに扱いたいときに使います。

一つの箱（変数）に、りんご、バナナ、みかん…と複数の要素を順序を保持して保存できる便利な構造です。

2. リテラル表記で配列を作る

2. リテラル表記で配列を作る

JavaScriptで最もよく使われる方法が「リテラル表記」です。角かっこ [] を使って簡単に作れます。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits);

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

この書き方は見た目が直感的で、初心者にもわかりやすいです。

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

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

もうひとつのやり方が new Array() を使う方法です。こちらは「Arrayコンストラクタ」というしくみを使います。

let numbers = new Array(10, 20, 30);
console.log(numbers);

[10,20,30]

この書き方も角かっこと同様に配列を作れますが、要素を後から追加などするときは少しややこしくなることがあります。

4. 長さだけ指定すると何が起きる？

4. 長さだけ指定すると何が起きる？

Arrayコンストラクタでは「数値だけ渡す」ことで、指定した長さの空の配列を作ることができます。

let arr = new Array(5);
console.log(arr);
console.log(arr.length);

[ <5 empty items> ]
5

これは要素がundefinedのまま並んでいる配列です。中身は空でも、箱だけ作っておくイメージです。

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() を検討すれば十分です。基本をしっかり固めることが、複雑なアプリケーション開発への近道となります。