【初心者向け】JavaScript配列の初期化 - 3つの基本パターン

JavaScript配列の作り方で迷ったことありませんか？

「配列ってどうやって作るの？」「[]とnew Array()って何が違うの？」「どの方法を使えばいいの？」

こんな疑問を持ったことがあるなら、この記事がお役に立てるはずです。

JavaScriptには配列を作る方法がいくつかありますが、実はそれぞれに特徴があります。 正しい作り方を覚えると、効率的で読みやすいコードが書けるようになるんです。

この記事では、JavaScript配列の初期化について3つの基本パターンを中心に、実践的な使い方まで詳しく解説していきます。 初心者の方でも分かりやすく、実際のコード例をたくさん使って説明しますので、ぜひ最後まで読んでみてくださいね！

JavaScript配列の基本を理解しよう

配列って何？

配列は、複数の値をまとめて管理できる便利な箱のようなものです。

例えば、買い物リストを作るとき。 メモ帳に「りんご、バナナ、オレンジ」と書きますよね？ 配列も同じように、複数のアイテムを順番に並べて保存できます。

// 買い物リストを配列で作ってみます
const shoppingList = ['りんご', 'バナナ', 'オレンジ'];

この配列には3つの果物が入っています。 それぞれの位置（インデックス）は0から始まり、shoppingList[0]で「りんご」を取得できます。

JavaScriptの配列の特徴

JavaScriptの配列は他の言語と比べてとても柔軟です。

// いろんな種類のデータを混ぜて入れられます
const mixedArray = [
    'こんにちは',        // 文字列
    42,                  // 数値
    true,               // 真偽値
    { name: '田中' }    // オブジェクト
];

console.log(mixedArray);

このコードを実行すると、異なるタイプのデータが一つの配列に入っているのが分かります。 他の言語では「数値は数値だけ」といった制限がありますが、JavaScriptは自由度が高いんです。

配列は自動的にサイズが調整されます。

const fruits = [];  // 空の配列からスタート
console.log('最初の長さ:', fruits.length);  // 0

fruits.push('りんご');
console.log('追加後の長さ:', fruits.length);  // 1

最初は空っぽでも、要素を追加すると自動的に大きくなってくれます。 とても便利ですよね！

パターン1: リテラル記法（一番基本的な方法）

角括弧[]を使った作り方

リテラル記法は、角括弧[]を使って配列を作る方法です。 これが最も基本的で、みんながよく使う方法ですね。

// 空の配列を作る
const emptyArray = [];

// 最初から値が入った配列を作る
const fruits = ['りんご', 'バナナ', 'オレンジ'];
const numbers = [1, 2, 3, 4, 5];

とてもシンプルですよね？ 角括弧の中に、カンマで区切って値を並べるだけです。

空の配列を作って、後から要素を追加することもできます。

const todoList = [];  // 空の配列からスタート

// 後から追加していく
todoList.push('買い物');
todoList.push('掃除');
todoList.push('勉強');

console.log(todoList);  // ['買い物', '掃除', '勉強']

このコードでは、最初に空の配列を作って、pushメソッドで一つずつ要素を追加しています。 pushは配列の最後に新しい要素を追加するメソッドです。

実際の使用例

リテラル記法は日常的なプログラミングでよく使います。

// ユーザー権限の設定
const userRoles = ['管理者', '編集者', '閲覧者'];

// 設定値の管理
const config = {
    enabledFeatures: ['ダークモード', '通知', '自動保存'],
    supportedLanguages: ['日本語', '英語', '中国語'],
    defaultSettings: [true, false, true]
};

// メニューアイテムの作成
const navigationMenu = [
    { name: 'ホーム', url: '/' },
    { name: '記事一覧', url: '/articles' },
    { name: 'お問い合わせ', url: '/contact' }
];

この例では、ユーザー権限、設定値、メニューアイテムなど、様々な用途でリテラル記法を使っています。 どれも読みやすくて、何が入っているかすぐに分かりますね。

リテラル記法のメリット

なぜリテラル記法がおすすめなのでしょうか？

• 読みやすい: 何が入っているか一目で分かる
• 書きやすい: コードが短くてシンプル
• 速い: パフォーマンスが良い
• 安全: 予期しない問題が起きにくい

特に、小さな配列や明確な初期値がある場合は、迷わずリテラル記法を選びましょう。

パターン2: Arrayコンストラクタ

new Array()を使った作り方

Arrayコンストラクタは、new Array()を使って配列を作る方法です。

// 空の配列を作る（リテラル記法と同じ結果）
const emptyArray = new Array();

