JavaScript　クラス　

JavaScript クラス JavaScript

クラスは、テンプレートのようなものでデータと処理をまとめたものです
定義されたクラスは、同じ構造を持つ1つまたは複数の変数にセット、インスタンス化して使用することができます

クラスの構造
class クラス名 {
プロパティ名 = 値
メソッド名() { 処理 }
}

クラスの定義

クラス内のプロパティ「xxx」「yyy」に引数で値を設定する場合には
「constructor」を使います

class Aaa {
  constructor( xxx , yyy ) {
      this.xxx = xxx;
      this.yyy = yyy;
   }
   func() {
       console.log(` ${this.xxx} is ${this.yyy} `);
   }
};

クラス名

クラス名は先頭の一文字を大文字で記述するパスカルケースを使います
上記の例で、「Aaa」です
また、プロパティ名、メソッド名は、キャメルケースを使います

インスタンス化

クラスをインスタンス化することでオブジェクトとして扱えるようになります
そのためには、インスタンスを作成する際に「new」演算子を使用します

「new」演算子を使用してクラスを指定するとクラス内のコンストラクタが実行されインスタンス化することが来ます
その際にコンストラクタを実行してプロパティに値を引き渡すこともできます
「this.」キーワードで渡された値は、生成されたオブジェクト内のプロパティの値となります
つまり、thisは生成されたオブジェクトを指します

以下では「new」演算子で先に記述した「Aaa」クラスを基にインスタンス化します

const ccc = new Aaa( 'argument01' , 'argument02' ) ;
console.log(ccc.xxx , ccc.yyy  );// argument01 argument02

ccc.func() ;//  argument01 is argument02

メゾッドの指定は、プロパティ同様にインスタンス化したオブジェクトに「.」を付けて指定します
その際に、値を引数として渡すこともできます

クラス内のメソッドもそのメソッド内でさらにメソッドを指定することもできます

class Aaa {
  constructor( xxx , yyy ) {
      this.xxx = xxx;
      this.yyy = yyy;
   }
   func() {
       this.msg();
       console.log(` ${this.xxx} is ${this.yyy} `);
   }
   msg() {
       console.log('表示するメッセージ');
   }
};

スタティックプロパティ（静的プロパティ）、スタティックメソッド（静的メソッド）

staticキーワードを付加することでインスタンス化無しでクラスに直接アクセスできます
サンプルでは直接クラスにアクセスして値を取得しています

class Cal {
  static PI = 3.14;
  static CL(x) {
    return x * x * Cal.PI;
  }
}
//インスタンス化しなくてもCalクラス内にアクセス可能
console.log(Cal.PI); // 3.14
console.log(Cal.CL(20)); // 1256

//インスタンス化してみると
const ggg = new Cal;
console.log(ggg.PI); // undefined
console.log(ggg.constructor.PI); // 3.14

console.log(ggg.CL(20)); // エラーになる
console.log(ggg.constructor.CL(20));　// 1256

インスタンス化したオブジェクトからはconstructorを追加することでアクセスが可能になる
これは、静的メソッドでも同じです

ゲッター、セッター

クラス内で「get」,「set」を使用することでメソッドをプロパティのように扱うことができるようになります
クラスから値を取得する「get」
クラスに値をセットする「set」

class Aaa {
    constructor( xxx , yyy ) {
        this.xxx = xxx;
        this.yyy = yyy;
    }
    get txt() {
        return this.xxx + this.yyy
    }
    set eg(vv) {
        this.vv = vv
    }
    get eg() {
        // セットした値を2倍します
        return this.vv * 2;
    }
}


const zz = new Aaa(5,10);
console.log(zz.txt); // 15
zz.eg = 30;
console.log(zz.eg); // 60

クラスの継承

クラスを基に別のクラスを作ることができます
その際に新たなプロパティを追加設定することもできます
Aaaクラスを継承してBbbクラスを定義します

class Bbb extends Aaa {
  constructor(xxx, yyy, zzz) {
    super(xxx, yyy); // super()関数を使って継承元のプロパティを引きつぎます
    this.zzz = zzz; // さらにBbbクラスにプロパティを追加します
    }
    // このクラスに新たなメソッドを追加します
    func02() {
      console.log(` ${this.xxx} is ${this.yyy} and ${this.zzz} `);
    }
 };

このように、JavaScriptクラスを使うと、オブジェクトを簡単に作ったり、データや処理をまとめたりすることができます
クラスは、プログラムをわかりやすくしたり、再利用性や拡張性を高めたりするための機能です

今回は以上です

コメント