ReactのためのJavaScript – クラス

JavaScript React


はじめに

Reactを学ぶためのモダンなJavaScriptについてまとめます。

今回はECMAScript2015(ES6)から導入されたクラスについて書いていきます。基本的に他言語におけるクラスと同じですが、クラスの作成方法やプロパティの定義の仕方が独自ですのでまとめていきます。


この記事では以下について書いていきます。

  • クラスの作り方/使い方
  • 継承
  • 静的メソッド


クラスの作り方

JavaScriptのクラスの作り方ですが、クラス宣言とクラス式の2通りがあります。

クラス宣言

class Cat {
    constructor(name) {
        //プロパティを定義
        this.name = name;
    }
    crowing() {
        console.log(`${this.name}が鳴きました`);
    }
}

const cat = new Cat('三毛猫');
cat.crowing(); //=> 三毛猫が鳴きました


クラス式

クラス式は、名前付きと無名の2通りがあります。


//名前付きクラス
const cat = class Cat {
    constructor(name) {
        //プロパティを定義
        this.name = name;
    }
    crowing() {
        console.log(`${this.name}が鳴きました`);
    }
}

const c = new cat('三毛猫');
c.crowing(); //=> 三毛猫が鳴きました

//無名クラス
const cat = class {
    constructor(name) {
        //プロパティを定義
        this.name = name;
    }
    crowing() {
        console.log(`${this.name}が鳴きました`);
    }
}

const c = new cat('三毛猫');
cat.crowing(); //=> 三毛猫が鳴きました


クラス宣言もクラス式もインスタンス化のやり方や使い方に違いはありません。

ところで、JavaScriptのクラスには次のような独自の決まりがあります。

巻き上げがない、というのは、そのクラスを宣言する前にクラスにアクセスすることができない、ということです。逆にいうと、クラスにアクセスする前に、そのクラスを宣言する必要があります。

なので、↓のようなコードはエラーになります。

const cat = new Cat(); //=> ReferenceError: Cannot access 'Cat' before initialization

class Cat {
   ...
}


継承

続いて継承です。継承とは、既存クラスの機能、構造を共有する新たなクラスを定義すること(サブクラス化)。

ここでは、

  1. コンストラクターの上書き
  2. メソッドの上書き
  3. メソッドの追加

の例を書いてみます。こんな感じです。

class Cat {
    constructor(name) {
        this.name = name;
    }
    crowing() {
        console.log(`${this.name}が鳴きました`);
    }
}

//継承クラス
class Lion extends Cat {

    constructor(enemy) {
        //constructorの上書き
        super();
        this.enemy = enemy;
    }

    crowing() {
        //メソッドの上書き
        super.crowing;
        console.log('ライオンが鳴きました');
    }

    //メソッドの追加
    growling() {
        console.log(`${this.enemy}に向かって唸っています`);
    }
}

const lion = new Lion('ワニ');
lion.crowing(); //=> ライオンが鳴きました
lion.growling(); //=> ワニに向かって唸っています

JavaScriptの継承では、コンストラクターの上書きに注意が必要です。必ずsuper()をつけましょう。super()をつけないとこのようなエラーがでます。

class Cat {
    constructor(name) {
        this.name = name;
    }
    crowing() {
        console.log(`${this.name}が鳴きました`);
    }
}

//継承クラス
class Lion extends Cat {

    constructor(enemy) {
        //super()をつけ忘れると..
        this.enemy = enemy;
    }
    ....
}
const lion = new Lion('ワニ');
//=> Uncaught ReferenceError: 
//Must call super constructor in derived class 
//before accessing 'this' or returning from derived constructor


静的メソッド

また、JavaScriptのクラスには静的メソッドと呼ばれる、クラスそのものから呼び出せるメソッドを定義できます。逆に、インスタンス化して呼ぶとエラーになります。

class Cat {
    static crowing(name) {
        console.log(`${this.name}が鳴きました`);
    }
}
Cat.crowing('三毛猫'); //=> 三毛猫が鳴きました

const cat = Cat();
cat.crowing('三毛猫'); //=> TypeError: Class constructor Cat cannot be invoked without 'new'

今回は以上になります。ご覧頂きありがとうございました。

こちらで他のテーマも扱ってるのでよかったらぜひ！

https://morelia.tokyo/javascript/react-javascript-introduction/