JavaScriptの配列の使い方

JavaScriptはオブジェクト指向のスクリプト言語であり、ウェブページを動的に表示させることができます。動的データの生成には、演算を使った数値などから条件に基づいて文字の出力やポップアップなど、多様な方法があります。その中の1つの方法として、配列の活用があります。

ここでは、JavaScriptの配列の使い方を学んでいきます。

【参考】：MDN Docs: JavaScript の第一歩 【参考】：MDN Docs: 配列

JavaScriptでできること9選！向いている人や学習方法も解説

オブジェクト指向言語とは？概念とプログラミング言語をわかりやすく解説！

JavaScriptの配列とは、同一の名称で示す領域（オブジェクト）に複数のデータを格納する、データ型の変数を表します。角カッコ ”[]” で配列を表し、複数の値をリストとして保持します。

通常の変数も値を格納できますが、配列の場合は任意の値に個別にアクセスすることができるため、多量の項目をループ処理する場合などに、効果的です。

JavaScriptの配列を使ってみる

ここからは、JavaScriptの配列を実際に使って解説していきます。JavaScriptは難しいプログラミング言語ではありませんが、基本的な理解を深めるために、まずは配列の作成から始めていきます。続いて、アイテム（要素）の追加や削除などを順を追って進めていきます。

【参考】：MDN Docs: 配列 【参考】：MDN Docs: Arrayオブジェクト

JavaScriptの入門！その概要や文法の基礎について解説！

JavaScriptの配列を作成するには、配列名に対して角カッコ ”[]” で配列であることを宣言します。”[]”のみの定義は、空の配列が定義されただけなので何も格納されていません。

const fruits=[];
console.log(fruits);        // ”[]”が表示されます

上記配列をconsole.log()で表示すると”[]”が戻り、まだ値が格納されていないことがわかります。値を格納するには、次のように要素を指定します。配列の要素へのアクセスは、角カッコ ”[]" 内にインデックスで位置を指定します。

const fruits = [];
fruits[0] = "バナナ";
fruits[1] = "みかん";
fruits[2] = "リンゴ";
fruits[3] = "ブドウ";
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます

上記配列をconsole.log()で表示すると、”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が格納されていることがわかります。

配列に格納できるのは、文字列や数値、オブジェクトや他の配列などあらゆるデータ型がサポートされています。もちろんデータ型の混在も可能です。

また2次元配列や、文字列と値のペアで管理できる、波括弧 ”{ }” で示す連想配列も定義されており、JavaScriptでは多様なデータの格納方法が提供されています。

配列は宣言によって領域を作成し、値を代入してから利用することができます。この初期化の手順は多少の手間がかかるため、次のように配列を作成する時点で同時に値を格納することができます。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます

配列の作成方法は、上記リテラル記法のほか、Array()コンストラクタを用いて次のように行うこともできます。

