JavaScript | 11章配列を学ぼう

前の章に戻る次の章に進む

11章：配列を学ぼう

この教材の学習時間:45分

本章では、複数のデータをまとめて扱うためのデータ構造である配列について学びます。

配列の扱い方を学ぶと、大量のデータを一括管理したり、ループと組み合わせてデータを順番に処理することが簡単にできるようになります。

【11-1】配列とは

目安の学習時間:10分

配列の定義方法

・配列（array）とは、ひとことで言えば「番号付きの変数（定数）」のことです。

・例えるなら、仕切りのある入れ物です。

・JavaScriptにおける基本的なデータ型のひとつでもあります。

・通常、1 つの変数（定数）には1つの値（データ）しか代入できませんが、配列を使うと、大量のデータを効率良く、1 つの変数（定数）に代入し、データの集合として扱うことができるため、コードが整理しやすくなります。

・配列はループと組み合わせて、データを順に処理できます。

・配列を定義するためには、letやconstで宣言した変数（定数）に、[ ]（角カッコ）で囲んだデータを代入します。

・数値、文字列、関数など、どんなデータ型でも配列に格納することが可能です。

※データ型については「7章変数と定数を学ぼう」を参照

配列名の命名ルール

配列名の命名ルールは、通常の変数（定数）名の命名ルールと同じです。（「7章変数と定数を学ぼう」参照）
[ ]（角カッコ）の中に、複数の値（データ）を「,」（カンマ）で区切りながら並べていきます。

配列データの取得方法

上記の書式で定義された配列から値（データ）を取得するための記述方法は以下のとおりです。

・配列名に添字（インデックス番号）をつけて記述することで、特定の値（データ）を参照することができます。
　ポイントは、添字（インデックス番号）は0から始まるというところです。

　これまでにも、ブラウザオブジェクトであるimagesやforms、elementsオブジェクトの扱い方で学習してきたことですので、これはもうお馴染みの考え方ですね。

・配列データをランダムに取得したり、ループ処理で順番に取得したりすることで、複雑なプログラムを効率良く（短いコードで修正もしやすく）、記述することができるようになります。

取得するデータ（文字列）	取得するための配列名
値1	配列名[0]
値2	配列名[1]
値3	配列名[2]
値4	配列名[3]
値5	配列名[4]
値6	配列名[5]

【11-2】演習配列データ（文字列）を取得してアラートで表示しよう

目安の学習時間:15分

では、実際に配列を使ったJavaScriptのコードを書いてみましょう。

・任意のファイル名をつけた新しいHTMLファイルを用意して下さい。

・配列に複数のデータ（文字列）を格納し、それを取り出してアラートで表示してみます。

配列を定義する

配列を定義します。

今回はフルーツの名前を格納します。（サンプルコード11-1）

constで配列名を宣言し、[ ]（角カッコ）で囲まれたデータを代入します。データはひとつずつ「,」（カンマ）で区切りながら並べていきます。

6種類のフルーツの名前を配列に格納しました。alertメソッドを使い、これらを個別に出力してみます。

<body>
  <script>
    //配列を定義する
    const fruitsName = ["みかん", "バナナ", "柿", "メロン", "苺", "ぶどう"];
  </script>
</body>

JavaScript | 配列の定義サンプルコード 11-1

今回定義した配列から値（データ）を取得するための記述方法は下のとおりです。

取得するデータ（文字列）	取得するための配列名
"みかん"	fruitsName[0]
"バナナ"	fruitsName[1]
"柿"	fruitsName[2]
"メロン"	fruitsName[3]
"苺"	fruitsName[4]
"ぶどう"	fruitsName[5]

配列データを取得する

例えば、配列に格納されているデータのうち、ひとつめの文字列 "みかん” を取得する場合、配列名の記述は、 fruitsName[0]となります。

alert(fruitsName[0]);と記述してみましょう。

<body>
  <script>
    //配列を定義する
    const fruitsName = ["みかん", "バナナ", "柿", "メロン", "苺", "ぶどう"];
    //アラートで配列データ（文字列）を出力する
    alert(fruitsName[0]);
  </script>
</body>

JavaScript | 配列データの取得　サンプルコード11-2

次は、 "柿"を取り出してみましょう。

"柿"は3つめの配列データですから、添字（インデックス番号）は2となります。

<body>
  <script>
    //配列を定義する
    const fruitsName = ["みかん", "バナナ", "柿", "メロン", "苺", "ぶどう"];
    //アラートで配列データ（文字列）を出力する
    alert(fruitsName[2]);
  </script>
</body>

JavaScript | 配列データの取得サンプルコード11-3

