配列・オブジェクト

配列

「配列」とは同じ種類のデータをまとめて扱うことのできるデータ型です。

さっそく例から見ていきましょう。
以下コードは両方とも「50、60、70、80、90」という5つ数値を扱えるように、
変数を用意したという点では同じです。

＜配列を使わない書き方＞

let score1 = 50;
let score2 = 60;
let score3 = 70;
let score4 = 80;
let score5 = 90;

＜配列を使用＞

let scores = [50, 60, 70, 80, 90];

このように、配列を使わない例では、5つ分の変数を用意する必要があります。
しかし、配列を使うと 一つの変数にまとめてデータを格納 することができます。

配列の定義と使用方法

JavaScriptで配列を定義するときは、まとめて入れたい情報を [] で囲ってカンマ区切りで並べていくだけです。

いま、変数 scores の中には 50, 60, 70, 80, 90 が入っています。
実はこの時点で、 添字（インデックス） と言う番号が割り振られます。
番号は左から順番に 「0から始まる」 数字で割り振られます。

では console.log で配列の中身を見てみましょう。

let scores = [50, 60, 70, 80, 90];
console.log(scores);

ブラウザを更新して、Consoleを確認してください。
△のマークをクリックすると、中身が展開されます。
変数 scores に5つの値が格納されているのが確認できました。

配列の特定の一部にアクセスしたい

例えば、3番目の「70」だけにアクセスしたい。
そんな時は、割り振られている添字（インデックス）を scores[] の [] に指定することでアクセスできます。

「70」は数えてみると左から3番目なので、うっかり scores[3] としてしまいそうです。
しかし、これはよくある間違いで、添字（インデックス）は 0から始まっている ので、scores[2] とするのが正解です。

//3番目の「70」にアクセスする例
let scores = [50, 60, 70, 80, 90];
console.log(scores[2]);

よく使われる「length」について

「配列に要素がいくつ入っているのか」 を教えてくれる length というものあります。
scores.length とすると scores の要素数は5つなので「5」が取得できます。

let scores = [50, 60, 70, 80, 90];
console.log(scores.length);

lengthの何が便利なのか

「要素の数がわかったからといって何か良いことがあるの？」と、使いどころがわからなければ思ってしまいそうです。

よく使われるテクニックが 「for文と組み合わせる」 というものです。
具体的には、for文を使って 「配列の値一つ一つに対して処理をしたい」 時です。

例えば、「得点は〇〇点です」というのを5つの要素一つ一つを出力したいとします。
要素は5つなので、5回ループすれば良いということで、for文の条件には i < 5 とすれば出力されますよね。

let scores = [50, 60, 70, 80, 90];
for (let i = 0; i < 5; i++) {
    console.log("得点は" + scores[i] + "点です");
}

しかし、次のように 何回ループしたらいいのかわからない場合はどうすればいいのでしょうか？
・「状況によって配列の要素数が変わる」
・「要素が多すぎて数えられない」
・「そもそも、まだ要素数が決まっていない」

そんな時、 length を使えば自動的に要素数を取得してくれるので、一発で解決します。

let scores = [50, 60, 70, 80, 90];
//scores.length で「5」が取得されるので、i < 5 と同じ意味になります。
for (let i = 0; i < scores.length; i++) {
    console.log("得点は" + scores[i] + "点です");
}

配列とループ文の組み合わせで、一件ずつ処理をしていく というのはよく使用する技になります。

オブジェクト

プログラミング言語によって、この「 オブジェクト 」は少し定義が異なったりするので、イメージしづらいかもしれません。
最初はなんとなくでも良いので、例を見ながら書き方に慣れていくことにしましょう。

定義

JavaScriptにおいて「オブジェクト」とは変数や関数をまとめて入れておける箱のようなものだと考えてください。
例えば「人間」をオブジェクトを使って定義してみましょう。

今までの配列の話では、値に添字（インデックス）をつけるだけで管理していました。
ちなみに、以下のように文字列と数値を混在させて書くこともできます。

let scores = [80, 90, '百点'];
//「百点」が出力されます。
console.log(scores[2]);

しかし、「人間」を構成する情報には、どのような情報が必要になるでしょうか？
・名前（文字列）
・身長（数値）
・体重（数値）
・性別（文字列）
・年齢（数値）
・話す（関数）
・歩く（関数）
・etc

このように、同じ数値でも 意味の違う数値 を複数持っていたりします。
（オブジェクトでは関数も管理することができます）
これをまとめて配列の形で管理すると、
「この120という数字は、身長か体重どちらの事なのだろう…？」
と、添字（インデックス）だけでは管理が大変です。

そこで、 それぞれの値に名前をつけて管理しよう というのが今回の話です。

オブジェクトの書き方

配列の場合は、値を [] で囲っていましたが、オブジェクトでは {} で囲みます。

//構造がわかりやすいように字下げをしていますが、カンマ区切りでデータを並べている点は配列と同じです。
let human = {
    name: 'yamada',
    height: 170,
    weight: 60,
    gender: "男",
    age: 30,
};

＜書き方の手順＞
①変数を用意
② {} で囲む
③キー : 値の形式でカンマ区切りで幾つでも並べられる（最後のカンマはあっても無くてもどちらでもOK）
④最後の } の後にセミコロンを忘れずに

＜アクセスの方法＞
この中の yamada にアクセスしたい場合は 「オブジェクト.キー」とするとアクセスできます。
今回のオブジェクトは「 human 」 yamada のキーは「 name 」なので「 human.name 」になります。

let human = {
    name: 'yamada',
    height: 170,
    weight: 60,
    gender: "男",
    age: 30,
};

console.log(human.name);
//以下の書き方もあります。
console.log(human['name']);

＜オブジェクトの構成＞
オブジェクトは、キーと値（value）の形で構成されています。
その一つ一つを「 プロパティ 」または「 メンバー 」といいます。

課題

理解度チェック
JavaScript→1-6というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

問1：10、15、20、25を含む配列の変数scoresを用意して、画像のように偶数だけを出力してください。

問2：ガソリンとナンバーのプロパティを持った「carオブジェクト」を作成して、ガソリンとナンバーを出力してください。