【入門者向け】配列・連想配列・クラスーオブジェクトを図解で学ぼう

一気に見ると大変なので、学習状況によって一つずつ見てくださいね。
一気見すると一瞬ですが、きちんと学習しようとすると、半日＋半日以上かかるつもりで読み進めてください。

目次

• 条件分岐編
• 繰り返し処理編
• 配列・連想配列・クラスーオブジェクト編（ここ）

本題１：配列と連想配列

配列

複数の値を 順序付けて 格納するためのデータ構造です。

• インデックス（添字） を使って要素を取り出します
• インデックスは0から始まります
• 要素の順序が保持されます

let fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "バナナ"

連想配列

キーと値のペアを使ってデータを格納する構造です。

• キー を使って値にアクセスします
• キーは文字列（または Symbol）です
• 要素の順序は保証されません

let person = {
    name: "太郎",
    age: 30,
    city: "東京"
};
console.log(person.name); // "太郎"
console.log(person["age"]); // 30

ポイントをまとめます。

本題2：連想配列とクラスーオブジェクト

クラス（独自オブジェクト）

連想配列の特徴を「クラスーオブジェクトとの比較」に注目して見直します。

• キーを使って値にアクセスします
• データの保持が主な目的です
• メソッド（=function。関数）は通常含みません
  • やれなくはない、という意味であり、通常の用途としては考えません

let taro = {
    name: "太郎",
    age: 30,
    city: "東京"
};
console.log(taro.name); // "太郎"
console.log(taro["age"]); // 30

では、本題。
クラスは、データ（プロパティ）とそれを操作するメソッド（関数）をまとめたものです。

// クラスの定義。データは入っていないのでまだ使えない
class Person {
    constructor(name, age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }
}

// 重要なポイント！「class Person」にデータを入れて使えるようにしています（＝インスタンス化）
let taro = new Person("太郎", 30, "東京");
console.log(taro.name); // "太郎"
console.log(taro["age"]); // 30

重要ポイント：クラスを使って再利用性を高める

コメント内の「重要なポイント！」がめっちゃくちゃ重要です。
class Person自体には特定のデータがないので、new Person(name="太郎", age=30, city="東京")としてデータを格納しています。
その結果をlet taroで受け取りました。

これにより、以下のような事ができます。
繰り返しになりますが「再利用性」がキーワードです。

// classは一度作るだけでよく、インスタンス化だけする
let jiro = new Person("次郎", 35, "大阪");
console.log(jiro.name); // "次郎"
console.log(jiro["age"]); // 35

// 先ほど作った太郎さんのデータは変更されない
console.log(taro.name); // "太郎"
console.log(taro["age"]); // 30

では、これを連想配列で書き直してみます。

let jiro = {
    name: "次郎",
    age: 35,
    city: "大阪"
};

これで同じ事（＝やりたい事）はできます。
が、連想配列で作ったtaroとjiroが必ずname, age, cityを持っていることを誰も担保してくれません。
対して、new Personで作成したオブジェクトは必ずname, age, cityを持っていることをclassが保証してくれます。

補足（という名の、もう一つの重要要素）：メソッド

• クラスの定義
• インスタンス化したオブジェクト

の関係をもう一度確認しておきましょう。

ここまでは連想配列との比較に注目したので、プロパティの話だけをしました。
が、クラス・オブジェクトの強みはメソッドを持たせられる事にあります。
先ほども言及した通り、クラスをnewしてインスタンス化したオブジェクトは全て同じ構造になることが担保されているため、当然メソッドも持ちます。

以下のサンプルコードで動作を確認してみましょう。
クラスもちょっとだけいじります。具体的には、メソッドを追加しました。

class Person {
    constructor(name, age, city) {
        this.name = name;
        this.age = age;
        this.city = city;
    }

    // メソッドを追加
    hello() {
        console.log("私の名前は " + this.name + " です。");
    }
}

let taro = new Person("太郎", 30, "東京");
taro.hello();  // 私の名前は 太郎 です。

let jiro = new Person("次郎", 35, "大阪");
taro.hello();  // 私の名前は 次郎 です。

太郎さんがhelloと言うのと、次郎さんがhelloと言うのとで結果が異なりますね。
どちらもhelloと言えるよ！というのがクラスを使う事のメリットです。

総まとめ：連想配列とクラスの使い分け

ここまでの内容をふまえて、あらためて考えていきましょう。

ここまでです。読了お疲れ様でした。

次の章へ

• 条件分岐編
• 繰り返し処理編
• 配列・連想配列・クラスーオブジェクト編（ここ）

おねがい