JavaScript待望のクラス。（現代的JavaScriptおれおれアドベントカレンダー2017 – 04日目）

現代的JavaScriptおれおれアドベントカレンダー2017 – 04日目

JavaScriptはオブジェクト指向プログラミング言語の一種ですが、「クラスベース」の他言語と異なり「プロトタイプベース」だと言われています。クラスの代わりにプロトタイプ prototype を使ってあれやこれやしてきました。

そんな我が道を行くJS君でしたが、やっぱり寂しかったのか、クラスの仕組みが導入されました。継承もできる。使っていきましょう。

使い方

ざっくりこんな感じ。

class Sushi {
  constructor(neta) {
    this.neta = neta;
  }

  get name() {
    return this.neta;
  }

  make() {
    console.log(`Hey ${this.name} o-match!`);
  }
}

const tuna = new Sushi('tuna');
tuna.make();  // => "Hey tuna o-match!"

なんとなくオブジェクトにメソッド書いてきたやりかたに近い感じですね。カンマとかいらないけど。

constructor() はインスタンス生成時に自動的に呼ばれるやつです。プロパティの初期化とかしましょう。

プロパティ

メソッドは前項のように書けるんですが、プロパティはどうするかというと、全部 constructor() の中で、動的に this へ追加していきます。

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

JavaScriptのクラスはメソッド（か静的メソッド）しか定義できません。無理やり書くと “Exception: SyntaxError: bad method definition” とかになります。（プロパティも書けるようになるとかいう話も聞いた気がするけど、ES2017でもそうなってないすね。）

他の言語やってると「ンン！」という感じあるかもしれないですけど、まあほらJavaScriptは動的にプロパティ持てるから……。むしろ静的に持とうとすると失敗する (FAQ) から……。どうせ初期化時に値を設定するんだからこっちの方がわかりやすくない？　だめ？　だめならいいです。

あとは代替手段じゃないですけど、今回の name のように、getterを用意するという手もあります。場合によってはこちらもご検討ください。（別稿参照）

継承

extends でやります。あと constructor() からは super() で継承元クラスのコンストラクタを実行しましょう。

class SushiRoll extends Sushi {
  constructor(neta) {
    super(neta);
  }

  get name() {
    return `${this.neta} roll`;
  }
}

const californiaRoll = new SushiRoll('california');
californiaRoll.make();  // => "Hey california roll o-match!"

extends の右辺、上記の Sushi の部分には割と何でも書ける感じです。例えばここに class 式を丸ごとぶっこむことも可能です。（実践はご遠慮ください。）

静的メソッド（クラスメソッド）

static を付けます。

class Sushi {
  static prepareSumeshi() {
    console.log('Cooking rice...');
  }

  // ...
}

Sushi.prepareSumeshi();

`class` 宣言と `class` 式

function と同様に、クラスも宣言 (declaration) と式 (expression) の両方が用意されています。前項の例は宣言の方ですね。（セミコロンもいらない。）

いちおう、 class 式で書いて関数の引数にクラスを与えたりできます。

// 引数に
console.log(class {});

// 変数に
const Tako = class extends SushiNeta {
  // ...
};

それより module.exports に与えるのがありそう。

module.exports = class MyModule {
  // ...
};

ちなみに export に与える場合は宣言扱いです。セミコロン不要。

export default class MyModule {
  // ...
}

その他

巻き上げがない

var に対する let のように（？）、 class も function と異なり「巻き上げ」が起こりません。

なのでこれ↓だと未定義エラー。

const tuna = new Sushi('tuna');  // Uncaught ReferenceError: Sushi is not defined
                                 // Exception: ReferenceError: can't access lexical declaration `Sushi' before initialization

class Sushi {
}

常にStrictモード

クラス記法の中身は常に厳格な記述をすることになってます。

Strict モード – JavaScript | MDN

変数宣言なしで foo = 123 とか書いたらグローバル変数が作られる代わりにエラーになります。うれしい。

“Exception: ReferenceError: |this| used uninitialized in Bar class constructor”

コンストラクタの最初に super() を呼んでください。

Uncaught ReferenceError: Must call super constructor in derived class before accessing ‘this’ or returning from derived constructor

実際は最初じゃなくてもいいんですが、スーパーコンストラクタに与える値をこねくり回す以外の処理はやめましょう。

どうしても長くて関数にしたい場合は、クラスメソッドにするかなあ。

class Bar extends Foo {
  constructor(v) {
    const v2 = Bar.makeFoo(v);
    super(v2);
  }
  
  static makeFoo(v) {
    return { foo: v.toUpperCase() };
  }
}

“Exception: SyntaxError: missing { before class body”

ついうっかりクラス名の方に括弧書いちゃうとこのエラーが出ます。

class Foo() {  // Uncaught SyntaxError: Unexpected token (
}

もちろん正しくはこうです。

class Foo {
}

`prototype` は健在

いちおうクラスという仕組みはできたんですが、その実態は今まで通りの prototype ベースのオブジェクトだったりします。なのでクラスを作ったら Foo.prototype は健在です。

クラスが紹介されたときも「これはただの糖衣構文 (syntax sugar) だ」と言われてました。（なのでBabelで旧環境向けに変換できる。）

互換性を保持したということっすかね。

参考

ECMAScript 2015 Language Specification – ECMA-262 6th Edition
- 14.5 Class Definitions
- 14.5.11 Static Semantics: PrototypePropertyNameList … プロトタイプオブジェクトを用意する話
- 14.5.14 Runtime Semantics: ClassDefinitionEvaluation … プロトタイプオブジェクトを作る話
- 10.2.1 Strict Mode Code … クラスはStrictモードだよ
- 13.1.4 Static Semantics: DeclarationPart … 巻き上げについて
- 15.2.3 Exports … export の右辺はクラス宣言
class – JavaScript | MDN

ついでに

この記事で、このブログのちょうど256件目の記事みたいです。思ったより少ない。

使い方