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

先生と生徒の会話形式で理解しよう

生徒

「先生、配列ってどうやって作るんですか？いくつか要素をまとめたいときに便利って聞きました！」

先生

「いい指摘です。JavaScriptでは主に二つの作り方があります。見た目も使い方も違うので、それぞれ見ていきましょう！」

生徒

「どっちを使えばいいんですか？」

先生

「初心者にはリテラル表記がわかりやすいですが、場合によってはArrayコンストラクタも使いますよ。」

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

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

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

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


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


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

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

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


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


[10,20,30]

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

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


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


[ <5 empty items> ]
5

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

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


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


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

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

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

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