もじゃもじゃラボ/JavaScriptでプログラミングの基本的概念を学ぼう！/配列
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

配列

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

配列

配列とは、複数の値を1つの変数に格納する仕組みです。
例えば、5つの数値を変数に保存する場合、5つの変数を用意して、それぞれに値を保存するということでも構わないのですが、この5つの値に何か意味があった場合、それぞれが独立したものになってしまうと、どの変数に何の値が入っているかを気をつけながらプログラミングをしないといけません。
また、値が100や200もあった場合には、その数だけ変数を用意する必要があり、さすがに現実的ではありません。そんな時に配列を使うと便利です。
5つの値が5教科のテストの点数だったとしましょう。scores（得点の複数形）という名前の変数に格納すると以下のようになります。
1つの変数に複数の値を保存することができます。値の数に応じて複数の変数を用意する必要もありませんし、変数の名前からどんな意味を持った値なのかが何となく想像できます。
また、格納された値を参照したい場合には、順番を示す番号を与えることで、一つずつ取り出すことが可能です。のように指定して取り出します。この場合は、75が取り出されます。
配列の各値を要素と呼びます。
要素を指す番号のことを、添字またはインデックスと言います。この番号が0から始まっていることに注意してください。

配列の使い方

  • 宣言と代入（初期化）
      • 変数を配列にするには、複数の値を同時に代入します。複数の値を並べる際は、を使用します。ではありません。値はカンマで区切ります。
  • 参照
      • 変数名に添字を付けることで、要素を参照することができます。添字を付ける際の括弧もとなります。
具体例です。
変数名に添字0を指定すると10が、添字1を指定すると100が、添字2を指定すると500が返ります。

サンプルコード

for文と配列を使って、英・数・国のテスト結果の合計点を求るサンプルです。
変数scoresには、数学80点、英語75点、国語60点のテスト結果が保存されています。添字をつけて参照すると、それぞれの科目の点数を取り出すことができます。
合計点を求める部分では、先に変数sumを宣言し、for文の中で代入演算子を使って繰り返し、テスト結果の点数を加算しています。
繰り返しの条件式はです。つまり、「変数iの値が0、1、2の時の3回繰り返す」ということになります。処理を繰り返すたびに変数sumの値に点数が加算されていく経過を表にまとめると、以下のようになります。sumの初期値は0です。
回数変数iの値scores[i]の値変数sumの値
1回目08080
2回目175155
3回目260215

lengthプロパティ

配列の長さ（配列に格納されている要素の数）を調べるには、lengthプロパティを使用します。以下のように記述します。
配列には5つの値が格納されています。
scoresと言う変数名がついています。値が5つあるのでは5になります。for文などと組み合わせて処理する時に使います。
また、lengthプロパティを使う時の注意点をあげておきます。（配列の特徴でもあります。）配列の一番後ろの添字は配列の数より1少ない数になります。
どういうことかと言いますと、、、 変数scoresの添字はこのよう0から始まります。値5の添字は4となっていて、これは、lengthプロパティ 5 - 1であることがわかります。

サンプルコード

今回もテスト結果の合計点を求めるサンプルです。前述のサンプルでは、3教科であることが事前に分かっていましたが、プログラムを書く過程で、配列の数が分からない場合もよくあります。そのような時にはlengthプロパティを使いましょう。
Aさん、Bさんのテストの合計点を求めるようなサンプルです。
このサンプルでは、AさんとBさんのテストの数が異なります。注目すべき点は、配列の数が変動しても、テスト結果の合計点を求めるfor文の部分は、変数の名前が異なるだけで、それ以外は完全に同じです！