これがJavaScriptの配列の扱い方です。

4章・5章で学習した画像オブジェクトやフォームオブジェクト、また6章で紹介したquerySelectorAllメソッドによる要素オブジェクトの取得など、オブジェクトに添字（インデックス番号）をつけて扱う方法は複数ありますが、結局のところそれらは、ブラウザオブジェクトや要素オブジェクトを一種の配列として扱う方法であると言えます。

【11-3】演習画像をランダムに表示させよう

目安の学習時間:20分

ページを読み込む度に、違う画像がランダムに表示される仕組みを配列を使い作成してみましょう。

以下の演習データをダウンロードして下さい。

使用素材

ダウンロード

JS11演習データ.zip (9.21 MB)

演習素材について

ダウンロードした「JS11演習データ」フォルダの中には、「random_images_start」フォルダと「random_images_fin」フォルダと「random.html」が入っています。

「random_images_start」は作業用のデータです。
「random_images_fin」は完成データです。
「random.html」は解説用のサンプルファイルです。

自分で書いたコードがうまく動作しないときは、完成データとの違いを探してみると良いでしょう。

「random_images_start」フォルダ

random_images.html

imgタグ

ページを読み込む度に画像をランダム表示する処理の流れ

1. divタグの要素オブジェクトを作成する。
2. ランダム表示する5枚の画像のファイルパスを配列に格納する。
3. 0〜4までの乱数を生成する
4. 生成された乱数を配列のインデックス番号として使い、imgタグのsrc属性の属性値として、ファイルパスが格納された配列データをセットしてdiv要素内に出力する。

<body>
  <div class="image-container"></div>

  <script></script>
</body>

random_images_start/random_images.html　サンプルコード 11-4

1. divタグの要素オブジェクトを作成する。

それでは、上記の処理の流れを順番に作成していきます。

divタグの下の<script></script>内にコードを書いていきましょう。

<div class="image-container"></div>

<script>
//div要素オブジェクトの作成
  const imageContainer = document.querySelector(".image-container");
</script>

サンプルコード11-5

サンプルコード11-5の解説

documentオブジェクトのquerySelectorメソッドを使い、divタグのclass名image-containerを取得して、constで宣言した定数imageContainerに格納します。
divタグの要素オブジェクトが作成されました。

2. ランダム表示する5枚の画像のファイルパスを配列に格納する。

<div class="image-container"></div>

<script>
//div要素オブジェクトの作成
  const imageContainer = document.querySelector(".image-container");
//配列に画像のファイルパスを格納
  const imgPath = ["images/araiguma.jpg", "images/hitsuji.jpg", "images/racco.jpg", "images/shimauma.jpg", "images/zou.jpg"];
</script>

サンプルコード11-6

サンプルコード11-6の解説

次に、配列名imgPathをconstで宣言し、今回使う5枚の画像ファイル（「images」フォルダ内の「araiguma.jpg」「hitsuji.jpg」「racco.jpg」「shimauma.jpg」「zou.jpg」）のファイルパスを[ ]（角カッコ）内に「,」で区切りながら格納します。

3. 0〜4までの乱数を生成する

サンプルコード11-7の解説

JavaScriptの組み込みオブジェクト（ビルトインオブジェクト）であるMathオブジェクトを使って0〜4の乱数を生成します。（Mathオブジェクトについては、下記「**Mathオブジェクトとは**」を参照）

定数randomを宣言し、Math.random();で0以上1未満（0.0 から 0.999… まで）の乱数を生成して格納します。

このときに生成される乱数は、このままでは役に立たないため、画像の数（5）を掛けた上で、Mathオブジェクトのfloorメソッドを使い、小数点以下を切り捨てる計算を行います。

画像の数が5枚の場合、計算式は、Math.floor(Random * 5);となりますが、Webページの更新時などに画像の数が増減した場合に、JavaScript側の修正の手間を減らすため、imgPath.lengthで配列データの数を取得し、Math.floor(Random * imgPath.length);と記述し、定数indexNumに格納します。

このとき定数indexNumには、0、1、2、3、4の5つの整数のうちのどれかが同じ確率で格納されます。

この数値を、次の処理で配列のインデックス番号として使います。

<div class="image-container"></div>

<script>
  //div要素オブジェクトの作成
    const imageContainer = document.querySelector(".image-container");
  //配列に画像のファイルパスを格納
    const imgPath = ["images/araiguma.jpg", "images/hitsuji.jpg", "images/racco.jpg", "images/shimauma.jpg", "images/zou.jpg"];
  //乱数を生成する
  const Random = Math.random();
  const indexNum = Math.floor(Random * imgPath.length);
</script>

サンプルコード11-7

