第12回　配列の宣言と使い方を理解しよう

これまでは、変数、定数、制御構文について学んできましたが、
今回は配列を学びます。

配列を宣言してみる

変数は保存できるデータが１変数につき１つでしたが、
配列は１つの配列に複数のデータを保存することができます。
イメージとしては仕切りのついた箱みたいなものです。
仕切りがついているので複数のもの（データ）が入れられます。

具体的に利用するケースを考えてみましょう。
ある学校のAクラスのメンバーの名前を表示するプログラムを
作成してほしいと依頼がありました。Aクラスのメンバーは下記の四人です。

出席番号	名前
1	太郎
2	花子
3	一郎
4	幸子
5	ジョンソン

今まで学んだ変数で処理を書く場合、下記のようなプログラムを書きます

var CodeA_1 = '太郎';
var CodeA_2 = '花子';
var CodeA_3 = '一郎';
var CodeA_4 = '幸子';
var CodeA_5 = 'ジョンソン';

document.write("番号1:"+CodeA_1+"<br>");
document.write("番号2:"+CodeA_2+"<br>")
document.write("番号3:"+CodeA_3+"<br>")
document.write("番号4:"+CodeA_4+"<br>")
document.write("番号5:"+CodeA_5+"<br>")

var CodeA_1 = '太郎';

var CodeA_2 = '花子';

var CodeA_3 = '一郎';

var CodeA_4 = '幸子';

var CodeA_5 = 'ジョンソン';

document.write("番号1:"+CodeA_1+" ");

document.write("番号2:"+CodeA_2+" ")

document.write("番号3:"+CodeA_3+" ")

document.write("番号4:"+CodeA_4+" ")

document.write("番号5:"+CodeA_5+" ")

変数のみの場合は、メンバー分の変数を作成して
1つ1つの変数に代入していく必要がありました。
ここまでは問題ないと思います。

配列で書くと箱に入れる作業が楽に

これを配列で書くと下記のようになります。

//ClassAに配列を代入している
//左から順に
//0番目に太郎
//1番目に花子
//2番目に一郎
//3番目に幸子
//4番目にジョンソン

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];
document.write("番号1:"+CodeA_1+"<br>");
document.write("番号2:"+CodeA_2+"<br>")
document.write("番号3:"+CodeA_3+"<br>")
document.write("番号4:"+CodeA_4+"<br>")
document.write("番号5:"+CodeA_5+"<br>")

//ClassAに配列を代入している

//左から順に

//0番目に太郎

//1番目に花子

//2番目に一郎

//3番目に幸子

//4番目にジョンソン

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];

document.write("番号1:"+CodeA_1+" ");

document.write("番号2:"+CodeA_2+" ")

document.write("番号3:"+CodeA_3+" ")

document.write("番号4:"+CodeA_4+" ")

document.write("番号5:"+CodeA_5+" ")

配列の場合は一つの変数「ClassA」に全員文の
名前を保存しています。
全員文の名前を配列に入れる場合は中括弧で配列に入れたいデータを
コンマ区切りで記述していきます。

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];  //配列にデータを入れる
//var Test = {1,2,3,4,5,6,7,8,9,10} //数字の1~１0までを配列に入れる例

1 2	var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン']; //配列にデータを入れる //var Test = {1,2,3,4,5,6,7,8,9,10} //数字の1~１0までを配列に入れる例

配列の「添字」を理解する

データを入れると自動で0番から数字の名前がつきます。
この数字を添字（そえじ）と言います。
中身を取り出すときは配列を格納した変数名と添字を指定します。
重要なことは添字は「０」から始まるということです。
つまり先頭のデータを取り出す場合は0を指定する必要があります。

では上の例を参考にプログラムを変更していきましょう。

現時点で配列の中に入っているメンバーは
太郎、花子、一郎、幸子、ジョンソンでしたが、
今回、転校生の「ひろし」がClassAにやってきました。
この場合、次の1~4の問題を解いてみてください。

配列に謎の転校生を追加してみよう

1.ひろしをClassAの配列の最後に追加してください。

2.ひろしをClassAの配列に追加してプログラムを実行すると
　ひろしの名前が画面に表示されません。
　なぜ「ひろし」の名前が画面に表示されないか考えてみてください。

3.ひろしの名前が表示されるようにプログラムを変更してみよう。

