【JavaScript】配列の初期化とは？基本的な書き方から便利な初期化パターンまで初心者向けに解説

フロントエンド開発•
JavaScript

はじめに

JavaScriptで開発を進める際、配列の扱いはとても大切です。
特に初心者の方は「配列をどうやって作成すればいいのか」「何が最適なやり方なのか」で迷うかもしれません。
しかし実務でも、初期化の仕方によってコードの可読性や保守性が大きく変わります。

そこでこの記事では、JavaScriptにおける配列の初期化を中心に解説します。
具体的なコード例とともに、リテラルやコンストラクタをはじめとした様々なパターンを幅広く取り上げるので、実際の業務で配列を使う際のヒントにしてみてください。

この記事を読むとわかること

  • JavaScriptで配列を初期化するさまざまな方法
  • 実務で役立つ配列の初期化と関連する利用シーン
  • 配列を初期化する際に気をつけたいエラーや注意点

これらを理解しておくと、JavaScriptでの開発において配列を取り扱う場面で、よりスムーズにコーディングできるようになります。

JavaScriptにおける配列とは

JavaScriptの配列は、数値や文字列などの複数の要素を一つにまとめて管理するためのデータ構造です。
一つひとつの要素にインデックス（添字）と呼ばれる番号が割り当てられ、0番目から順にアクセスできます。

配列は、実務で頻繁にデータのリストを取り扱うときに用いられます。
たとえばユーザー一覧や商品の一覧、数値の集まりなど、多数の要素をまとめて処理したい場合に最適です。
このとき、初期化の仕方がわかっているとスムーズにコードを組み立てられます。

またJavaScriptの配列は単なる連続領域ではなく、実質的にはオブジェクトの一種として扱われます。
そのため、他のプログラミング言語の配列とは内部構造が少し異なるのですが、初学者のうちは特に意識しなくても大丈夫です。
まずは、要素をどうやって入れるか（初期化）に集中してみましょう。

配列初期化の基本概念

配列の「初期化」とは、プログラムの中で配列を作成し、要素をあらかじめ割り当てる工程を指します。
JavaScriptでは、代表的に配列リテラルやArrayコンストラクタといった方法を使います。

多くの場合、配列を初期化する際に気をつけたいポイントは次の2つです。

  1. 意図したデータ型が入るようにすること
  2. 要素数や値をあらかじめ決めておくこと

これらを満たしていれば、後から追加・削除をするときも扱いやすくなります。
特に実務だと、最初から一定数のデータを入れたり、空配列を準備したりといった処理が頻繁に発生します。
この章以降では、そんなさまざまな初期化パターンを見ていきましょう。

配列リテラルを使った初期化

もっともよく使われるのが、配列リテラルによる初期化です。
[] で囲んだ中に要素をカンマ区切りで並べるだけで、簡潔に配列を作成できます。

例えば、以下のように書くことで文字列が3つ入った配列を用意できます。

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"

リテラル方式の利点は、シンプルで読みやすいことです。
実務でもよく使われる場面としては、APIから受け取ったデータを再加工する前に、あらかじめハードコードされた配列を準備するときなどが挙げられます。

もし初期値が特にない場合は [] のみで空配列を作れます。
次の例では、空の配列を用意してから値を追加していく流れを示しています。

const tasks = [];
tasks.push("企画書の作成");
tasks.push("ミーティングの準備");
console.log(tasks); // ["企画書の作成", "ミーティングの準備"]

こうした初期化のパターンは、要素数が不確定のシーンで便利です。
後から自由に要素を追加できることがJavaScriptの配列の大きな特徴でもあります。

Arrayコンストラクタを使った初期化

もう一つの代表的な方法に、Arrayコンストラクタを使うやり方があります。
new Array() あるいは Array() と書くと、配列オブジェクトを生成できます。

const numbers = new Array(5);
console.log(numbers); // [ <5 empty items> ]

上の例のように数値を1つだけ渡すと、その長さだけを持つ空配列を作成します。
この場合、要素の中身はまだ何も入っていません。

一方、複数の値を渡すと、以下のようにそれぞれが要素として割り当てられます。

const mixed = new Array("apple", 42, true);
console.log(mixed); // ["apple", 42, true]

コンストラクタ方式はほとんどの場面でリテラル方式と同じ結果を得られます。
ただし実務では、リテラルの方が簡潔で読みやすいので好まれやすいです。
それでも特定の要素数を確保したい場合や、記法に慣れているエンジニアが使うこともあります。

lengthプロパティで要素数を指定して初期化

Arrayコンストラクタを使う際、要素数を指定するだけで配列を作れるという特徴があります。
例えば new Array(10) と書くと、長さ10の空の配列領域が用意されますが、各要素には値がありません。

実務では「決まった数の要素をあらかじめ確保しておきたい」というケースがあります。
たとえばファイルの行データを順番に読み込むための領域を用意しておく場合などです。

とはいえ、JavaScriptの場合は動的に配列が拡張されるので、最初から長さを指定しなくても支障がないことの方が多いです。
一方で必要以上に大きな配列を用意してしまうと無駄が発生しやすいので、要件を考慮して使い分けましょう。