// 特定のサイズの空の配列を作る
const fixedSizeArray = new Array(5);
console.log(fixedSizeArray);  // [empty × 5]
console.log(fixedSizeArray.length);  // 5

この例では、サイズが5の配列を作りました。 中身は空っぽですが、長さは5になっています。

初期値を指定することもできます。

// 初期値を指定して配列を作る
const fruits = new Array('りんご', 'バナナ', 'オレンジ');
console.log(fruits);  // ['りんご', 'バナナ', 'オレンジ']

注意が必要なポイント

Arrayコンストラクタにはちょっとした落とし穴があります。

// 数値1つだけを渡すと「サイズ」として解釈される
const sizeArray = new Array(3);     // サイズ3の空配列
const valueArray = new Array('3');  // ['3'] という文字列要素1つの配列

console.log(sizeArray);   // [empty × 3]
console.log(valueArray);  // ['3']

new Array(3)は「3という値が入った配列」ではなく、「サイズが3の空配列」になります。 これは初心者の方がよく間違えるポイントですね。

もし「3という値が入った配列」を作りたいなら、こうします。

// 値として3を入れたい場合
const correctArray = [3];           // リテラル記法
const alsoCorrect = Array.of(3);    // Array.ofメソッド

console.log(correctArray);  // [3]
console.log(alsoCorrect);   // [3]

Arrayコンストラクタが便利な場面

では、いつArrayコンストラクタを使うのでしょうか？

特定のサイズの配列を作って、同じ値で埋めたい場合に便利です。

// サイズ10の配列を0で埋める
const zeroArray = new Array(10).fill(0);
console.log(zeroArray);  // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

// サイズ5の配列をデフォルト値で埋める
const defaultValues = new Array(5).fill('未設定');
console.log(defaultValues);  // ['未設定', '未設定', '未設定', '未設定', '未設定']

この方法なら、大きなサイズの配列も効率的に作れます。

実用的な例を見てみましょう。

// ゲームのスコアボードを初期化
function initializeScoreboard(playerCount) {
    return new Array(playerCount).fill(0);
}

const scores = initializeScoreboard(4);
console.log(scores);  // [0, 0, 0, 0]

// プレイヤー1のスコアを更新
scores[0] = 100;
console.log(scores);  // [100, 0, 0, 0]

この例では、プレイヤー数に応じてスコアボードを作成しています。 動的なサイズで配列を作りたい場合に、Arrayコンストラクタが活躍します。

パターン3: Array.fromメソッド

Array.fromって何？

Array.fromは、他のオブジェクトから配列を作るメソッドです。 文字列、NodeList、Setなど、様々なオブジェクトを配列に変換できます。

// 文字列から配列を作る
const letters = Array.from('Hello');
console.log(letters);  // ['H', 'e', 'l', 'l', 'o']

// 日本語でも同じように
const japanese = Array.from('こんにちは');
console.log(japanese);  // ['こ', 'ん', 'に', 'ち', 'は']

文字列の各文字が配列の要素になりました。 一文字ずつ分解したい時に便利ですね。

DOM要素を配列に変換

Web開発でよく使うのが、DOM要素の変換です。

// HTMLの要素を取得（NodeListが返される）
const buttons = document.querySelectorAll('button');

// NodeListを配列に変換
const buttonArray = Array.from(buttons);

// これで配列のメソッドが使えるように！
buttonArray.forEach(button => {
    button.addEventListener('click', () => {
        console.log('ボタンがクリックされました');
    });
});

querySelectorAllで取得したNodeListは配列のようですが、実は配列ではありません。 Array.fromで変換することで、forEachやmapなどの配列メソッドが使えるようになります。

計算で配列を作る

Array.fromの本当の魅力は、計算で配列を作れることです。

// 1から10までの数列を作る
const sequence = Array.from({length: 10}, (_, index) => index + 1);
console.log(sequence);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 偶数だけの配列を作る
const evenNumbers = Array.from({length: 5}, (_, index) => (index + 1) * 2);
console.log(evenNumbers);  // [2, 4, 6, 8, 10]

この例では、{length: 10}で「長さ10の配列風オブジェクト」を作り、第二引数の関数で各要素の値を計算しています。

_は使わない引数を表す慣例的な書き方で、indexが実際のインデックス番号です。

実用的な使用例

Array.fromは複雑なデータ処理でも活躍します。

// ユーザーIDのリストを作る
function createUserIds(count) {
    return Array.from({length: count}, (_, index) => ({
        id: index + 1,
        name: `ユーザー${index + 1}`,
        status: 'inactive'
    }));
}

