👌

【初心者向け】クラスと連想配列で迷いながら学んだJavaScript

に公開
JavaScript
初心者
オブジェクト
クラス
連想配列
tech

はじめに

オブジェクト指向を学習してクラスを作るとき、プロパティとして数値や文字列は簡単に定義できますが、複数の値をまとめた連想配列（オブジェクト）をどのように扱うかは少し悩むかもしれません。

この記事では、クラス内で連想配列を定義し、インスタンスごとに情報を持たせる方法を紹介します。

クラスとコンストラクタのおさらい

オブジェクト指向におけるクラスは「設計図」のようなもので、インスタンスを作成するためのひな形です。
クラスを使うとき、コンストラクタ関数を定義して初期化処理を行い、メソッドを定義して操作をまとめるのが一般的です。

例えば、次のようなコードを書いたことがあるかもしれません。

例
class Wallpaper {
    // コンストラクタ関数
    constructor(text, colorCode, imgUrl, vertical, horizontal){
        this.text = text;
        this.colorCode = colorCode;
        this.imgUrl = imgUrl;
        this.vertival = vertical;
        this.horizontal = horizontal;
    }

    // メソッド
    generateHTML(){
        ...
    }
}

ここでいうコンストラクタは「初期化用の関数」であり、クラスをもとにインスタンスを生成すると、この設定を引き継ぐことができます。

クラス内に連想配列を定義する

クラスに連想配列を追加することで、インスタンスごとに柔軟に参照できる情報を持たせることができます。

連想配列を追加した例
class Wallpaper {
    constructor(text, colorCode, imgUrl, vertical, horizontal){
        this.text = text;
        this.colorCode = colorCode;
        this.imgUrl = imgUrl;
        this.vertival = vertical;
        this.horizontal = horizontal;
    }

    // クラス内で定義した連想配列
    verticalTable = {
        "top" : "align-items-start",
        "center" : "align-items-center",
        "bottom" : "align-items-end"
    }
}

このように定義しておくことで、インスタンスを作成した際に、連想配列の情報も一緒に持つことができます。

実際の使い方

インスタンスを生成
const wallpaper1 = new Wallpaper("Hello", "#fff", "image.jpg", "top", "left");

console.log(wallpaper1.verticalTable[wallpaper1.vertival]);
// 出力: "align-items-start"

これによって、インスタンスを生成した時に、この連想配列の情報をインスタンスが持つことになります。

まとめ

  • クラス内では、文字列や数値だけでなく連想配列（オブジェクト）もプロパティとして定義できる
  • インスタンスを作成すると、その連想配列も引き継がれる
  • 連想配列を使うことで、状態に応じた情報の参照や変換が簡単になる

この点が開発のお役に立てますと幸いです。

最後までお読みいただき、ありがとうございました。

参考URL

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/Public_class_fields

Discussion