2021/04/10 (更新日: 2022/10/08)

JavaScriptのクラス

こんにちはあっくんです。コロナ流行ってますが、大丈夫でしょうか？僕は2日前に、PCR検査を受けにいってきました！身近な人に、出てしまって行かざるを得なくなりました。同居している家族にも、言ってきてほしいと言われ、渋々PCR検査に行きました。結果は陰性でした。
　PCR検査はなんばで2980円。唾液のみで、試験管にいれて、書類を記入しておわりました。検査を受けてみて、改めてコロナを身近に感じました。同居している家族は、父と母で、70歳近いので、感染すると致命的です。自分の行動(外出)で、人の命を左右することを改めて考えさせてくれました。
　PCR検査を通じて感じたのは、人の不安や安心を担保させてくれるものには、お金を払う価値がありますね。

JavaScriptのクラスについてやっていきましょー！！

クラスの作成

クラス構文はクラス名の1文字目は慣例的に大文字です。内部には、コンストラクター(constructor 構築子)と呼ばれる、初期化を行う関数を持ちます。
コンストラクターはクラスをnew演算子で実行した時に呼び出される関数です。
クラスにはメソッドを書くことができます。メソッドはインスタンスメソッドになります。

プロパティはキーと値がペアになっています。
メソッドは関数が入っているプロパティのことです。

構文

class クラス名{
  constructor(引数{
		初期化を行う化を行う
		this.プロパティ名パティ名= 代入する値;
 }
 メソッド名(引数{
		インスタンスメソッドになる
 }
Code language: JavaScript (javascript)

例、チョコクラスとチーズケーキオブジェクト

<html>
<script>
    // クラスを作成
    class Menu {
        // コンストラクター
        constructor(name, price) {
                // 初期化をおこなう
                this.name = name;
                this.price = price;
            }
            // インスタンスメソッド
        getInf() {
            // 文字列を作成
            const t = `${this.name} : ${this.price}`;

            // 戻り値を戻す
            return t;
        }
    }

    // クラスを使ってオブジェクトを作る
    const cake1 = new Menu("チョコケーキ", 460);
    const cake2 = new Menu("チーズケーキ", 440);

    // プロパティを使う
    console.log(cake1.name, cake1.price);
    console.log(cake2.name, cake2.price);

    // メソッドを使う
    console.log(cake1.getInf());
    console.log(cake2.getInf());
</script>

</html>
Code language: HTML, XML (xml)

静的メソッド

静的メソッドは、クラスオブジェクトから使うメソッドです。静的メソッドは、クラス構文の中で、メソッド名の前にstaticとつけると作れます。

構文

class クラス名{
	constructor(引数{
		インスタンスメソッドになる
	}
	static メソッド名(引数
		静的メソッドになるソッドになるドになる
	}
}
Code language: JavaScript (javascript)

例、静的メソッドcalcTax()作って、使います。

<html>
<script>
    // クラスを作成
    class Menu {
        // コンストラクター
        constructor(name, price) {
                // 初期化を行う
                this.name = name;
                this.price = price;
            }
            // 静的メソッド
        static calcTax(price, taxPer) {
            // 税込価格を計算
            const res = Math.trunc((price * (100 + taxPer)) / 100);

            // 戻り値を戻す
            return res;
        }
    }

    // 税込価格を計算する
    console.log(Menu.calcTax(440, 10));
    console.log(Menu.calcTax(460, 10));
</script>

</html>
Code language: HTML, XML (xml)

静的プロパティ

クラス構文の中に書くことはできません。

構文

class クラス名{
	constructor(引数{
		初期化を行う化を行う
		this.プロパティ名パティ名= 代入する値
	}
	メソッド名(引数{
		インスタンスメソッドになる
	}
}
Code language: JavaScript (javascript)

例、メニューの最低価格と最高価格の静的プロパティを作ります。

<html>
<script>
    // クラスを作成
    class Menu {
        // コンストラクター
        constructor(name, price) {
            // 初期化を行う
            this.name = name;
            this.price = price;
        }
    }
    Menu.MIN_PRICE = 100;
    Menu.MAX_PRICE = 2000;

    // 最低価格と最高価格をコンソールに出力
    console.log(Menu.MIN_PRICE);
    console.log(Menu.MAX_PRICE);
</script>

</html>
Code language: HTML, XML (xml)