4.ひろしの名前が表示できるようになったら、追加でメアリーとマイケルを
　ClassAの配列に追加して画面に表示できるようにしてください。

配列×for文で効率的にプログラミング！

配列の使い方には慣れましたか？
それでは前回のfor文と連携させてみます。
for文と配列は組み合わせて利用することでとても便利になります。
次のプログラムをみてみましょう。

//ClassAに配列を代入している
//左から順に
//0番目に太郎
//1番目に花子
//2番目に一郎
//3番目に幸子
//4番目にジョンソン

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];
for(var i=0; i<5; i++){
	document.write("番号"+(i+1)+":"+ClassA[i]+"<br>");
}

//ClassAに配列を代入している

//左から順に

//0番目に太郎

//1番目に花子

//2番目に一郎

//3番目に幸子

//4番目にジョンソン

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];

for(var i=0; i<5; i++){

document.write("番号"+(i+1)+":"+ClassA[i]+" ");

}

少し難しいですね。
配列の作成部分は先ほどと同じです。
異なるのは表示処理の内容です。

今回、画面への表示処理にfor文を利用しています。
for文が繰り返されるたびに変数iが０から4まで増加していきますね。
このiを配列の添字に利用して配列の内容を表示しています。
最初のループ時は i=0なのでClassA[0]、次はi=1なのでClassA[1]、
次はi=2なのでClassA[2]といった具合です。
ちょっと複雑になってきましたが、先ほどと同じように
転校生を追加していきます。以下の課題を解いてみましょう。

謎の転校生をfor文で追加する

１.「ひろし」が転校生としてClassAに加わりました。
　　実際に配列の最後に追加してfor文で表示してみましょう。

2.ひろしの後にメアリーとマイケルが新たにClassAの仲間に加わりました。
　実際に配列に追加してfor文で表示してみましょう。

上の問題は解けましたか？
配列にデータを追加した場合、for文の繰り返し条件も変更しないといけない
ことに気づいたと思います。
転校生が来るたびにfor文の繰り返し条件を変更するのは少々手間がかかります。
プログラム中に直接記述されたかれた数字はあまり好ましいものではないでね。
これは定数の時に学んだマジックナンバーになってしまいます。
※マジックナンバーを忘れた人は定数のとこ再度確認してください！

for文の条件を書き換えるのに便利なlength（レングス）

今回のように、for文の条件を書き換えないといけない問題を解決するために、
便利な機能があるので紹介します。

配列.length

配列.length

「length」というのは英訳すると「長さ」という意味になります。
この.lengthを配列の後ろに記載するとその配列に入っている要素数を得ることができます。
色々配列を作って配列の長さを確認してみます。

var  array1 = [];
var array2 = [1,2];
var array3 = ['花子', '花男'];

console.log(array1.length); //0 
console.log(array2.length); //2
console.log(array3.length); //2

var array1 = [];

var array2 = [1,2];

var array3 = ['花子', '花男'];

console.log(array1.length); //0

console.log(array2.length); //2

console.log(array3.length); //2

このように、配列の入った変数名に.lengthをつけると要素の数が得られます。
これを「要素の数」を返すといったりします。
上の例でいうとarray1.lengthというのは数値の0と同じ意味です。
なので、例えば、上のarray1とarray2の要素数の合計を知りたい場合は

console.log(array1.length + array2.length); //0

1	console.log(array1.length + array2.length); //0

というように書くことができます。
もちろん、配列の要素数が変わるとlengthで取得できる配列の個数も
随時変更されていきます。

var arrayTEST = [];
console.log(arrayTEST.length);  //0
var arrayTEST = [2];
console.log(arrayTEST.length); //1
var arrayTEST = [2, '太郎'];
console.log(arrayTEST.length); //2
var arrayTEST = [2, '太郎', 'ABC'];
console.log(arrayTEST.length);  //3
var arrayTEST = [];
console.log(arrayTEST.length); //0

var arrayTEST = [];

console.log(arrayTEST.length); //0

var arrayTEST = [2];

console.log(arrayTEST.length); //1

var arrayTEST = [2, '太郎'];

console.log(arrayTEST.length); //2

var arrayTEST = [2, '太郎', 'ABC'];

console.log(arrayTEST.length); //3

var arrayTEST = [];

console.log(arrayTEST.length); //0

