配列を学ぶ意味は？

配列は複数のデータを扱うための仕組み。
SpreadSheetからデータを取得するとき等に複数データを扱う必要がでてくる。

本記事のゴール

配列から任意の値を取り出せるようになること。

演習1 配列の作成

とりあえず配列で動くコードを実装

const helloArray = () => {
    const values = [1, 2, 3, 4, 5]; // 配列の作成
    console.log(values[0]); // 配列の中の値の一つを取得
}

helloArray();

ポイント

配列の作成

const 配列の変数名 = [配列の要素1, 配列の要素2, 配列の要素3]; 

[]でくくって、,で区切る。

配列の要素の取得

配列[何番目かを示す数]

今回のコードでは

values[0]

0番目を指定している。
プログラミング初心者の方は0番目って何？と思うかもしれない。

多くのプログラミング言語では配列の要素を取得するときには0番目から数える。
つまりこういうこと

演習2 for文

とりあえず動くコードを書く。
まずは配列は使わない。

const helloFor = () => {
    for (let i = 0; i < 3; i++) {
        console.log("HelloFor " + i);
    }
}

helloFor();

上記のような結果になる。

なぜこんな結果になるのか処理順序順に見ていく。
まずfor文の構文

for (最初に実行される処理;　ループ続行条件; ループごとに実行される処理){
    繰り返す処理
}

日本語が多くて見づらい。多くの場合は形が決まってるので以下のような形で覚えると良い。

for(let i = 0; i < ループ数; i++){
    繰り返す処理
}

ここで変数iはindexの頭文字。iっていう変数名でなくても問題ない。

これを踏まえて演習2のコードを見ていく。
演習2のfor文を分解すると以下のようになる

let i = 0; // 最初に実行する処理
// --- ポイント1
if (i < 3){ // ループ続行条件
    console.log("HelloFor" + i);
    i++; // iに1足す. ループごとに実行される処理
    // ポイント1に戻る
}

最初i=0から始まり、ループごとに1足されていく。
iが3になったらループ続行条件を満たさなくなる。

つまり、iが0, 1, 2のときに中の処理が実行される。
したがって3回処理が呼ばれる。

課題1

0 ~ 10までの数字を出力してみよう

課題2

0 ~ 10までの数字の和を出力してみよう。
ヒント: for文の前にlet sum = 0;を定義する。

演習3 配列の中身を全て出力する。

演習2のforを配列と組み合わせることによって、配列の中身を全部出力することができる。

const logAll = () => {
    const values = ["一郎", "二郎", "三郎"];
    for (let i = 0; i < values.length; i++) {
        console.log(values[i]);
    }
}

logAll();

ポイント

配列.lengthで配列の要素の数を返す。
この例題では3