JavaScript②・配列と繰り返し
CodePenの準備
CodePenにアクセスして，Penを作成し，タイトルを設定しましょう． Penのタイトルは「Chapter4」に設定しましょう．
配列
変数は1つの値を記憶することができますが，
複数の値を記憶するには複数の変数を用意する必要があり煩雑です．
こんな場合には 配列 を利用します．
配列は，変数とは異なり，複数の値を記憶することが可能です．
配列を宣言するには，値をカンマで区切り，[]で括ります．
// 配列の宣言
let 配列名 = [値1, 値2, 値3, ...];
// 変数で3つの値を記憶
let x1 = 1;
let x2 = 2;
let x3 = 3;
document.write(`<p>x1=${x1}</p>`);
document.write(`<p>x2=${x2}</p>`);
document.write(`<p>x3=${x3}</p>`);
// 配列で3つの値を記憶
let x = [1, 2, 3];
document.write(`<p>x=${x}</p>`);
配列に記憶させた1つの要素を取得するには，整数で表されるインデックス（索引）を利用します．
インデックスは0から始まることに注意してください．
3つの値を記憶させたときのインデックスは0,1,2となります．
// 配列の要素にアクセス
document.write(`<p>x[0]=${x[0]}</p>`);
document.write(`<p>x[1]=${x[1]}</p>`);
document.write(`<p>x[2]=${x[2]}</p>`);
連想配列
配列ではインデックスで要素にアクセスしますが，
文字列など任意のオブジェクトをキーにして，要素にアクセスするのが 連想配列 です
（連想配列の場合は要素を プロパティ と表現する場合もある）．
連想配列は，文脈に応じて，オブジェクト，ハッシュとも呼ばれます．
連想配列を宣言するには，キーと値のペアをカンマで区切り，{}で括ります．
// 連想配列の宣言
let 連想配列名 = {キー1:値1, キー2:値2, キー3:値3, ...};
ここでは，立体的な箱の幅（x），高さ（y），奥行き（z）を連想配列で表現しています．
連想配列に記憶させた要素は，対応するキーを指定することで取得します．
// 連想配列でキーと値を記憶
let box = {"x":10, "y":20, "z":30};
document.write(`<p>box["x"]=${box["x"]}</p>`);
document.write(`<p>box["y"]=${box["y"]}</p>`);
document.write(`<p>box["z"]=${box["z"]}</p>`);
連想配列は，ドット記法 で要素を取得することもできます．
ただし，キーを変数名として利用できることが条件です（例，box.123は利用不可）．
// ドット記法で要素を取得
document.write(`<p>box.x=${box.x}</p>`);
document.write(`<p>box.y=${box.y}</p>`);
document.write(`<p>box.z=${box.z}</p>`);
繰り返し
プログラムの制御は 順次，繰り返し（反復），条件分岐（選択） のいずれかに分類されます． これまでにコーディングしたプログラムは全て 順次 と呼ばれる制御で，コードの先頭から順番に実行されます． ここでは，特定のコードを繰り返し実行する 繰り返し に注目します．
- 順次 記述された順番にコードを実行する
- 繰り返し 特定のコードを繰り返し実行する
- 条件分岐 条件に応じて実行するコードを選択する
for文
回数を指定して繰り返しを実行するのが for文 です． for文では，変数の初期化，繰り返しの継続条件，変数の増減式 を指定します．
for(変数の初期化; 繰り返しの継続条件; 変数の増減式){
繰り返す処理;
}
例えば，3回の繰り返しをfor文で実行することを考えます．
変数の初期化はlet i=0であり，変数iに0を代入しています．
繰り返しの継続条件はi<3であり，iが3より小さいときは，繰り返しを実行します（条件式の詳細は次回に解説）．
変数の増減式はi++であり，これはi=i+1と同じ意味です．
つまり，変数iに1を加算する処理です．
この結果，iが0，1，2と増加しながら処理を繰り返し，
iが3になったとき，繰り返しは停止することになります．
// for文で繰り返し
for(let i=0; i<3; i++){
document.write(`<p>i=${i}</p>`);
}
for文は配列と相性が良く，配列の要素に対して特定の処理をする際に用いられることが多いです．
例えば，for文のiを配列のインデックスとして，xの全ての要素にアクセスすることができます．
// for文で配列の要素を表示
for(let i=0; i<3; i++){
document.write(`<p>x[${i}]=${x[i]}</p>`)
}
xの要素数はx.lengthで取得することができます．
このため繰り返しの継続条件を，i<x.lengthと表現する方が便利です．
// for文で配列の要素を表示
document.write(`<p>x.length=${x.length}</p>`);
for(let i=0; i<x.length; i++){
document.write(`<p>x[${i}]=${x[i]}</p>`);
}
それでは，for文を利用して，配列の値を合計してみます．
結果的に1+2+3=6が合計値となります．
let sum = 0;
for(let i=0; i<x.length; i++){
sum = sum + x[i];
}
document.write(`<p>sum=${sum}</p>`);
for of 文
インデックスを利用せずに配列の要素を取得するには for of 文 を利用します．
ES6から導入された構文であり，配列だけでなく，イテレータなど列挙可能なオブジェクトに対して利用可能です．
ここでは，xから取り出された要素がvalueに代入されます．
// for of で配列の要素を表示
for(let value of x){
document.write(`<p>value=${value}</p>`);
}
for in 文
連想配列の要素を取得するには for in 文 を利用します
ここでは，boxのキーがkeyに代入されます．
このkeyを利用して，boxの要素を取得します．
// for in で配列の要素を表示
for(let key in box){
document.write(`<p>box[${key}]=${box[key]}</p>`);
}
アプリの確認
See the Pen Chapter4 by Naoto Mukai (@nmukai) on CodePen.
課題
連想配列で表現された5教科の得点の合計と平均を for in 文 を用いて算出せよ．
score = {
"国語": 78,
"算数": 92,
"理科": 88,
"英語": 73,
"社会": 95
}
課題を完成させたら，Penの ZIPファイル と リンク を提出してください． 提出方法は初回のWebアプリの開発を参考にしてください．