配列の使い方

JavaScriptは、変数に複数の値を代入できます。

本ページでは、配列の使い方を説明します。

配列とは

配列は、複数の値を1つの変数に代入できます。

例えば、以下のように0番目から2番目までの値を変数xに代入できます。

【複数の値を変数に代入】
0番目 1番目 2番目
りんご いちご みかん

0番目、1番目などは、"りんご"や"いちご"を入れる箱で要素と呼ばれます。この例では、要素が3つあることになります。要素は、0から数える点がポイントです。

配列を使うと、値を順番に取り出したり、条件によって何番目かの値を取り出す、変更するといったスクリプトが作りやすくなります。

配列の宣言

配列は、以下のように全体を大括弧([])で囲って宣言します。

【配列の宣言方法(文字列)】
let x = ["りんご","いちご","みかん"];

要素の値が文字列の場合は、ダブルクォーテーション(")で囲みますが、シングルクォーテーション(')も使えます。

数字の場合は、以下のようにダブルクォーテーションもシングルクォーテーションも使いません。

【配列の宣言方法(数字)】
let x = [2,4,1];

また、数字と文字列を混在させることもできます。

再代入と参照

配列に再代入する時は、以下のようにします。

【配列への再代入方法】
x[1] = "ぶどう";

大括弧の中にある数字は、添字と呼ばれます。これが、何番目の要素かを示します。このため、先ほどの例で1番目の要素が"いちご"でしたが、上記により"ぶどう"に変わります。

配列の値を利用するためには、以下のようにします。

【配列の要素の利用方法】
let y = x[2];

これで、yには2番目の要素の値(先ほどの例では"みかん")が代入されます。

多次元配列

以下のように、配列に配列を入れる(要素を配列にする)こともできます。

【多次元配列の宣言方法】
let x = [
  ["りんご","いちご","みかん"],
  ["サバ","イワシ","ハマチ"]
  ];

上記は、以下のように値が代入されています。

【2次元配列の値】
順番 0番目 1番目 2番目
0番目 りんご いちご みかん
1番目 サバ イワシ ハマチ

各値は、添字を2つ使ってx[1][2]などで代入したり、取り出したりできます。上の例では、x[1][2]は"ハマチ"になります。

さらに、配列を深くしてx[1][3][1]などで使うこともできます。また、以下のように一部の要素だけを配列にすることもできます。

【一部が多次元配列の例】
let x = [
  ["りんご","いちご","みかん"],
  "さかな"
  ];

"いちご"は、x[0][1]が該当しますが、"さかな"はx[1]が該当します。

プロパティとメソッド

配列は、プロパティとメソッドを使うと扱いやすくなります。

プロパティ
プロパティは、値を示します。例えば、長さという値を持つプロパティなどがあります。

メソッド
メソッドは、操作を示します。例えば、値を追加したり削除したりするメソッドがあります。

プロパティとメソッドは、変数名.プロパティまたは変数名.メソッドの形で使えます。

次からは、プロパティとメソッドの使い方を説明します。

配列は、すべてlet x = ["りんご","いちご","みかん"];で宣言されているとします。

配列の要素数を取得する(length)

配列の要素数は、lengthプロパティで取得できます。

【lengthプロパティの使い方】
let y = x.length;

上記で、yは3になります。

配列を検索する(indexOf)

配列を検索するためには、indexOfメソッドを使います。

【indexOfメソッドの使い方】
let y = x.indexOf("いちご");

上記で、yは1になります。indexOfは、検索で一致した添字を返します。もし、一致しなかった場合、-1になります。

最初に要素を追加(unshift)

配列の最初に要素を追加する時は、unshiftメソッドを使います。

【unshiftメソッドの使い方】
x.unshift("ぶどう");

これで、配列の値は"ぶどう","りんご","いちご","みかん"となります。

最初の要素を削除(shift)

最初の要素を削除する時は、shiftメソッドを使います。

【shiftメソッドの使い方】
x.shift();

これで、配列の値は"いちご","みかん"となります。

最後に要素を追加(push)

配列の最後に要素を追加する時は、pushメソッドを使います。

【pushメソッドの使い方】
x.push("ぶどう");

これで、配列の値は"りんご","いちご","みかん","ぶどう"となります。

最後の要素を削除(pop)

最後の要素を削除する時は、popメソッドを使います。

【popメソッドの使い方】
x.pop();

これで、配列の値は"りんご","いちご"となります。

途中の要素を削除(splice)

途中の要素を削除する時は、spliceメソッドを使います。

【spliceメソッドの使い方】
x.splice(1,2);

上記は、1番目の要素から2つの要素を削除します。このため、配列の値は"りんご"になります。

事前に宣言だけ行う

以下のように、宣言だけ行って代入は後で行うこともできます。

【事前に配列の宣言だけ行う方法】
let x = new Array();

例えば、x[0] = x[0] + 1が実行された時、配列が存在しないとエラーでスクリプトが止まってしまいます。配列だけ作っておくと、エラーにならずにスクリプトが継続されます。

constでの宣言

配列は、constでも宣言できます。

【constで配列を宣言する方法】
const x = ["りんご","いちご","みかん"];

constは、再代入できない宣言方法ですが、上記の後にx[1] = "ぶどう"などと要素に対して再代入することができます。

これは、変数xに代入されているのは、要素の値ではなくて配列を参照するための情報だからです。

変数xは配列を参照するための情報が代入されている。変数自体にりんごなどの値が代入されている訳ではないことが説明されています。

要素の値が変わっても、この参照するための情報は変わりません。このため、xの値も変わりません。つまり、constで宣言して変えられないのは参照先を示す値であって、要素の値ではないということです。

x = "ぶどう"などと、x自体の値を変えようとするとエラーになります。