【実例10選】JavaScriptで配列を初期化する手法を徹底的に解説してみる

はじめに

JavaScriptにおける配列の初期化は、プログラミングの基本中の基本です。

配列を適切に初期化することで、データの管理や操作がスムーズになり、コードの可読性も向上します。

しかし、初心者にとっては配列の初期化方法が多岐にわたるため、どの方法を使えばよいのか迷ってしまうこともあるでしょう。

○この記事で学べること

本記事では、JavaScriptにおける配列の初期化方法を、初心者にもわかりやすく丁寧に解説します。

空の配列の作成から、初期値を持つ配列の作成、さらには高度な初期化手法まで、実際のコード例を交えながら詳しく説明していきます。

また、配列の初期化を応用したプロジェクト例や、よくあるエラーとその対処法なども紹介。

この記事を読み終えれば、JavaScriptでの配列初期化に自信が持てるはずです。

○配列とは？

配列とは、複数のデータを順序付けて格納するためのデータ構造です。

JavaScriptにおいて、配列は非常に重要な役割を果たします。

配列を使うことで、同じ種類のデータを一つの変数にまとめて管理できるため、コードがスッキリし、データ操作も容易になります。

配列の各要素には、インデックス（添字）と呼ばれる番号が割り当てられ、このインデックスを使って個々の要素にアクセスします。

●配列の基本的な初期化

それでは、配列の初期化方法について見ていきましょう。

まずは、最も基本的な初期化方法である、空の配列の作成と、特定の長さを持つ配列の作成から始めます。

○サンプルコード1：空の配列を作る

JavaScriptで空の配列を作成するには、大別して2つの方法があります。

1つ目は配列リテラル [] を使う方法、2つ目は Array コンストラクタを使う方法です。

// 配列リテラルを使って空の配列を作成
const emptyArray1 = [];

// Arrayコンストラクタを使って空の配列を作成
const emptyArray2 = new Array();

実行結果としては、どちらの方法で作成した配列も同じように空の配列となります。

console.log(emptyArray1); // []
console.log(emptyArray2); // []

配列リテラルを使う方法は簡潔で読みやすいため、一般的にはこちらが好まれる傾向にあります。

一方、Array コンストラクタを使う方法は、配列の長さを引数で指定できるという特徴があります。

●初期値を持つ配列の作成方法

配列を作成する際、初期値を設定することができます。初期値とは、配列の各要素に最初から割り当てられている値のことです。

初期値を設定しておくことで、後から要素を個別に追加する必要がなくなり、コードが簡潔になります。

○サンプルコード3：初期値が同じ配列

もっとも簡単な方法は、配列リテラルの中に初期値を直接記述することです。

// 全ての要素が0で初期化された配列
const initialArray1 = [0, 0, 0, 0, 0];

// 全ての要素が'hello'で初期化された配列 
const initialArray2 = ['hello', 'hello', 'hello', 'hello', 'hello'];

実行結果としては直下のようになります。

console.log(initialArray1); // [0, 0, 0, 0, 0]
console.log(initialArray2); // ['hello', 'hello', 'hello', 'hello', 'hello']

このように、配列リテラル内に直接初期値を記述すれば、全ての要素に同じ値を設定した配列を作ることができます。

ただし、要素数が多くなるとコードが長くなってしまう点に注意が必要です。

○サンプルコード4：異なる初期値で配列を作る

配列の各要素に異なる値を設定したい場合は、どうすればよいでしょうか。

この場合は、Array コンストラクタを使う方法が便利です。

const mixedArray = new Array(1, 'hello', true, null, { name: 'John' });

実行結果は直下のようになります。

console.log(mixedArray); // [1, 'hello', true, null, { name: 'John' }]

Array コンストラクタの引数に初期値を設定することで、要素ごとに値を変えることができます。値の型も問わず、数値、文字列、真理値、オブジェクトなど、さまざまな値を混在させることができるのが特徴です。

ただし、このようにコンストラクタを使って初期化する場合、配列の要素数を動的に変更することはできません。

要素数が可変になるような場合は、Array.prototype.push() メソッドなどを使って、後から要素を追加する必要があります。

●高度な初期化手法

ここからは、より高度な配列の初期化手法について見ていきましょう。

Array.from() メソッドや Array.fill() メソッドを使うことで、より効率的に配列を初期化することができます。

○サンプルコード5：Array.fromを使用した初期化

Array.from() メソッドは、配列のようなオブジェクト（array-like object）や反復可能なオブジェクト（iterable object）から、新しい配列を作成するためのメソッドです。

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

// 指定した長さの配列を作成し、各要素をインデックスの2乗で初期化 const arrayFromLength = Array.from({ length: 5 }, (_, i) => i ** 2); console.log(arrayFromLength); // [0, 1, 4, 9, 16]