組み込みオブジェクト（ビルトインオブジェクト）とは

JavaScriptには、ブラウザオブジェクトやDOMの要素オブジェクトの他に、組み込みオブジェクト（ビルトインオブジェクト）と呼ばれる「ブラウザ以外のJavaScript環境でも利用できるオブジェクト」が用意されています。

JavaScriptの主な組み込みオブジェクトは、以下の表を参照してください。

オブジェクト	概要
Stringオブジェクト	文字列を操作するためのメソッドやプロパティを含む。
Numberオブジェクト	数値に関するプロパティやメソッドを提供する。
Booleanオブジェクト	true/falseを操作する手段を提供する。
Mathオブジェクト	数学的な計算をするためのメソッドを持つ。
Dateオブジェクト	日付や時刻を操作するためのオブジェクト。
Arrayオブジェクト	配列を操作するためのオブジェクト。
RegExpオブジェクト	正規表現を使ったパターンマッチングや文字列操作を行うためのオブジェクト。
JSONオブジェクト	JavaScriptオブジェクトや配列をJSON文字列に変換したり、その逆を行うためのオブジェクト。
Globalオブジェクト	すべてのグローバル変数や関数を含むオブジェクト。
Promiseオブジェクト	非同期処理を扱うためのオブジェクト。
Errorオブジェクト	エラーに関する情報を含むオブジェクト。

Mathオブジェクトとは

Mathオブジェクトとは、JavaScriptの組み込みオブジェクトのひとつで、数学的演算を行うメソッドを持つオブジェクトです。
乱数（ランダムに返ってくる数値）の生成や、小数点以下の切り捨てのほか、平方根や三角関数などの演算を行うことができます。

Mathオブジェクトの主なメソッド

メソッド	概要
random()	0以上1未満（0.0 から 0.999… まで）のランダムな数値を生成する。
floor()	小数点以下を切り捨てて、最大の整数を返す。
ceil()	小数点以下を切り上げて、最小の整数を返す。
round()	最も近い整数を返す。
sqrt()	平方根を返す。
cbrt()	立方根を返す。
sin(), cos(), tan()	三角関数の正弦（sin）、余弦（cos）、および正接（tan）の値を返す。

Mathオブジェクトのrandomメソッドで乱数を生成する

<body>
  <script>
    //乱数を生成して定数randomに格納する
    const Random = Math.random();
    //アラートで出力する
    alert(Random);
  </script>
</body>

random.html　サンプルコード 11-8

4. 生成された乱数を配列のインデックス番号として使い、imgタグのsrc属性の属性値として、ファイルパスが格納された配列データをセットしてdiv要素内に出力する

表示する画像のファイルパスは、配列imgPathに格納されています。
それぞれのファイルパスには、配列のインデックス番号を指定することでアクセスできます。

	ファイルパス	配列名
1枚目	images/araiguma.jpg	imgPath[0]
2枚目	images/hitsuji.jpg	imgPath[1]
3枚目	images/racco.jpg	imgPath[2]
4枚目	images/shimauma.jpg	imgPath[3]
5枚目	images/zou.jpg	imgPath[4]

このインデックス番号の部分に、ランダムに生成した整数を代入することで、ページを読み込むたびに表示する画像が切り替わります。
たとえば、indexNumという定数に 0〜4のいずれかの整数が代入されれば、imgPath[indexNum]によってランダムに1枚の画像を取得できます。

また、画像をHTMLに出力する場合は innerHTML プロパティに <img> タグを文字列としてセットします。
このとき、imgPath[indexNum]を文字列と結合する必要があるため、次のように + 演算子を使って書きます。

div要素オブジェクト（imageContainer）にランダムにファイルパスが変わるimgタグを出力するコードは、次のようになります。

imageContainer.innerHTML = "<img src='" + imgPath[indexNum] + "'>";

サンプルコード 11-9

<div class="image-container"></div>

<script>
  //div要素オブジェクトの作成
    const imageContainer = document.querySelector(".image-container");
  //配列に画像のファイルパスを格納
    const imgPath = ["images/araiguma.jpg", "images/hitsuji.jpg", "images/racco.jpg", "images/shimauma.jpg", "images/zou.jpg"];
  //乱数を生成する
  const Random = Math.random();
  const indexNum = Math.floor(Random * imgPath.length);
  //div要素にimgタグを出力する
  imageContainer.innerHTML = "<img src='" + imgPath[indexNum] + "'>";
</script>

完成コード　サンプルコード 11-10

これで完成です。

ブラウザを何度も更新してみましょう。

これで「11章：配列を学ぼう」の解説を終わります。

次の章に進みましょう。