In 'n' Out

配列とは何か

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

要素数・文字数を表す情報

lengthは、文字列や配列など、複数の要素を持つデータで使われる情報です。
文字列では文字数を、配列では要素の数を表します。
このあと扱う配列や、後に学ぶ繰り返し処理でも重要な役割を持ちます。

構文

要素.length

lengthは、要素の数を取得するためのプロパティです。

コード例

//length1.js
const str = 'おはようございます';

alert(str.length);

動作例

lengthは要素の個数を返します。
そのため、alertには文字列の数が表示されます。
では、本当に文字列以外ではカウントされないか試してみます。

コード例

//length1.js
const num = 123456;

alert(num.length);

動作例

このコードを実行するとundefinedが表示されます。
数値には文字数や要素数という概念がないため、length は存在しません。
そのため、値を取得できずundefinedになります。
明示的に数字をシングルクォーテーションで囲むと、文字列として扱われるため機能します。
このようにlengthは、文字列や配列のように要素の数という情報を持つデータで使用されます。
今後、配列や繰り返し処理で頻繁に登場するため、ここで覚えておきましょう。

1次元配列の作成

配列にはいくつかの種類がありますが、まずは最も基本的な1次元配列から見ていきます。
1次元配列は、値が横一列に並んだシンプルな構造をしています。
配列の基本操作を理解するために、ここではこの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] + '円です');

動作例

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

多次元配列

1次元配列では、値が1列に並んだ構造を扱いました。
多次元配列は、その配列の中にさらに配列を持つ構造です。
配列を入れ子にすることで、関連する情報をまとめて管理できるようになります。
ここでは、多次元配列の基本的な考え方と構造を確認していきます。

構文

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

構文の例は2次元配列になります。
配列の中に配列を入れるため、一番外側に[]（ブラケット）を使い、その[]内に1次元配列と同じ要領で要素を作成します。
ただし、値を取り出すときは、1次元配列とは異なりインデックスを2つ指定します。
それでは配列の値を取り出してみます。

コード例

//array4.js
const arr = [['りんご', 150], ['みかん', 120], ['いちご', 800]];
        
alert(arr[0][1]);

動作例

何を行っているかわかりにくいのでイメージで見てもらいましょう。

1つ目のインデックス[0]、2つ目のインデックス[1]の値を取り出すために、arr[0][1]と指定します。
つまり、①0行目のインデックスからりんごと150を取り出し、その中から②1列目の要素である150を取り出しています。
このようにインデックスを操作することで、2次元配列を自由に扱うことができます。
それでは3次元配列のコード例を見ていきましょう。

コード例

//array5.js
const arr = [[['りんご', 150, '青森'], ['みかん', 120, '愛媛'], ['いちご', 800, '福岡']], [['きゅうり', 80, '宮崎'], ['キャベツ', 200, '茨城'], ['トマト', 100, '熊本']]];

alert(arr[1][0][0]);

動作例

3次元配列になると、管理がさらに複雑になります。
この例では、arr[1][0][0]と指定することで、3段階に分けて値を取り出しています。
まず、1つ目のインデックス[1]で外側の配列を指定し、['きゅうり', 80, '宮崎']などの配列を含むグループを取り出します。
次に、2つ目のインデックス[0]で、その中の['きゅうり', 80, '宮崎']を取り出します。
最後に、3つ目のインデックス[0]で、文字列である「きゅうり」を取得し、alertに表示しています。
3次元配列以上になると構造が分かりにくくなるため、思った挙動をしないこともあります。
それでは例を見てみましょう。

コード例

//array6.js
const arr = [['りんご', 150, '青森'], ['みかん', 120, '愛媛'], ['いちご', 800, '福岡']];

alert(arr[1][0][0]);

動作例

この配列は3次元配列ではなく、2次元配列です。
arr[0][0]で取得できるのは'りんご'という文字列になります。
JavaScriptでは、文字列も配列のようにインデックスで1文字ずつ取り出すことができます。
そのため、[0]をさらに指定すると文字列の先頭である「り」が取得されます。
このように、配列の構造を誤って理解していると、エラーにならず、意図しない値が表示されることがあります。
もう一つ例を見ていきます。

コード例

//array7.js
const arr = [['りんご', 150, '青森'], ['みかん', 120, '愛媛'], ['いちご', 800, '福岡']];

alert(arr[1][3]);

動作例

この配列は2次元配列で、arr[1]には['みかん', 120, '愛媛'] が入っています。
配列のインデックスは0から始まるため、この配列で指定できるインデックスは[0]・[1]・[2] のみです。
arr[1][3] は存在しない要素を指定しているため、エラーにはならず undefined が返されます。
このように、配列では要素が存在しない位置を指定してもエラーにならないという点に注意が必要です。

多次元配列の理解を深めるために

ここまで、2次元配列や3次元配列を見てきました。
多次元配列は難しく見えますが、実際には配列を組み合わせて作られています。
ここでは、2次元配列を分解した形で見てみましょう。

コード例

//arrayApendix1.js
const fruit1 = ['りんご', 150];
const fruit2 = ['みかん', 120];
const fruit3 = ['いちご', 800];

const fruits = [fruit1, fruit2, fruit3];

alert(fruits[0][1]);

動作例

まず、それぞれの商品を1つの配列として作成しています。
これらはすべて1次元配列です。
次に、それらの配列をまとめて、fruitsという配列にしています。
このように、配列の中に配列を入れることで、2次元配列が作られます。
そのため、fruits[0]はfruit1を表しており、fruits[0][1]は150になります。
3次元配列も同様です。

コード例

//arrayApendix2.js
const apple = ['りんご', 150, '青森'];
const orange = ['みかん', 120, '愛媛'];
const strawberry = ['いちご', 800, '福岡'];

const cucumber = ['きゅうり', 80, '宮崎'];
const cabbage = ['キャベツ', 200, '茨城'];
const tomato = ['トマト', 100, '熊本'];
       
const fruits = [apple, orange, strawberry];
const vegetables = [cucumber, cabbage, tomato];

const food = [fruits, vegetables];

alert(food[0][1][2]);

動作例

まず、appleやorange などは、それぞれ1つの商品を表す1次元配列です。
次に、これらの1次元配列をまとめて、fruitsとvegetablesという2次元配列を作っています。
さらに、その2次元配列をまとめて、foodという配列を作ることで、3次元配列になります。
food[0][1][2] は、次の順番で値を取り出しています。
1つ目のインデックス[0]でfruitsを選択、2つ目のインデックス[1]でorangeを選択、3つ目のインデックス[2]で愛媛を取得し、その結果、alertには「愛媛」と表示されます。

このように、3次元配列も1次元配列を作り、それらをまとめていくことで構成されています。
ただ、多次元配列を扱う度に、1つずつ配列を作っていくと膨大な配列数を作ることになります。
そのため、多次元配列を簡略化する書き方があるのです。
段階が増えるほど管理は難しくなるため、より複雑なデータ構造が必要な場合は、自作オブジェクトやJSONを使う方法も検討されます。
慣れるまでは、1次元配列を組み合わせて多次元配列を作っていくとよいでしょう。