console.log( User.speak() );

実行結果

みなさん、こんにちは

このようにクラス名に続けてspeak()を実行すればいいわけです。

privateなプロパティについて

この章では、プライベート(private)なプロパティについて見ていきましょう！

主に、パブリックなプロパティとSymbolによる固有のIDを使ったプロパティの作り方について学んでいきます。

パブリックなプロパティとは？

これまで基本的なクラスの作り方を見てきましたが、注意するべき点もいくつかあります。

特に、コンストラクタ内で定義したプロパティは「パブリック」なのでどこからでもアクセスできてしまうという点には注意が必要です。

例えば、次のようなクラスがあるとします。

class User1 {
 
    constructor(value) {
        this.name = value;
    }
   
    get myName() {
      return this.name;
    }
 
}

このクラスは、名前を保持する「name」という単純なプロパティが登録されており、ゲッターでその名前を取得できるようになっていますね。

しかし、ゲッターを使わなくても直接プロパティを指定することで名前が取得できてしまっているのが分かります。

var taro = new User1('太郎');

//直接プロパティを指定
console.log(taro.name);

//ゲッターを利用
console.log(taro.myName);

実行結果

太郎

太郎

このように「taro.name」へ直接アクセスできるため、どこからでも値が変更されてしまう危険性があるわけです。

Symbolを利用したプロパティの作り方

簡単な手順でプロパティに直接アクセスできないようにするため、新しく導入された「Symbol」を使ってみましょう！

Symbolを使うと、固有のユニークなIDを自動生成してくれるので完全に異なる変数を作成できるという特徴があります。

例えば、次のサンプル例を見てください！

const sample1 = Symbol('sample');
const sample2 = Symbol('sample');
  
console.log(sample1 === sample2);

実行結果

false

まったく同じSymbolを2つの変数へ代入しているのが分かりますね。

しかし、比較してみるとそれぞれの変数は異なるため結果的に「false」になっているのが分かります。

つまり、固有のIDが割り振られているため同じ変数にはならないわけです。

これを応用して、クラスのプロパティに導入してみましょう！

var User2 = (function() {
  const name = Symbol('name');

  class User2 {
    constructor(value) {
      this[name] = value;
    }

    get myName() {
      return this[name];
    }
  }

  return User2;
})();

基本的なクラスの構造は同じですが、Symbolを使ってプロパティを作成しているのが分かりますね。

また、即時関数でクラスごと囲むことで外部からのプロパティへのアクセスを遮断しています。

このようなクラス構造で、もう一度プロパティへ直接アクセスしてみましょう！

var sato = new User2('佐藤');

//直接プロパティを指定
console.log(sato[name]);

//ゲッターを利用
console.log(sato.myName);

実行結果

undefined

佐藤

「sato[name]」のように直接プロパティへアクセスできないことが分かりますね。

アクセスする場合はゲッターを利用するという正常な状態になるわけです。

しかしながら、「Object.getOwnPropertySymbols()」を利用するとSymbolを取得できるので完全にアクセスできないわけではない点には注意しましょう。

クラスの継承

この章では、クラスの継承について詳しく見ていきましょう！

主に、「extends」を使った継承方法と「super」を使ったオーバーライドについて学んでいきます。

「extends」を使った継承方法

class構文を利用した継承の方法について見ていきましょう。

class構文を使うと旧来の継承方法よりも簡単に記述できるようになります。

例えば、次のような「User」クラスがあるとします。

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

これは単純に「name」「age」というプロパティをコンストラクタで定義したシンプルなクラスです。

このUserクラスを継承して新しいクラスを作成するには、次のように記述します。

class Man extends User {
    speak() {
        console.log(this.name + 'さん、こんにちは');
    }
}

この例では、extendsを使って「User」クラスを継承しているのがわかりますね。

注目して欲しいのは、「Man」クラスにコンストラクタを記述していない点です。

そして、次のようにインスタンスを生成して利用してみましょう！

var taro = new Man( '太郎', 34 );

taro.speak();

実行結果

太郎さん、こんんちは

メソッドはManクラスのメソッドですが、「User」クラスのコンストラクタが使われているのがわかります。

つまり、Userクラスが正常に継承されているわけです。

「super」を使ったオーバーライドの方法

基本的な継承が分かったところで、今度は継承元のプロパティやメソッドをオーバーライドする方法について見ていきましょう！

オーバーライドというのは、簡単に言うと継承元のプロパティ・メソッドを上書きするという意味になります。

例えば、次のようなクラスがあるとします。

class User {
 
    constructor(name) {
        this.name = name;
    }
   
    get myName() {
      return this.name;
    }
 
}

これは、名前を保持するプロパティとその名前を返すメソッド（ゲッター）が登録されていますね。

このクラスを継承して新しく「Person」というクラスを作ってみましょう。

class Person extends User {

  constructor(userName, userAge) {
    this.name = userName;
    this.age = userAge;
  }

}

これは名前と年齢を保持するプロパティを持っていますね。

このPersonクラスを使って次のように実行してみます！

var taro = new Person('太郎', 30);

console.log(taro.myName);

しかしながら、これは結果的に「myName」が使えずにエラーになるという点に注目しましょう！

PersonクラスはUserクラスを継承しているので、普通に考えれば「myName」メソッドが利用できるはずです。

しかし、Personクラス内で新しくコンストラクタを定義しているので、継承元のコンストラクタが使われずに正しく機能していないのです。

このような状況下で、継承元のコンストラクタを使いつつ新しいプロパティも定義したい場合にオーバーライドが効果的なのです。

次のサンプル例を見てください！

class Person extends User {

  constructor(userName, userAge) {
    super(userName);
    this.age = userAge;
  }
  
}

この例では、「super()」を使うことで継承元のプロパティにアクセスして名前を保持しているわけです。

このように記述することで「myName」メソッドは正しく動作するようになります。

まとめ

今回は、JavaScriptで新しく導入されたclass構文について学習をしました！

最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひみなさんも活用してみてください！