1. JavaScript入門講座
  2. 配列を使ってみよう

配列を使ってみよう

今回は、配列の使い方を解説していきます。

配列の基本

script.jsを以下のように書き換えてください。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

console.log(array[0]);

コンソールを確認すると、「バナナ」と表示されます。

角括弧[]の中に、コンマで区切られた複数の値が入っています。

このようなデータを配列(Array)と言います。

配列の中身は、[番号]の形で取り出すことができます。

最初のデータは1ではなく、0で取り出します。このようにJavaScriptでは連番は1ではなく0から始まります。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

console.log(array[0]); // => バナナ
console.log(array[1]); // => りんご
console.log(array[2]); // => みかん

各値は、このように取り出します。

配列の中身は以下のように書き換えることができます。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

array[2] = 'スイカ';

console.log(array);

コンソールで配列の中身を確認すると、みかんがスイカに変わっているのが確認できます。

ちなみにconstで宣言した定数は再代入できませんが、配列の中身を操作することは可能です。

値の追加

配列の中に、値を追加していきます。

追加には、いくつかの方法があります。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

array[3] = 'スイカ';

console.log(array);

['バナナ', 'りんご', 'みかん', 'スイカ']と表示されます。

また、以下の方法があります。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

array.push('スイカ');

console.log(array);

こちらも['バナナ', 'りんご', 'みかん', 'スイカ']と表示されます。

JavaScriptには、あらかじめメソッドというものが用意されており、.メソッド名()の形で使用できます。

使えるメソッドは型によって異なるのですが、配列(Array)であれば配列に値を追加するpushというメソッドが使えます。

pushは、配列の最後に値を追加します。

配列の最初に値を追加したい場合は、unshiftを使います。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

array.unshift('スイカ');

console.log(array);

コンソールには、['スイカ', 'バナナ', 'りんご', 'みかん']と表示されます。

[番号]='追加する値'の形で追加できますが、配列の数を把握する手間がないので、pushやunshiftを使って追加する方が一般的です。

ループで配列の値を全て取り出す

まずは、配列の中に何個データが入っているか調べる方法を解説します。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

console.log(array.length);

コンソールに、3が表示されます。

JavaScriptでは、あらかじめプロパティというものが用意されており、.プロパティ名の形で取得できます。

配列.lengthの中には、配列に格納されているデータの数が入ります。

これを使って、配列の中身を取り出してみましょう。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

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

コンソールを確認すると、バナナ、りんご、みかんが表示されます。

以前レクチャーしたfor文で、配列の数だけループをします。

最初のループではiの中身は0なので、array[0]となり、バナナが出力されます。

2回目のループではarray[1]、3回目のループではarray[2]が出力されます。

ちなみに、配列にはforEachというメソッドがあり、これで配列の数だけ処理を実行することができます。

script.js
const array = ['バナナ', 'りんご', 'みかん'];

array.forEach((item) => {
    console.log(item);
});

ただ、forEachの中には関数が入るのですが、関数はまだレクチャーしていないので、forEachというものがあることだけ覚えておいてください。

関数については別のレッスンでレクチャーします。