実行結果としては、文字列 ‘Hello’ から各文字を要素とする配列 [‘H’, ‘e’, ‘l’, ‘l’, ‘o’] が作成されます。

また、{ length: 5 } のようなオブジェクトを渡すことで、指定した長さの配列を作成することもできます。

この際、第2引数にマッピング関数を渡せば、各要素を任意の値で初期化できます。

上記の例では、インデックス i の2乗を各要素の初期値としています。

○サンプルコード6：Array.fillを利用した詳細

Array.fill() メソッドは、配列の指定した範囲のすべての要素を、特定の値で埋めるためのメソッドです。

// 長さ5の配列を作成し、全ての要素を0で初期化 const filledArray1 = new Array(5).fill(0); console.log(filledArray1); // [0, 0, 0, 0, 0]

// インデックス1から3までの要素を'hello'で上書き const filledArray2 = [1, 2, 3, 4, 5]; filledArray2.fill('hello', 1, 4); console.log(filledArray2); // [1, 'hello', 'hello', 'hello', 5]

実行結果としては、まず new Array(5) で長さ5の配列を作成し、fill(0) でその全ての要素を0で初期化しています。

また、既存の配列 [1, 2, 3, 4, 5] に対して、インデックス1から4までの要素（4は含まない）を ‘hello’ で上書きしています。

Array.fill() を使えば、配列の特定の範囲を同じ値で埋めることができるので、初期化処理が非常にシンプルになります。

ただし、fill() は既存の配列を変更してしまうため、元の配列を保持しておきたい場合は、slice() などで配列をコピーしてから使うのがよいでしょう。

●配列の初期化を応用したプロジェクト例

ここまで、JavaScriptにおける配列の初期化方法を詳しく見てきました。

では、実際のプロジェクトでどのように配列の初期化が活用されているのでしょうか。

ここでは、小規模プロジェクトと大規模データの操作という2つの観点から、配列の初期化を応用した例を見ていきます。

○サンプルコード7：小規模プロジェクトでの利用例

小規模なプロジェクトでは、配列の初期化はデータの整理やUI表示の制御などに使われることが多いです。

例えば、あるオンラインショップのカート機能を実装するとします。

このとき、カート内の商品データを配列で管理すると便利です。

// カート内の商品データを配列で管理
let cartItems = [];

// カートに商品を追加する関数
function addToCart(item) {
  cartItems.push(item);
  console.log(`${item.name}をカートに追加しました。`);
  console.log(`現在のカート: ${cartItems.map(item => item.name).join(', ')}`);
}

// 商品データ
const item1 = { id: 1, name: 'Tシャツ', price: 1000 };
const item2 = { id: 2, name: 'ジーンズ', price: 5000 };
const item3 = { id: 3, name: 'スニーカー', price: 8000 };

// カートに商品を追加
addToCart(item1);
addToCart(item2);
addToCart(item3);

実行結果としては、下記のようなログが出力されます。

Tシャツをカートに追加しました。
現在のカート: Tシャツ
ジーンズをカートに追加しました。
現在のカート: Tシャツ, ジーンズ
スニーカーをカートに追加しました。
現在のカート: Tシャツ, ジーンズ, スニーカー

このように、商品データを配列で管理することで、カートへの追加や表示がスムーズに行えます。

配列の操作メソッドである push() や map()、join() などを活用することで、コードも簡潔に書けるのが利点です。

このほかにも、フォームの入力値のバリデーションチェックや、グラフの描画データの準備など、小規模プロジェクトでは配列が活躍する場面が数多くあります。

○サンプルコード8：大規模データの操作

大規模なデータを扱うプロジェクトでは、配列の初期化はパフォーマンスに大きな影響を与えます。

特に、大量のデータを配列に格納する際は、Array コンストラクタや Array.from() などを使って初期化すると、処理速度が大幅に向上します。

// 100万件のダミーデータを格納する配列を初期化
const dataArray = new Array(1000000);

// Array.from()とマッピング関数を使って配列を初期化
const dataArrayFromMapping = Array.from({ length: 1000000 }, (_, i) => ({
  id: i,
  name: `User ${i}`,
  email: `user${i}@example.com`,
}));

console.log(dataArrayFromMapping[0]); // { id: 0, name: 'User 0', email: 'user0@example.com' }
console.log(dataArrayFromMapping[999999]); // { id: 999999, name: 'User 999999', email: 'user999999@example.com' }

実行結果としては、100万件のダミーデータが格納された配列が作成されます。

Array.from() とマッピング関数を使えば、各要素を任意のオブジェクトで初期化することができます。に応じて適切な初期化手法を選択し、無駄のないデータ構造を設計することが求められます。

●よくあるエラーと対処法

JavaScriptで配列を扱う際には、些細な間違いからエラーが発生することがあります。

ここでは、配列の初期化に関連したよくあるエラーと、その対処法を見ていきましょう。

○エラー1：タイプミスによるundefinedエラー