const users = createUserIds(3);
console.log(users);
// [
//   { id: 1, name: 'ユーザー1', status: 'inactive' },
//   { id: 2, name: 'ユーザー2', status: 'inactive' },
//   { id: 3, name: 'ユーザー3', status: 'inactive' }
// ]

このように、Array.fromを使えば複雑なオブジェクトの配列も簡単に作れます。

SetやMapからの変換も簡単です。

// 重複を削除した配列を作る
const numbers = [1, 2, 2, 3, 3, 3, 4];
const uniqueNumbers = Array.from(new Set(numbers));
console.log(uniqueNumbers);  // [1, 2, 3, 4]

Setは重複を自動的に削除するので、Array.fromと組み合わせると重複削除が簡単にできます。

3つの方法の使い分け

どの方法を選べばいい？

ここまで3つの方法を学びましたが、どれを使えばいいか迷いますよね？

簡単な選び方をご紹介します。

小さな配列・決まった値がある場合

// ✅ リテラル記法がおすすめ
const colors = ['赤', '青', '緑'];
const settings = [true, false, true];

同じ値で埋めたい場合

// ✅ Arrayコンストラクタ + fill
const zeros = new Array(10).fill(0);
const defaults = new Array(5).fill('デフォルト');

計算で作りたい場合

// ✅ Array.from
const sequence = Array.from({length: 5}, (_, i) => i * 2);
const userList = Array.from({length: 3}, (_, i) => `user${i + 1}`);

他のオブジェクトから変換したい場合

// ✅ Array.from
const chars = Array.from('hello');
const uniqueItems = Array.from(new Set(duplicateArray));

パフォーマンスの違い

実際の速度も気になりますよね？

一般的には以下の順序で速いです：

1. リテラル記法 - 最も高速
2. Arrayコンストラクタ - 中程度
3. Array.from - やや低速（でも実用上問題なし）

ただし、数千個以上の大きな配列でないと差は感じられません。 普通の使い方なら、速度より「読みやすさ」を重視して選んでください。

よくある間違いと注意点

間違い1: Arrayコンストラクタの引数

初心者の方がよく間違えるパターンです。

// ❌ 間違った理解
const wrongArray = new Array(3);
console.log(wrongArray[0]);  // undefined（3ではない！）

// ✅ 正しい理解
const rightArray = [3];        // 値として3を入れる
const alsoRight = Array.of(3); // Array.ofを使う

new Array(3)は「3という値」ではなく「サイズ3の空配列」を作ります。 これは本当によくある間違いなので、注意してくださいね。

間違い2: fillでオブジェクトを使う

オブジェクトをfillで埋める時の落とし穴です。

// ❌ 危険な例（全部同じオブジェクトを参照）
const wrongUsers = new Array(3).fill({ name: '' });
wrongUsers[0].name = '田中';
console.log(wrongUsers);  // 全部が '田中' になってしまう！

// ✅ 正しい方法（それぞれ独立したオブジェクト）
const rightUsers = Array.from({length: 3}, () => ({ name: '' }));
rightUsers[0].name = '田中';
console.log(rightUsers);  // 最初だけが '田中' になる

fillでオブジェクトを使うと、全ての要素が同じオブジェクトを参照してしまいます。 一つを変更すると全部変わってしまうので、要注意です。

間違い3: 空のスロット

Arrayコンストラクタで作った配列には「空のスロット」があります。

const sparseArray = new Array(3);
console.log(sparseArray);  // [empty × 3]

// mapが期待通りに動かない
const mapped = sparseArray.map((_, index) => index);
console.log(mapped);  // [empty × 3]（変化なし）

// Array.fromなら期待通りに動く
const dense = Array.from({length: 3}, (_, index) => index);
console.log(dense);  // [0, 1, 2]

空のスロットはmapやforEachでスキップされてしまいます。 確実に処理したい場合は、Array.fromを使いましょう。

まとめ

JavaScript配列の初期化について、3つの基本パターンを学びました。

覚えておきたいポイント：

• 小さな配列: []（リテラル記法）
• 同じ値で埋める: new Array(size).fill(value)
• 計算で作る: Array.from({length}, callback)
• 変換する: Array.from(iterable)

避けたい間違い：

• new Array(3)を値3だと思う
• fillでオブジェクトを使う
• 空スロットの存在を忘れる

配列の初期化は、JavaScript開発の基礎中の基礎です。 正しい方法を覚えることで、バグが少なく読みやすいコードが書けるようになります。

ぜひ今日学んだ内容を、実際のコードで試してみてください！ 小さなプロジェクトから始めて、徐々に複雑な配列操作にチャレンジしていけば、きっとスキルアップできますよ。