In 'n' Out

配列とは何か

JavaScriptの配列は、複数の値をひとまとまりとして扱うための仕組みです。
変数が1つの値しか保持できないのに対し、配列を使うことで複数のデータを順番に管理できます。
配列はfor文と組み合わせて使われることが多く、繰り返し処理の理解には欠かせません。
ここでは、1次元配列に絞り、配列の作成から基本的な操作までを整理します。

配列の作成

配列は、[]（ブラケット）を使って作成します。
要素はカンマ区切りで並べ、順番を持って管理されます。

構文

変数宣言 配列名=['値', '値', '値'...]

構文で変数宣言にはletかconstを記述しますが、constを宣言することを推奨します。
配列名と配列の値は任意でかまいません。
また、配列に格納する値はいくつ格納してもかまいません。

コード例

//array1.js
const arr1 = ['りんご', 'みかん', 'いちご', 'ぶどう'];
let arr2 = [150, 120, 800, 750];

alert(arr1);
alert(arr2);

動作例

このように配列に要素を4つずつ格納しました。
そのあとにalertで確認しようとしましたが、alertでは配列が文字列に変換され、すべての要素が表示されます。
では1つずつ扱うにはどのようにすればいいか、次のようにコードを書き換えます。

コード例

//array2.js
const arr1 = ['りんご', 'みかん', 'いちご', 'ぶどう'];
let arr2 = [150, 120, 800, 750];

alert(arr1[0]);
alert(arr2[3]);

動作例

作成した配列では、各要素に番号が割り当てられます。
この番号をインデックスと呼び、必ず0から始まります。
配列に格納された値はそれぞれインデックスをお指定して、変数または定数として扱うことができます。 ただし、数え方には注意が必要で、4つある場合はインデックスは0・1・2・3となるため、インデックスに4以上を指定すると、値が存在しないため、結果としてundefinedが表示されます。
それでは、配列と文字列結合を使用してみます。

//array3.js
const arr1 = ['りんご', 'みかん', 'いちご', 'ぶどう'];
const arr2 = [150, 120, 800, 750];

alert(arr1[0] + 'は' + arr2[0] + '円です');

動作例

このように配列のインデックスと文字列結合でも表示ができます。

配列の数

配列の要素数は、自分で決めて作成できます。
そのため、配列数は把握してるので不要に思えますが、JavaScriptにおいては必要になります。

構文

配列名.length

lengthは、配列に含まれる要素の数を取得するためのプロパティです。

コード例

//length.js
const arr = ['りんご', 'みかん', 'いちご', 'ぶどう', 'メロン', 'バナナ', 'グレープフルーツ'];
        
alert(arr.length);

動作例

lengthは最後のインデックスではなく、要素の個数を返します。
そのため、インデックスの最大値はlength-1になります。
配列にどんどん、要素を増やしていくと、個数を把握するのが困難になります。
そこでlengthを用いることによって、配列数が今いくつなのかを把握できます。
また、後の繰り返しで使用することになりますので、覚えておく必要があるプロパティです。

要素の数を操作する

配列は、作成した時点の要素数が固定されているわけではありません。
処理の途中で要素を追加したり、不要になった要素を取り除いたりすることができます。
pushとpopは、配列の末尾を基準に要素数を増減させるための基本的な操作です。

要素の追加：push()

push()は要素を追加します。

構文

配列名.push('追加する要素');

push()のカッコ内には追加する要素を記述します。
数字であればシングルクォーテーションは不要になりますが、配列を作ったときに文字列であれば数字もシングルクォーテーションで囲む必要があります。

コード例

//push.js
const arr = ['りんご', 'みかん', 'いちご'];
arr.push('ぶどう');
        
alert(arr.length);
alert(arr);

動作例

この操作により、配列の要素数が1つ増えます。
追加された要素は、常に最後の位置に入ります。
配列に要素を1つ追加すると、lengthの値もそれに応じて増えます。

要素の削除：pop()

pop()は配列の末尾の要素を削除します。

構文

配列名.pop();

pop()のカッコ内には何も記述しなくとも末尾の要素を削除します。
配列から削除された要素は、変数に代入して受け取ることができます。

コード例

//pop1.js
const arr = ['りんご', 'みかん', 'いちご'];
arr.pop();
        
alert(arr.length);
alert(arr);

動作例

この操作により、配列の要素数が1つ減ります。
配列の要素を1つ削除すると、lengthの値もそれに応じて減ります。
もう一つコードを見てもらいましょう。

コード例

//pop2.js
const arr = ['りんご',　'みかん', 'いちご'];
const removed = arr.pop();
        
alert(arr.length);
alert(arr);
alert(removed);

動作例

2つ目のalertまでは先ほどと同じ挙動です。
しかし、定数removedを宣言したことで、removedには、配列から削除された要素が代入されます。
3つ目のalertで削除した値をポップアップで表示します。
配列の最後の要素を使い終わった後に取り除きたい場合や、最後の要素を使わずに処理したい場合に有効です。

このようにpushやpopは配列の末尾のみを操作します。