【JavaScript】「クラス」を簡単に解説

おはようございます。Shotaです。

前回はJavaScriptの基本的な文法について軽く説明しました。今回はJavaScriptの「クラス」について徹底解説します。

JavaScriptもPythonやKotlinと同じように「オブジェクト指向プログラミング言語」なので、クラスについては別で詳細に解説していきます。(クラスはオブジェクト指向の中核を担う概念だから)

それでは早速、本題に入りましょう。

クラス

JavaScriptにおける「クラス」は、クラス式とクラス宣言の2つの定義方法があります。

クラス宣言

クラスを宣言するためには、classの後にクラス名を書きます。

class Rectangle {
    constructor(height, width) {
        this.height = height
        this.width = width
    } 
}

上記コードのthisとは、thisが所属している関数を実行するオブジェクトのことです。(今回はクラスの説明なので、thisの説明は割愛します。詳細は公式docsを参照ください)

クラス式

クラスを定義するもう一つの方法はクラス式です。クラス式は名前の有無に関係なく作れます。

// 無名関数
let arg1 = class {
    constructor(height, width) {
        this.height = height
        this.width = width
    }
}
console.log(arg1.name) // クラス名を出力

// 名前あり
let arg2 = class Rectangle {
    constructor(height, width) {
        this.height = height
        this.width = width
    }
}
console.log(arg2.name)

▼実行結果

arg1
Rectangle

クラス本体とメソッド定義

{}内にクラス本体を記述します。クラス本体には、メソッドやコンストラクタ、プロパティのようなクラスメンバーを書きます。

コンストラクタは、最初にclassで作成したオブジェクトを作って初期化するための特別なメソッドです。constructorという名前のメソッドはクラスに一つしか定義できません。

メソッド定義

メソッドはクラス内で定義される関数を指します。以下のように書きます。

const obj = {
    // メソッド
    hoge() {
        return 'HOGE'
    }
}

console.log(obj.hoge())

▼実行結果

HOGE

上記のコードでは無名クラスのインスタンス(クラスを使えるようにしたもの)であるobjのメソッドhogeを使って文字列を出力しています。

作り方はそこまで難しくなく、クラスの中に関数を書くだけです。(関数の構文は全く同じ)

クラス継承

JavaScriptでは、クラスを継承する際にはextendsを使います。

class Language {
    constructor(name) {
        this.name = name
    }

    show() {
        console.log(`learning ${this.name}...`)
    }
}

class JavaScript extends Language {
    constructor(name) {
        super(name) // superで呼び出し元のクラスの処理を使う
    }

    learn() {
        console.log(`${this.name} programming...`)
    }
}

// インスタンスの作成はnew
let x = new JavaScript('React')
x.learn()

▼実行結果

React programming...

ただし、継承する場合は子クラス(継承したクラス)のメソッドが親クラス(継承されたクラス)よりも優先されることには注意してください。

注意：クラス名は大文字で始める

JavaScriptでは慣習としてクラス名には大文字で始まる名前をつけます。

名前自体に特別なルールがあるわけではなく、クラス名を大文字にしておいてそのインスタンスを小文字で始めれば名前が重複しないという合理的な理由で好まれています。

class Hoge {}
const hoge = new Hoge()

まとめ

今回はJavaScriptの「クラス」について簡単に説明しました。

今回の記事を参考に、JavaScriptへの理解を深めていただけると幸いです。

今回の記事はこれで終了です。

【参考サイト】

jsprimer.net

developer.mozilla.org

qiita.com