JavaScript»基礎»配列 配列としてならんでいる数を画像で表示する

ファイル名: js-basic/quest_00325.html

下のソースコードをうつして、配列はいれつとしてならんでいる数 0, 7, 4, 4, 2, 9, 1, 0, 4, 3 を画像がぞうでキャンバスに表示ひょうじしてください。画像がぞうは下のリンクからダウンロードできます。

画像をダウンロード

ソースコード

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const image = new Image();
image.src = "mes01_f01_d01_c04_02.png";
image.onload = function() {

  const numbers = [0, 7, 4, 4, 2, 9, 1, 0, 4, 3];
  
  numbers.forEach(function(num, i) {
    context.drawImage(image, num * 60, 0, 60, 60, i * 32, 144, 32, 32);
  });
};

解説

配列とは、複数の情報を格納したものです。
変数は1つの情報を入れておく箱のようなイメージでしたが、
配列は複数の情報を入れることのできる棚のようなイメージです。
配列を宣言する方法はこのようになります。


  const numbers = [0, 7, 4, 4, 2, 9, 1, 0, 4, 3];

変数や関数と同じように”const(宣言)”から始まり、配列の名前を決めてあげます。
その後、格納したい情報を”[]”で囲います。情報と情報の区切りは”,(カンマ)”です。
また、配列に入っている情報の1つ1つをその配列の”要素”と呼びます。

配列を実際に活用する際、以下のようになります。


  //配列の宣言
  const numbers = [0, 7, 4, 4, 2, 9, 1, 0, 4, 3];

  //1・配列をそのまま別の配列に入れなおしたりする場合
  "別の配列名" = numbers;

  //2・配列の要素を1つ取り出して活用する場合
  "変数名" = numbers[0]

1に関しては変数と考え方はほぼ同じです。配列をそのまま使用する場合の書き方になります。
2ですが、配列名の後に”[]”を記述し、その中に数字を入れます。
この数字は使いたい要素が何番目にあるかを指定しています。ここで注意点ですが
配列の要素は0番目から数えていきます。上記例の”numbers”配列の場合
0番目に”0″、1番目に”7″、2番目に”4″…となっております。

“forEatch”構文

配列のそれぞれの要素に対して同じ処理を行うための構文が”forEatch”構文です。
書き方は下記のようになります。