JavaScript 基礎 第8回では繰り返し処理で少し複雑な処理を学びました。
この繰り返し処理の活用法の一つに「配列」という概念があります。この章ではこの「配列」について解説していきます。
配列とは
これまで「変数」にはさまざまな値を記憶させておくことができると解説してきました。
しかし、プログラム内でたくさんの変数を作っていくと徐々に管理が大変になってきてしまいます。こうしたデータを分類してわかりやすくまとめるために「配列」という概念について理解していきましょう。
配列とは、各データを種類別にまとめ、扱いやすくしたデータの集合を指します。
例えば、「お米」「みかんジュース」「コーヒー」「ラーメン」「スポーツドリンク」「ハンバーグ」というデータがあった場合、データをそのままの状態で管理するよりも「食品」と「飲料」のグループにそれぞれ分けた方が管理しやすいですよね。
このように配列は、同種類のデータをまとめておくことでプログラムが大きくなればなるほど煩雑になりがちなデータを扱いやすくする他、第8回で学んだ繰り返し処理と併せて使うことで、同じ処理を複数のデータに反映させることができるなど、効率的なプログラミングを行うためには非常に役立つ仕組みなのです。
この章では配列を使うメリットを紹介していきます。
配列を使ってできること
上述のとおり、配列は非常に利便性の高い仕組みです。
では配列を使ってできることにはどういったものがあるのでしょうか？確認していきましょう。
データをまとめる
まず、前項でも記したとおり、配列はデータの集合を指します。
スーパーマーケットではそれぞれの商品が各カテゴリーごとの棚にまとめて分けられているように、プログラムも配列を使ってデータをまとめて分類しておくことができます。
例えば、「飲料」でまとめた配列「drink」を記述すると以下のようになります。
■例1. 配列「drink」
let drink = ['みかんジュース', 'コーヒー', 'スポーツドリンク'];このように、配列は[]（角括弧）内にカンマ区切りでデータを格納します。
こうして配列にまとめておくことで、データ一つ一つに変数を割り当てる必要がなくなり、変数の管理がしやすくなるのです。
データにアクセスする
もちろん配列でまとめたデータはそれぞれにアクセスすることが可能です。
配列に組み込まれたデータには順番に番号が割り当てられ、この番号をインデックスといいます。それぞれのデータのインデックスの番号で指定することで、配列内のデータにアクセスすることができるのです。
なお、インデックスは左から順に「0、1、2、3…」と割り振られます。1からではなく0からスタートするので注意しましょう。
■例2. インデックスを指定して配列の中のデータにアクセス
drink[0];インデックスを指定する際は例1のように、配列名の後ろの[]（角括弧）内に参照したいインデックス番号を記述します。
例えば、下記のプログラムでconsole.log(drink[0]);を実行すると「みかんジュース」がコンソールに表示されます。
■例3. 配列「drink」のデータにアクセス
// 配列「drink」を作成
let drink = ['みかんジュース', 'コーヒー', 'スポーツドリンク'];
// インデックス番号が「0」のデータにアクセス
console.log(drink[0]); //配列上一番左の「みかんジュース」が表示される
データの数を調べる
配列内のデータ数を調べるには、「length」というプロパティを使用します。
実際に「length」プロパティを使って配列「drink」の要素数を調べると、以下の記述になります。
■例4. 配列「drink」内のデータ数を調べる
// 配列「drink」を作成
let drink = ['みかんジュース', 'コーヒー', 'スポーツドリンク'];
// 配列「drink」内のデータ数を表示
console.log(drink.length); //コンソールに「3」という結果が表示される
例4のように、配列の中のデータを調べるには「●配列名●.length」という形式で記述します。
「配列の中の要素数を調べて何になるの？」と感じる方もいるかもしれませんが、これは後述するfor文の繰り返し条件で役立ちます。
配列内のデータにまとめて処理を行う
例1で作成した配列「drink」ですが、これは「drink」という配列変数に「みかんジュース」「コーヒー」「スポーツドリンク」という3つの要素が含まれていることになります。
つまり、「drink」を指定することで、その配列に含まれた3つのデータすべてにまとめて処理を実行することができるのです。
配列内のデータにまとめて処理を実行するには前回学んだ「繰り返し処理（for文）」を使います。配列「drink」のデータをまとめて表示させる記述を以下に記載します。
■例5. 配列「drink」内のデータをまとめて表示する
// 配列「drink」を作成
let drink = ['みかんジュース', 'コーヒー', 'スポーツドリンク'];
// 配列「drink」内のデータ数をfor文ですべて表示
for (let i = 0; i < drink.length; i++) {
console.log(drink[i]);
}
例5のプログラムを実行してコンソールを見てみると配列内のデータがまとめて表示されているのが分かります。
このfor文で何を行われているのかというと、インデックスの値を使って配列内のデータを取り出す処理を繰り返しているのです。
例5のfor文ですと、カウント用変数「i」にインデックスの値を代入しており、0～最大値まで処理を繰り返す処理を行っています。インデックスの項目で解説したように、インデックスの値は0から始まるため、インデックスの最大値は配列のデータ数より1つ分小さくなります（配列「drink」の場合3つ目の要素「スポーツドリンク」のインデックスは「2」となります）。
ここで条件式として使うのがデータの数を調べる際に使用した「length」プロパティです。取り出す要素のインデックスを示す変数「i」の値が、「length」プロパティで調べたデータの総数未満になるように設定することで、配列内のすべてのデータを取り出すことができるのです。
配列内のデータをfor文を使って取り出す処理は頻繁に使用されるので、繰り返し処理とインデックスの関連性についてはきちんと理解しておきましょう。
まとめ
今回は「配列」について解説してきました。
プログラムを長く使えば使うほど、もしくはその規模が大きくなれば大きくなるほどどうしてもデータの数が増え、その管理が煩雑になってしまいます。そうしたデータ管理の上でも配列は非常に重要ですし、データの管理以外でも出番の多い仕組みであることが理解できたのではないでしょうか。
配列はこの次に登場する「オブジェクト」にも大きく関連してきますので、この章で配列の基本を理解しておくとよいでしょう。
コメント