話がそれましたが、先ほどまで配列に転校生を追加していました。
そして転校生を追加するたび、for文の条件を変更していました。
でも、配列の長さはlengthで取得することができることがわかりましたね。
この機能を利用すると、先ほどのfor文のプログラムは次のように書き
換えることができます。

謎の転校生が来る事前提で、lengthを仕込んでおく

//ClassAに配列を代入している
var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];
for(var i=0; i<ClassA.length; i++){
	document.write("番号"+ (i+1) +":"ClassA[i]"+"<br>");
}

//ClassAに配列を代入している

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];

for(var i=0; i<ClassA.length; i++){

document.write("番号"+ (i+1) +":"ClassA[i]"+" ");

}

今回は3行目のfor文の条件にClassA.lengthを利用しました。
上のプログラムではClassA.lengthは5なのでfor文は
4回繰り返され名前が表示されます。
では転校生「ひろし」をClassAの配列に追加してみましょう。
そうするとClassA.lengthは自動的に6になるのでfor文の条件を変更する必要が
無くなります。せっかくなので、メアリーとマイケルも追加してみましょう。
for文の条件を繰り返さなくても画面に名前が表示されることが確認できると思います。

以下のプログラムは演算子の時に学んだ前置、後置を利用した例です。
出席番号用にiを++、配列の内容を表示するために++したiを–で戻しています。
多少複雑になりますが、プログラムを読んで内容を理解してみてください。

//ClassAに配列を代入している
var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];
for(var i=0; i<ClassA.length; i++){
	document.write("番号"+(++i)+":"+ClassA[--i]+"<br>");
}

//ClassAに配列を代入している

var ClassA = ['太郎', '花子', '一郎', '幸子', 'ジョンソン'];

for(var i=0; i<ClassA.length; i++){

document.write("番号"+(++i)+":"+ClassA[--i]+" ");

}

配列の宣言と使い方まとめ

配列は変数に複数のデータを格納することができる。
配列のデータには格納した順に0から添字と呼ばれる番号が
振られる
配列のデータを取り出す場合は『変数名[添字]』で取り出し可能
配列の要素数は配列.lengthで取得することができる。

演習

出席番号	名前	国語の点数	数学の点数
1	太郎	90	45
2	花子	85	70
3	一郎	98	40
4	幸子	90	90
5	ジョンソン	20	95

上記表を参考にして次のプログラムを作ってみよう

1.国語の点数を配列に入れてみよう。

2.1の配列の中身を１個づつconsole.logを使って確認
　してみよう。

3.課題2をfor文を使って書いてみよう。

4.for文をと配列使って国語の合計点を表示してみよう。

5.for文と配列を使って国語の平均点を計算してみよう。

6.名前と数学の点数をそれぞれ配列に入れて
　下の例のように名前と数字を表示させてください。

太郎の数学の得点は45
花子の数学の得点は70
一郎の数学の得点は40
幸子の数学の得点は90
ジョンソンの数学の得点は95

太郎の数学の得点は45

花子の数学の得点は70

一郎の数学の得点は40

幸子の数学の得点は90

ジョンソンの数学の得点は95

7.今後学んでいくenchant.jsでは一枚の画像にキャラクターの動作
　が並んで表示されていて、その画像の番号を指定することでキャラクター
　の見た目を変えていきます。
　例えば、下の画像で、茶色のクマに歩く動作をさせる場合は
　0,1,0,2と画像を切り替えると歩いているように見えることが
　想像できると思います。
　では、下記URLから実際に茶色のクマ(男)が歩いて見えるように
　プログラムを変更してみてください。

　http://jsdo.it/chatan.jps.code/ECpj

　参考画像
　

宿題

演習の表について、テストを受けたメンバーの算数の点数と国語の点数を比較して算数の方が得点が高い場合は「算数が得意」国語の方が点数が高い場合は「国語が得意」同じ場合は「どっちでもない」と表示するプログラムを作成してください。

太郎は○○が得意
花子は××が得意
一郎はどっちでもない
幸子は○○が得意
ジョンソンは○○が得意

太郎は○○が得意

花子は××が得意

一郎はどっちでもない

幸子は○○が得意

ジョンソンは○○が得意

Pocket

第10回　if文を理解しよう。

第13回　配列の使い方（配列のシャッフル）を理解しよう。(オプション）