配列の要素にアクセスする際、インデックスを間違えて指定すると undefined が返ってきます。

これはエラーではありませんが、意図しない動作につながる可能性があります。

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[3]); // undefined

実行結果としては、存在しないインデックス3の要素にアクセスしようとしているため、undefined が返ってきます。

対処法としては、配列の要素数を超えるインデックスを指定していないか、十分に確認することが重要です。

配列の length プロパティを活用して、要素数を把握しておくのも有効な方法です。

○エラー2：配列サイズの誤計算

配列のサイズを計算する際に、オフバイワンエラーが発生することがあります。

これは、配列のインデックスが0から始まることが原因です。

const numbers = [1, 2, 3, 4, 5];
for (let i = 1; i <= numbers.length; i++) {
  console.log(numbers[i]);
}

実行結果としては、下記のようなエラーが発生します。

2
3
4
5
undefined

ループの開始インデックスを1にしてしまったため、最後の要素が undefined になっています。

対処法としては、配列のインデックスが0から始まることを意識し、ループの開始と終了条件を適切に設定することが大切です。

上記のコードであれば、次のように修正します。

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

○エラー3：不適切な初期値の使用

配列の初期化時に、不適切な値を設定してしまうと、予期せぬ動作を引き起こすことがあります。

const numbers = [1, 2, 3, 4, 5];
numbers.length = 10;
console.log(numbers); // [1, 2, 3, 4, 5, <5 empty items>]

実行結果としては、配列の長さを10に変更していますが、実際には5つの要素に加えて、5つの空の要素（<5 empty items>）が追加されています。

これは、配列の length プロパティを直接変更しても、実際の要素は追加されないためです。

対処法としては、長さを変更する際は Array.prototype.push() や Array.prototype.splice() などのメソッドを使って、明示的に要素を追加・削除するようにしましょう。

const numbers = [1, 2, 3, 4, 5];
numbers.push(6, 7, 8, 9, 10);
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

配列を適切に初期化し、正しくサイズを計算することで、これらのエラーを回避することができます。

●JavaScriptの配列操作の深堀り

JavaScriptの配列は非常に柔軟で、多彩なメソッドが用意されています。

ここでは、配列の操作をさらに深掘りして、より実践的なテクニックを身につけましょう。

○サンプルコード9：配列の動的な変更

JavaScriptの配列は、要素の追加や削除を動的に行うことができます。

例えば、Array.prototype.push() や Array.prototype.pop() を使えば、配列の末尾に要素を追加したり、削除したりできます。

const fruits = ['apple', 'banana'];
console.log(fruits); // ['apple', 'banana']

fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

const lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']

実行結果としては、まず fruits 配列に 'orange' が追加され、['apple', 'banana', 'orange'] となります。

続いて pop() メソッドで末尾の要素が取り出され、lastFruit に 'orange' が代入されます。最終的に fruits 配列は ['apple', 'banana'] に戻ります。

このように、push() や pop() を使うことで、配列を動的に変更できます。

他にも、shift() や unshift() を使えば、配列の先頭に要素を追加・削除することもできます。

○サンプルコード10：複雑なデータ構造の操作

実際のプロジェクトでは、配列の中にオブジェクトが入ったり、配列が入れ子になったりと、複雑なデータ構造を扱うことが少なくありません。

そのようなケースでは、Array.prototype.map() や Array.prototype.filter() などの高階関数を活用すると便利です。

const users = [
  { id: 1, name: 'John', age: 20 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 30 },
];

// 全ユーザーの名前を取得
const userNames = users.map(user => user.name);
console.log(userNames); // ['John', 'Jane', 'Bob']

// 25歳以上のユーザーを取得
const usersOver25 = users.filter(user => user.age >= 25);
console.log(usersOver25); 
// [{ id: 2, name: 'Jane', age: 25 }, { id: 3, name: 'Bob', age: 30 }]

実行結果としては、まず map() メソッドを使って、各ユーザーの name プロパティだけを取り出し、新しい配列 userNames を作成しています。

続いて filter() メソッドを使って、age が25歳以上のユーザーだけを抽出し、新しい配列 usersOver25 を作成しています。

このように、map() や filter() を使えば、複雑なデータ構造から必要な情報だけを取り出したり、条件に合うデータだけを抽出したりできます。

まとめ

本記事では、JavaScriptにおける配列の初期化について、基本的な方法から応用的なテクニックまで幅広く解説してきました。

配列の初期化は、JavaScriptプログラミングの基礎であり、あらゆる場面で応用できる知識です。

初期化の方法を適切に選択し、配列の特性を理解することで、よりバグの少ない堅牢なコードを書けるようになるでしょう。

また、今回紹介した配列操作のテクニックを習得すれば、データ処理の効率も格段に上がります。

ぜひ日々の開発で実践し、JavaScriptの配列を取得してみてください。