スポンサーリンク
JavaScript超入門

【JavaScript超入門】オブジェクト指向！クラスについて詳しく解説

  /

今回は、JavaScriptのクラスについて詳しく解説します。

classはES2015に導入された新しい書き方です。PHPやJavaなど、他の言語を学んだことがある方は、なんとなく直感的に理解できるはずです。

class を使用することで、より分かりやすくオブジェクトを生成できるようになりました。

クラスの基本

まずは基本的なクラスの書き方について押さえておきましょう。

class Member {
    
    // コンストラクタ
    constructor(name) {
        // プロパティを定義
        this.name = name;
    }

    // メソッド
    getName() {
        return this.name;
    }
}

let member = new Member('tanaka');
console.log(member.getName())

 

コンストラクタ

コンストラクタは、クラスをnewしてインスタンスを生成した時に、一番最初に実行されます。コンストラタへの引数は、

let member = new Member('tanaka');

newした時に、( ) で渡すことができます。

このサンプルソースでは、nameというプロパティに引数で渡ってきた値をセットしています。

このクラス内のthisは、インスタンス自身を指します。

this.name と書くと、このインスタンスのnameプロパティになります。

メソッド

// メソッド
getName() {
　　　　return this.getName;
}

このようにfunctionキーワードなしにメソッドを宣言することができます。

メソッドは全てpublic になり、private  はありません。

プロパティを定義

class Member {
    name = ''

    constructor(name) {
        this.name = name;
    }

このようにプロパティをあらかじめ宣言することもできます。

プロパティをプライベートに

何もつけずに宣言したプロパティは、すべてpublicになります。

プライベートにするには、プロパティ名に#をつけます。

class Member {
    #name = ''

    constructor(name) {
        this.#name = name;
    }

プライベートにアクセスできないことを確認

class Member {
    name = ''
    #age = 0
    // コンストラクタ
    constructor(name, age) {
        // プロパティを定義
        this.name = name;
        this.#age = name;
    }

    // メソッド
    getName() {
        return this.name;
    }
}

let member = new Member('tanaka', 20);

console.log(member.name)　// tanaka
console.log(member.age) // undefined

publicなname は出力されて、privateなageはundefinedになることを確認できます。

静的な static

プロパティ、メソッドにstaticをつけることで、インスタンス化せずにアクセスすることができます。

class Member {
    static name = 'suzuki'
}

console.log(Member.name)

 

継承

クラスの継承はextends を使用します。

class BaseMember {
    
}

class Member extends BaseMember {
    
}

 

親のメソッドを呼ぶ super

親のメソッドを呼ぶには、superを使用します。

class BaseMember {
    constructor(name) {
        this.name = name;
    }
    
}

class Member extends BaseMember {
    constructor(name, age) {
        super(name)
        this.age = age;
    }
    
    show() {
        console.log(this.name, this.age)
    }
    
}

let member = new Member('tanaka', 20);
member.show()

 

このサンプルコードでは、Memberクラスのコンストラクタ内で、親のコンストラクタにsuperを使用してnameを渡しています。

親のプロパティにアクセスするときは、

show() {
　　　　console.log(this.name, this.age)
}

このようにthisでアクセスすることができます。

 

JavaScript
RELATED POST