配列の使い方

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の値も変わりません。つまり、constで宣言して変えられないのは参照先を示す値であって、要素の値ではないということです。

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

次のページ配列をコピーする方法