Web開発において、データの効率的な管理・処理は重要な課題です。JavaScriptでは、複数のデータをまとめて扱うために「配列」というデータ構造が多く利用されます。
本記事では、配列の仕組みやメリット、実際の使い方などを解説します。
目次
JavaScript とは
JavaScriptとは、多くのWebサイトで使用されているWeb開発に不可欠なプログラミング言語の一つです。
ここでは、JavaScriptの概要を解説します。
関連記事：プログラミングとは？基本的な意味を理解しておけばビジネスでも役立ちます！
動的なWebページを作るための主要なプログラミング言語
JavaScriptは、主に動的なWebページの作成に使用され、ユーザーの操作に応じて異なる情報を表示します。具体例として、ECサイトの商品ページやSNSのタイムラインや会員登録ページなどが挙げられます。反対に、誰がいつどこで閲覧しても同じ情報が表示されるWebページを静的なWebページと呼びます。JavaScriptを使うことで、動的なページの複雑な処理が可能になり、モバイルアプリやデスクトップアプリ「Node.js」を用いたサーバーサイド開発も行えます。
JavaScriptは、1995年に開発されたアプリで、当初の名前は「LiveScript」でしたが、ほどなくして「JavaScript」に変更されました。JavaScriptの技術を使ったGoogleマップの登場やNode.jsの誕生により、一気にメジャーになりました。標準仕様は「ECMA International」によって策定されており、この仕様を「ECMAScript」と呼びます。2025年1月現在のJavaScriptの最新バージョンは、「ECMAScript 2024」です。
なお、C言語をベースに開発されたプログラミング言語である「Java」とは名前が似ていますが、全く異なる言語です。
関連記事：JavaScriptとは！初心者でも分かる基本を解説！
JavaScriptの配列とは
配列は、JavaScriptの中でも多く使われるオブジェクトの一つです。
ここでは、プログラミングにおける配列を解説します。
変数をまとめて管理するデータ構造
配列とは、複数のデータを1つにまとめたデータ構造です。配列にはインデックスと要素がセットになっており、インデックスを指定することで要素を取り出せます。ここでの要素とは、配列に格納されるそれぞれのデータを指します。
基本的に、要素には同じ型のデータを代入します。配列が整数型で定義されている場合、文字型のデータの代入は不可能です。この要素が配列のどこに位置しているのかを示す番号を、インデックスと呼びます。通常、インデックスは0から始まり、整数値で管理されます。
例えば、10個の要素を持つ配列の場合、インデックスは0〜9です。
また、配列を作成する際は配列を定義する必要があります。定義する内容は、配列の名前と型や格納できる要素数などです。一度定義した内容は変更できないため、要素数が10の配列を作成した場合、11個以上の要素を格納することはできません。
配列はJavaScriptでも重要な概念
JavaScriptでも配列は重要な概念で、JavaScriptの配列は一般的な配列とは異なります。JavaScriptは動的型付け言語であり、変数の型はプログラムの実行時に決まります。そのため、静的型付け言語とは異なり、JavaScriptでは配列内に異なる型のデータを自由に格納することが可能です。
また、要素も飛び飛びに代入でき、配列のサイズも変更可能です。
このような特徴を持つことから、JavaScriptの配列はメモリ上に連続して配置されるデータ構造ではなく、オブジェクトとして扱われています。
配列を使うメリット
ここでは、配列を使うメリットを解説します。
配列を使うメリットとして、「データの管理が容易になる」「コードを整理できる」などが挙げられます。それぞれ詳しく見ていきましょう。
データの管理が容易になる
配列を使うことで、複数のデータの管理が容易になります。
例えば、それぞれの変数に社員の名前が保存されている場合、社員数が多くなると保存するための変数を大量に用意する必要があります。こうしたデータの管理方法は変数名の管理が難しく、要素の変更や追加などの動的な処理にも対応しづらく非効率的です。
そこで、配列を使えば、一つの変数で複数の社員の名前を管理できます。
変数名の管理も容易で、動的な処理にも対応しやすいため、処理の効率化が期待できます。
コードが整理できる
配列を使えば複数のデータを一つの変数で効率的に扱えるため、コードを簡潔に整理できます。配列は、ループ処理との相性が良い点もメリットです。具体的には、配列の要素の全てに同じ処理をしたい場合、インデックスにループ回数を代入することで一括処理が可能になります。
配列は、インデックスによって要素が管理されているため、データのソートや検索も容易です。
また、配列の要素を並び替えたい場合は、ソートするための命令や関数を使うことで簡単にデータをソートできます。
配列内に特定のデータが含まれているか検索する場合は、ループ処理を用いることで効率的な検索が可能です。コードの可読性や保守性が向上し、バグの発生を防ぎます。同様の処理を異なるデータに対しても再利用しやすくなります。
大量のデータを効率的に処理できる
基本的に、配列の要素はメモリ上の連続した領域に格納されます。そのため、配列の最初の要素のアドレスが分かれば、次の要素のアドレスは簡単な計算で求めることができます。無駄な探索を行う必要がないため、データへのアクセスが高速で、大量のデータを扱う際には効率的な処理が期待されます。また、配列は要素数を定義できるため、メモリの使用量を予測しやすくなります。
これにより、メモリ管理が容易になり、プログラムのパフォーマンスの最適化が可能です。
JavaScriptで配列の宣言（作成）
ここでは、JavaScriptの配列の宣言方法を解説します。
JavaScriptでは、配列リテラルかArrayコンストラクタを使うことで配列の宣言が可能です。
配列リテラル[ ]
配列リテラルとは、配列を直接記述するための方法で、JavaScriptにおいて最も簡単で読みやすい方法かつ一般的に使われている方法です。
JavaScriptでは、角括弧（[]）の中に要素を入れ、カンマ（,）で区切って記述することで配列を宣言できます。
例えば、以下のように記述することで「numbers」に1〜3の数値、「word」に「one」「two」「three」という文字列の格納が可能です。
let numbers = [1, 2, 3];
let words = [‘one’, ‘two’, ‘three’];
また、空の配列も宣言でき、これにより配列に何を格納するのか明示できます。
let numbers = [];
ただし、データを複雑にし過ぎるとコードの可読性や保守性が低下し、バグの要因となるため注意が必要です。
Array コンストラクタ
コンストラクタとは、JavaScriptのようなオブジェクト指向のプログラミング言語において、新たなオブジェクトを作成する際に用いるメソッドです。JavaScriptでは、Arrayコンストラクタを使うことで配列を宣言できます。
例えば、要素数が5の配列を作成する場合は、以下のように記述します。
let emptyArray = new Array(5);
ただし、上のコードの場合は要素が定義されていないため、要素は全て「undefined」です。
要素を定義する場合は、以下のように記述する必要があります。
let emptyArray = new Array(1, 2, 3);
上のコードの場合、要素数は3で要素にはそれぞれ1〜3が格納されます。Arrayコンストラクタに数値を1つだけ指定するとその数値に応じた要素数を持つ配列が作成されますが、要素は空のままです配列リテラルに比べて動作が直感的ではないため、混乱を招く恐れがあります。そのため、Arrayコンストラクタは要素を格納するために使うのではなく、配列の要素数を事前に確保したい場合に使うのがおすすめです。大量のデータを格納したい場合や、決まった要素数を扱う場合に使うことで、メモリを効率的に利用できます。
配列の使い方
ここでは、JavaScriptで配列を使う方法を解説します。
サンプルコードを参考にして、実際に配列を活用しましょう。
配列 初期化
配列リテラルの場合、以下のように記述することで配列を初期化できます。要素をあらかじめ指定したい場合は、カンマで要素を区切りましょう。配列の要素にアクセスする際は、配列名の後に角括弧をつけ、要素に対応するインデックスを入れます。
let emptyArray = [];
let numbers = [1, 2, 3];
console.log(numbers[1]);
// 2が出力される
なお、初期化する際はletとconstの使い分けに注意です。letとconstはどちらも変数を宣言する際に使われますが、constで宣言した変数は再代入できません。
例えば、以下のコードは3行目で「numbers」に配列が再代入されるため、エラーとなります。ただし、2行目のように配列内の要素の変更は可能です。
const numbers = [1, 2, 3];
numbers[0] = 5;
numbers = [4,5,6];
配列 追加
pushメソッドを使うことで、配列の末尾に要素を追加できます。戻り値は新しい配列の要素数です。
let numbers = [1, 2, 3];
let newlength = numbers.push(4,5);
console.log(numbers);
// [1,2,3,4,5]が出力される
console.log(newlength);
// 5が出力される
また、unshiftメソッドを使うことで、配列の先頭に要素を追加できます。
戻り値は新しい配列の要素数です。
let numbers = [1, 2, 3];
let newlength = numbers.unshift(4,5);
console.log(numbers);
// [4,5,1,2,3]が出力される
console.log(newlength);
// 5が出力される
さらに、spliceメソッドを使うことで、配列の任意の位置で要素を追加できます。
spliceメソッドの基本的な構文は以下の通りです。
配列名.splice(start, deletecount, item1, item2,…)
● start
操作を開始するインデックスを指します。
● deletecount
削除する要素の数です。
0の場合は削除しません。
● item1、item2、…
追加する要素です。
省略しても実行できます。
spliceメソッドを使って配列の任意の位置に要素を追加する場合は、以下のように記述します。
let numbers = [1, 2, 3];
numbers.splice(1, 0, 4);
console.log(numbers);
// [1,4,2,3]が出力される
配列 削除
popメソッドを使うことで、配列の末尾の要素を削除できます。戻り値は削除された要素で、配列が空の場合は「undefined」が返されます。
let numbers = [1, 2, 3];
let removenumber = numbers.pop();
console.log(numbers);
// [1,2]が出力される
console.log(removenumber);
// 3が出力される
また、shiftメソッドを使うことで、配列の先頭の要素を削除できます。戻り値は削除された要素で、配列が空の場合は「undefined」が返されます。
let numbers = [1, 2, 3];
let removenumber = numbers.shift();
console.log(numbers);
// [2,3]が出力される
console.log(removenumber);
// 1が出力される
さらに、spliceメソッドを使うことで、配列の任意の位置で要素を削除できます。削除された要素を配列として返し、配列が空の場合は「undefined」が返されます。
let numbers = [1, 2, 3];
let removenumber = numbers.splice(1, 1);
console.log(numbers);
// [1,3]が出力される
console.log(removenumber);
// [2]が出力される
そのほか、delete演算子を使うことでも配列の削除が可能です。delete演算子は配列の要素を指定することで削除できますが、削除された要素は「undefined」となるため、インデックス番号は変わりません。削除に成功した場合はtrueが、失敗した場合はfalseが返されます。
let numbers = [1, 2, 3];
let result = delete numbers[1];
console.log(numbers);
// [1,undefined,3]が出力される
console.log(result);
// trueが出力される
配列 結合
concatメソッドを使うことで、複数の配列を結合できます。
戻り値は結合後の新しい配列です。
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let combinedArray = array1.concat(array2, array3);
console.log(combinedArray);
// [1,2,3,4,5,6,7,8,9]が出力される
また、スプレッド構文を使うことでも配列を結合できます。
スプレッド構文（…）とは、配列やオブジェクトを展開する記述方法です。
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [7, 8, 9];
let combinedArray = […array1, …array2, …array3];
console.log(combinedArray);
// [1,2,3,4,5,6,7,8,9]が出力される
なお、スプレッド構文を使えばpushメソッドでも複数の配列を結合できますが、元の配列が変更されるため、おすすめできません。
配列 ループ
forEachメソッドを使うことで、配列の要素を取り出すまでループが可能です。配列にのみ実行でき、それぞれの要素に任意の処理を実行させられます。
JavaScriptの関数記法の一つであるアロー関数を使うと、以下のように記述できます。
let numbers = [1, 2, 3];
numbers.forEach(value => console.log(value));
// 1と2と3がそれぞれ出力される
ただし、break文やcontinue文など途中でのループの中断や処理のスキップはできません。break文やcontinue文を使った処理を行いたい場合は、for文の使用がおすすめです。for文を使うことで、配列の要素に順番にアクセスできます。
let numbers = [1, 2, 3];
for(let item of numbers) {
console.log(item);
}
// 1と2と3がそれぞれ出力される
また、mapメソッドを使うことで、それぞれの要素を変換し、新しい配列を作成できます。
let numbers = [1, 2, 3];
let result = numbers.map(value => value * 2);
console.log(result);
// [2,4,6]が出力される
forEachメソッドと処理が似ていますが、mapメソッドは新たな配列を作成するという点で異なります。戻り値も設定する必要があるため、関数を終了させるためのreturn文も必要です。
配列 検索
indexOfメソッドを使うことで、配列内に指定した値があるか検索できます。一致する要素がある場合はその要素のインデックスが、一致する要素がない場合は-1が戻り値です。一致する要素が複数ある場合は、最初に一致した要素のインデックスが返されます。
let colors = [‘red’, ‘green’, ‘blue’];
let result = colors.indexOf(‘green’);
console.log(result);
// 1が出力される
配列の最後から検索したい場合は、lastindexOfメソッドを使いましょう。indexOfと同じように指定した値があるか検索し、一致する要素がある場合はその要素のインデックスが、一致する要素がない場合は-1が返されます。
let colors = [‘red’, ‘green’, ‘blue’, ‘green’, ‘red’];
let result = colors.lastindexOf(‘green’);
console.log(result);
// 3が出力される
また、findメソッドを使うことで指定した条件を満たす最初の要素を検索できます。条件を満たす要素が見つかった場合はその要素の値が、見つからなかった場合はundefinedが戻り値です。
let numbers = [1, 2, 3, 4, 5];
let foundnumber = numbers.find(value => value > 3);
console.log(foundnumber);
// 4が出力される
条件を満たす要素の値ではなくインデックスを取得したい場合は、findIndexメソッドを使いましょう。条件を満たす要素が見つからなかった場合は-1が返されます。
let numbers = [1, 2, 3, 4, 5];
let numberindex = numbers.findIndex(number => number > 3);
console.log(numberindex);
// 3が出力される
さらに、filterメソッドを使うことで、条件に一致する要素全てを新たな配列として取得できます。
let numbers = [1, 2, 3, 4, 5];
let foundnumbers = numbers.filter(value => value > 3);
console.log(foundnumbers);
// [4,5]が出力される
配列 存在チェック
includesメソッドを使うことで、配列内に指定した値が含まれているかどうかを調べられます。指定した値が含まれている場合はtrue、含まれていない場合はfalseが戻り値です。
let numbers = [1, 2, 3, 4, 5];
let result = numbers.includes(3);
console.log(result);
// trueが出力される
また、someメソッドを使うことで、配列内の要素が特定の条件を満たしているかどうか調べられます。特定の条件を満たす要素が一つでもあればtrue、なければfalseが戻り値です。
let numbers = [1, 2, 3, 4, 5];
let result = numbers.some(number => number > 3);
console.log(result);
// trueが出力される
配列内の全ての要素が特定の条件を満たしているかどうか調べたい場合は、everyメソッドを使いましょう。全ての要素が特定の条件を満たしている場合はtrueが、一つでも特定の条件を満たしていない要素がある場合はfalseが返されます。
let numbers = [10, 100, 1000];
let result = numbers.every(number => number > 5);
console.log(result);
// trueが出力される
配列 コピー
スプレッド構文を使うことで、配列をコピーできます。
let array1 = [1, 2, 3];
let array2 = […array1];
console.log(array2);
// [1,2,3]が出力される
また、sliceメソッドを使うことで、配列の一部をコピーできます。第一引数はコピーの開始位置で、省略すると配列の先頭からコピーされます。第二引数はコピーの終了位置ですが、その位置の要素は含まれません。省略すると配列の末尾までコピーされます。
let array1 = [1, 2, 3, 4, 5];
let array2 = array1.slice(1,4);
console.log(array2);
// [2,3,4]が出力される
ただし、配列内にオブジェクトが含まれている場合、片方を変更するともう片方も変更されてしまいます。スプレッド構文やsliceメソッドなどを使ったコピー方法を浅い (shallow) コピーといい、この問題を防ぐには深い (deep) コピーが必要です。
structuredCloneメソッドを使うことで、深いコピーができます。
この方法であればコピー元を参照しないため、コピー元が変更されてもコピー先に影響が及びません。
let array1 = [1, 2, [3, 4, 5]];
let array2 = structuredClone(array1);
console.log(array2);
// [1,2,[3,4,5]]が出力される
array1[2][0] = 1;
console.log(array2);
// コピー元が変更されたが、コピー先は[1,2,[3,4,5]]のまま
なお、JSON.stringifyメソッドとJSON.parseメソッドを組み合わせることでも深いコピーは可能です。
しかし、structuredCloneメソッドに比べて文字数が多く、可読性も低くなるため、おすすめしません。
配列 ソート
sortメソッドを使うことで、配列をソートできます。引数を入れずに実行すると、要素を文字列として比較し、並び替えます。
let alphabet = [‘d’, ‘b’, ‘c’, ‘a’, ‘e’];
alphabet.sort();
console.log(alphabet);
// [‘a’,’b’,’c’,’d’,’e’]が出力される
数値として比較する場合は、両者の値を比較する比較関数が必要です。
let numbers = [5, 2, 1, 4, 3];
numbers.sort((a,b) => a – b);
console.log(numbers);
// [1,2,3,4,5]が出力される
元の配列を変更せずにソートしたい場合は、toSortedメソッドを使いましょう。違いは新しい配列を返す点のみで、記述方法はsortメソッドと同じです。
let alphabet = [‘d’, ‘b’, ‘c’, ‘a’, ‘e’];
let result = alphabet.toSorted();
console.log(result);
// [‘a’,’b’,’c’,’d’,’e’]が出力される
let numbers = [5, 2, 1, 4, 3];
let result = numbers.toSorted((a,b) => a – b);
console.log(numbers);
// [1,2,3,4,5]が出力される
ただし、toSortedメソッドは比較的最近追加されたメソッドであるため、ブラウザやNode.jsのバージョンによっては対応していない恐れがあります。
また、配列の要素を逆順に並び替えたい場合はreverseメソッドを使いましょう。
要素が逆順に並び替えられた配列が返されます。
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);
// [5,4,3,2,1]が出力される
配列 オブジェクト
配列の要素にはオブジェクト型の値も格納できます。この性質を利用することで、配列内に配列を格納し、複雑なデータ構造を簡潔に表現できます。
let userdata = [
[‘taro’ ,30 ,’男性’],
[‘hanako’, 29 ,’女性’],
[‘daisuke’, 31 ,’男性’]
];
console.log(userdata);
// [ ‘taro’, 30, ‘男性’ ],
[ ‘hanako’, 29, ‘女性’ ],
[ ‘daisuke’, 31, ‘男性’ ]が出力される
また、「配列名[インデックス][配列内の配列のインデックス]」でアクセスしたい要素を指定できます。
let userdata = [
[‘taro’ ,30 ,’男性’],
[‘hanako’, 29 ,’女性’],
[‘daisuke’, 31 ,’男性’]
];
console.log(userdata[1][2]);
// ‘女性’が出力される
配列の応用：連想配列
連想配列とは、インデックス（数値）の代わりに文字列をキーとして要素に割り当てられる配列です。構文は「キー名：要素」となっており、キー名を指定することで要素にアクセスできます。
let user = {name : ‘山田太郎’, age : 30, region : ‘東京’};
console.log(user.name);
// ‘山田太郎’が出力される
文字列と要素がひもづくため、通常の配列を使う場合よりコードの可読性が飛躍的に上昇するでしょう。
また、ラベルの部分は変数でも代替できるため、複雑なプログラムでも重宝されます。
一方、通常の配列より複雑になる点やメモリ消費量が増加する点がデメリットです。
それぞれの特徴を理解して、通常の配列と連想配列を適宜使い分けましょう。
まとめ
複数のデータを一つにまとめたデータ構造である配列を使うことで、データの管理が容易になり、コードも整理できるようになります。JavaScriptで配列を宣言する場合は、配列リテラルやArrayコンストラクタの使用が必要です。また、配列には多次元配列や連想配列もあり、これを活用することで複雑なデータを効率的に管理・処理できるようになります。配列の使い方をマスターして、効率的な開発を実現しましょう。