次の例では length プロパティを使って、あとから配列の長さを変更することもできます。

const items = [];
items.length = 5;
console.log(items); // [ <5 empty items> ]

要素が定義されていない状態となるため、ループなどで回すときは注意が必要です。
意図しないエラーが発生しないように、あらかじめ値を埋めるか、個別に要素を確認してから使用します。

スプレッド構文を使った応用的な初期化

JavaScriptでは、スプレッド構文（...）を使うことで配列を柔軟に扱えます。
すでにある配列の要素を展開して、新しい配列を初期化することが簡単にできます。

たとえば、次のように既存の配列をコピーしながら新しい配列を初期化できます。

const baseArray = [1, 2, 3];
const newArray = [...baseArray, 4, 5, 6];
console.log(newArray); // [1, 2, 3, 4, 5, 6]

このように書くと、元の配列 baseArray の要素をすべて展開したうえで、新しい要素を追加して初期化できます。
スプレッド構文を使うと、元の配列を破壊しない形で新しい配列を作れるのが便利です。

他にも、複数の配列を結合して初期化したいときにも役立ちます。

const arrayA = [10, 20];
const arrayB = [30, 40];
const merged = [...arrayA, ...arrayB];
console.log(merged); // [10, 20, 30, 40]

実務のシーンでは、複数のAPIレスポンスをまとめたり、配列に追加のデータを結合するといった場面でよく使われます。
スプレッド構文を使うだけで、新しく作る配列にいろいろな要素を柔軟に入れられるのは大きなメリットです。

多次元配列の初期化方法

要素として別の配列を持たせることで、多次元配列を作ることも可能です。
特に「縦と横」のように2次元以上の構造を必要とするときに使われます。

例として、2次元配列を初期化してみましょう。

const matrix = [
  [1, 2],
  [3, 4],
];
console.log(matrix[0][0]); // 1
console.log(matrix[1][1]); // 4

このように、配列リテラルを入れ子にすることで、多次元配列が実現できます。
配列の中にさらに配列を入れるイメージです。

実務で2次元配列を扱うシーンには、表形式のデータを一時的に格納して処理するときなどがあります。
たとえば表の行列操作や、座標系を扱うロジックを組むときにも用いられます。

ただし、あまり複雑な多次元配列を扱うと可読性が下がるので注意が必要です。
もし要素数が多くなりすぎるときは、オブジェクトなど別のデータ構造も検討しましょう。

連想配列（オブジェクト）との違い

初学者の中には、キーと値のペアでデータを扱いたいときにも配列を使おうとする人がいます。
しかしJavaScriptでは、連想配列と呼ばれる仕組みはなく、オブジェクトを代わりに使います。

const user = {
  name: "Alice",
  age: 25,
};

上記のように、中括弧 {} を使って定義するのが一般的です。
一方、配列は 0 や 1 など、連続したインデックスを想定しています。

実務の場面でも、オブジェクトを使えばuser.nameのようにアクセスしやすいメリットがあります。
配列は同種の要素をまとめておきたい場合に向いているため、両者は使い分けが重要です。

もし「文字列をキーとして値を格納したい」のであれば、オブジェクトやMapなどを活用しましょう。
こうすることで、配列には配列の、オブジェクトにはオブジェクトの得意領域を与えることができます。

実務シーンで使う配列初期化例

システム開発の現場では、配列を初期化してから素早く要素を操作したいケースが多々あります。
たとえば、フォームの入力値を配列に格納して一括で処理するシチュエーションを考えてみましょう。

function collectFormData() {
  const formData = ["Tanaka", "test@example.com", "日本"]; 
  // 上記はダミーとして初期化した値を入れておき、
  // 実際はフォームから取得した値に置き換えることが多い

  // ここでformDataを検証したり、サーバーへ送ったりする
  return formData;
}

ここでは、配列リテラルを使って最初からいくつかのデータを配置し、他の処理で読み込む流れが想定されます。
また、テストデータなどをあらかじめ用意しておくときにもこのような初期化が便利です。

さらに、一定の要素数が決まっている場合は new Array(10) のように領域だけ確保し、あとから値を入れ替えるやり方もあります。
ただし、JavaScriptは基本的に動的に要素数が増減するため、必須でなければリテラル方式を中心に考えるとよいでしょう。

配列の初期値は実務でとても重要な意味を持ちます。必要に応じてデフォルトの値を設定することで、あとで誤った操作を防ぐ手がかりになるからです。

配列初期化とメモリの扱い

JavaScriptの配列は他言語に比べて自由度が高い一方、メモリの管理面では注意が必要です。
配列に大量のデータを詰め込みすぎると、アプリケーションの動作が遅くなることがあります。

初期化の段階で無駄に大きな配列を作るのも、パフォーマンスに影響する要因となり得ます。
ただしJavaScriptはガベージコレクションを持つので、メモリを直接管理する必要はありません。

基本的には、必要な分だけ配列を用意し、それ以外はこまめに要素を消去していけば問題ありません。
それでも大規模データを扱う場合は、サーバーサイドで分割して取得するなどの工夫をするのが一般的です。
このあたりは使用するフレームワークやAPIの仕様と連携して考えることになるでしょう。