const fruits = new Array("バナナ", "みかん", "リンゴ", "ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます

配列のそれぞれの要素は、”...”を先頭につけることで引数に用いる際に展開して使用することもできます。集計処理などで利用すると効果的です。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(...fruits);     // 配列を展開した文字列、“バナナ みかん リンゴ ブドウ”が表示されます

配列にアイテム（要素）を追加するには、push()を使用します。push()は、配列の末尾に1つ以上のアイテムを追加することができます。また、ここでは配列の長さも知りたいので、lengthプロパティを合わせて用います。

const fruits = [];
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です
fruits.push("バナナ", "みかん", "リンゴ", "ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です

push()を個別に実行した場合は、次のように末尾にアイテムが追加されていきます。配列長を表すlengthプロパティも1ずつ増加します。

const fruits = [];
fruits.push("バナナ");console.log(fruits);        // ”[ 'バナナ' ]”が表示されますconsole.log(fruits.length); // 配列長の値は1ですfruits.push("みかん");
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されますconsole.log(fruits.length); // 配列長の値は2ですfruits.push("リンゴ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ' ]”が表示されますconsole.log(fruits.length); // 配列長の値は3ですfruits.push("ブドウ");
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です

アイテムを先頭に追加するには、次のようにunshift()で追加できます。

const fruits = ["みかん", "リンゴ", "ブドウ"];
console.log(fruits);         // ”[ 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
fruits.unshift("バナナ");      // 先頭に”バナナ”を追加します
console.log(fruits);         // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です

配列からアイテムを削除するには、pop()を用います。pop()では、最後の項目が削除されます。pop()を使用すると、削除されたアイテムが戻ります。pop()によってアイテム数（要素数）も減り、次のpop()によって順にアイテムが削除されます。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です
console.log(fruits.pop());  // “ブドウ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
console.log(fruits.pop());  // “リンゴ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
console.log(fruits.pop());  // “みかん”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ' ]”が表示されます
console.log(fruits.length); // 配列長の値は1です
console.log(fruits.pop());  // “バナナ”が表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です

先頭の位置から削除する場合は、次のようにshift()を用います。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.shift());// “バナナ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は3です
console.log(fruits.shift());// “みかん”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です
console.log(fruits.shift());// “リンゴ”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は1です
console.log(fruits.shift());// “ブドウ”が表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です

JavaScriptでは、配列のアイテムを操作するためのメソッドを用意しています。splice()メソッドは、配列に格納したアイテムの追加や削除、置換のような配列操作が可能です。

ここでは指定位置以降の要素を削除する場合に、splice()を使用してみます。引数は0から始まるインデックス（オフセット）を示します。3番目のアイテム以降を削除する場合は、引数にインデックス2を設定して次のように行います。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(2)); // ”[ 'リンゴ', 'ブドウ' ]”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'みかん' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です

すべてのアイテムを削除する場合は、引数に先頭のインデックス0を代入します。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(0)); // アイテムすべてが表示され、配列から削除されます
console.log(fruits);        // ”[]”が表示されます
console.log(fruits.length); // 配列長の値は0です

任意の位置の項目を削除したい場合は、第2引数に数を与えます。例えば2～3番目の項目を削除したい場合は、開始インデックス1、削除する要素数が2であり、splice(1,2)などのように指定します。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.splice(1, 2)); // ”[ 'みかん', 'リンゴ' ]”が表示され、配列から削除されます
console.log(fruits);        // ”[ 'バナナ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は2です

splice()を使ってアイテムを追加するには、第2引数を0にすると削除されずに第3引数以降を追加してくれます。次の例では、事前に保存されている要素を削除せず、先頭位置から3つのアイテムを追加します。

const fruits = [ "ブドウ" ];
console.log(fruits);        // ”[ 'ブドウ' ]”が表示されます
console.log(fruits.splice(0, 0, "バナナ", "みかん", "リンゴ"));  // 何も削除されず、”[]”が表示されます
console.log(fruits);        //  ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4です

次のように任意の場所の値を置き換えることもできます。この例では ”みかん” を ”オレンジ” に置き換えます。”みかん” のインデックスが分からなくてもindexOf()メソッドで情報を得ることができます。

const fruits = ["バナナ", "みかん", "リンゴ", "ブドウ"];
console.log(fruits);        // ”[ 'バナナ', 'みかん', 'リンゴ', 'ブドウ' ]”が表示されます
const index = fruits.indexOf("みかん"); // “みかん”のオフセット番号1が得られます
console.log(fruits.splice(index, 1, "オレンジ"));  // “[ 'みかん' ]”が表示され、”オレンジに”置き換わります
console.log(fruits);        //  ”[ 'バナナ', 'オレンジ', 'リンゴ', 'ブドウ' ]”が表示されます
console.log(fruits.length); // 配列長の値は4で、アイテム数は変更がありません

JavaScriptの配列はメソッドやプロパティが活用できる

JavaScriptは、動的コンテンツを生成するなどウェブページの価値を高めてくれるスクリプト言語です。配列においても、作成してから利用するまで一連の流れが工夫されており、メソッドやプロパティで必要な操作を手助けしてくれます。

データの操作は、大量のデータをいかに効率的に処理するかが重要なため、JavaScriptの配列は開発者と利用者双方に恩恵を与えるでしょう。

JavaScript入門者・中級者におすすめの技術本8選！

JavaScriptのおすすめ開発環境ツール9選！おすすめのエディタや必要な準備も紹介