配列初期化時に陥りがちなエラー

初心者によくあるのが、「配列を作成したつもりが、実は中身がなかった」というパターンです。
たとえば const arr = []; と書いたつもりが const arr = {}; になっていて、オブジェクトを作ってしまうケースがあります。

このような初期化ミスに気づかないと、メソッドが存在しないというエラーが出る場合があります。

また、new Array(3) のように長さだけを指定した配列を使うときは注意が必要です。
未定義の要素が含まれるので、map や forEach を使ったときに意図通りに動作しないことがあります。

const arr = new Array(3);
arr.forEach((item) => {
  console.log(item);
});
// 何も表示されない

もし、しっかり要素を用意する必要があるなら、次のような方法を使いましょう。

const arr = new Array(3).fill(null); 
// あるいは fill(0) などで配列を埋める
console.log(arr); // [null, null, null]

これで、配列の各要素が明確に null で初期化されます。
実務でも、あらかじめ null や "" といったデフォルト値で初期化しておくと、後々のデバッグが楽になることがあります。

他のデータ構造との比較

配列以外にも、JavaScriptにはさまざまなデータ構造があります。
たとえばオブジェクト、Set、Mapなどが挙げられます。
配列を初期化するよりも、これらを使った方が理解しやすい場合もあるでしょう。

  • Set：重複しない集合を扱いたい場合
  • Map：キーと値のペアを管理したい場合
  • WeakMap / WeakSet：ガベージコレクションの扱いを最適化したい場合

これらの構造体の初期化も、目的に応じて簡単に行えます。
しかし、一般的に「順序付きの要素群」を扱うなら配列が最優先で検討されます。
実務でも、データを順番に処理するようなシーンが圧倒的に多いからです。

配列の初期化と合わせて、こうした他のデータ構造を知っておくと、最適な選択をしやすくなります。
特に初心者の方は、まずは配列に慣れてから段階的に他の仕組みに触れると良いでしょう。

よく使う配列メソッドと初期化の組み合わせ

初期化した直後に、いくつかの配列メソッドを利用する場面もあります。
たとえば、空の配列を用意してから要素を追加したり、フィルタリングして別の配列を作ったりするケースです。

以下のように push で要素を追加した後、filter を使って条件に合致する要素だけを取り出す例を考えてみます。

const scores = [];
scores.push(80, 45, 78, 90, 35, 100);

// たとえば50点未満を抜き出す
const lowScores = scores.filter((score) => score < 50);
console.log(lowScores); // [45, 35]

このように、初期化 ⇒ メソッドによる操作 という流れは実務で非常によく出てきます。
とくに新規に配列を作ったあと、条件に合う要素だけ別の配列にまとめたり、map で別の形式に変換するといった処理が頻繁に起こるでしょう。

初期化をどう行うかを把握しておくと、これらの操作もスムーズになります。
扱う要素数や操作の種類によっては、最初から入れる要素の形を決めておく方が効率的な場合もあるからです。

実務でのメリットと課題

JavaScriptの配列初期化には以下のようなメリットがあります。

  • 直感的に書ける
  • 必要に応じて動的に要素数を変更できる
  • 多彩な初期化パターンがあり、さまざまなシーンに対応可能

一方で課題もいくつか存在します。
たとえば、要素数が増えすぎると検索や操作に時間がかかる場合があること、または未定義の要素が混在してしまうとバグの温床になることなどです。

配列の利用範囲が広くなるにつれて、データの構造や扱い方が複雑になるケースもあります。必要に応じてオブジェクトやMapなどの他のデータ構造と併用して、コードを整理することを考えてみましょう。

こうした課題も、基本的には配列の初期化や運用方法をしっかり理解していれば回避できることが多いです。
実務ではチーム開発が増えるため、配列の使い方を統一しておくと混乱を減らすことにもつながります。

まとめ

ここまで、JavaScriptにおける配列の初期化を中心にさまざまな手法とポイントを見てきました。

配列リテラルやArrayコンストラクタ、スプレッド構文など、多彩な初期化パターンが存在します。
それぞれの方法にはメリットと注意点があるため、実務で使うときは要件に合わせて最適な手段を選びましょう。

  • 配列リテラル：シンプルに書けるので最も多用される
  • Arrayコンストラクタ：要素数を指定して領域を確保したいときに有用
  • スプレッド構文：配列を合体したりコピーしたり、柔軟に操作できる

また、配列を初期化するときに未定義の要素を放置すると、予期せぬエラーやバグが起こりがちです。
必要に応じて fill や既定値の設定を活用し、明示的に意図を示しておくと安心です。

最後に、配列の初期化はあくまでも入り口であり、その後には要素の追加や削除、ソート、フィルタリングなど多くの操作が続きます。
しっかりと初期段階での方針を固めておけば、開発の効率が上がり、保守性の高いコードを書くことができます。

以上を参考に、JavaScriptで配列を活用する際の第一歩として、ぜひ自分のプロジェクトでも実践してみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説