Aureliaドキュメントほんやくろぐ : ES7 decorator の導入

はじめに

3月の終わり頃、なんかとつぜんのやる気が生まれ、Aureliaのdocumentation/Japaneseを翻訳しました。ところが、Aureliaはバージョンアップが早く、しかも結構な量のドキュメントが更新されるので、翻訳の更新にも時間がかかってしまいます。

翻訳更新時に差分はわかりますから、ここに、翻訳時に分かった差分を公開していこうと思います。

get-started.html の更新 (4/12時点)

ES7 decoratorの導入

4/12現在のget-started.html (日本語版) には、ES7のdecoratorを将来導入するぜ、みたいなことが書いてありますが、予告通り導入されたようです。(※動かしていません)

現在のget-started.html (日本語版) を読んでいただくとわかりますが、メタデータをスタティックメソッドで定義していました。例えばルータを使うアプリケーションは

import {Router} from 'aurelia-router';
import bootstrap from 'bootstrap';

export class App {
  static inject() { return [Router]; }
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        { route: ['','welcome'], moduleId: 'welcome', nav: true, title:'Welcome' }
      ]);
    });
  }
}

と書いていました。これが、decoratorの導入によって、

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        { route: ['','welcome'],  moduleId: './welcome',      nav: true, title:'Welcome' }
      ]);
    });
  }
}

こうなります。なんでbootstrapの定義の仕方まで変わっているんだろう。。。
これは巷で話題のTS 1.5のdecoratorでも動作する、、、はずです。試してないですけど。gitterでそんな話をしていました。たぶん。

Bindable decorator

decoratorを導入したことで、今までメタデータで定義していたものをdecoratorで置き換えたようです。元々、カスタムエレメントでカスタム属性を示すために、Behaviorメタデータを使っていました。

import {Behavior} from 'aurelia-framework';

export class NavBar {
  static metadata(){ return Behavior.withProperty('router'); }
}

これが、@bindable となりました。

import {bindable} from 'aurelia-framework';

export class NavBar {
  @bindable router = null;
}

シンプルになりました。null入れるの気持ち悪いですが、デフォルト値が設定できるのかな?

get-started.html ベースの変更点はこんな感じです。今まで結構メタデータであれこれしていたところが全部decoratorベースに置き換わると思うので、docs.html の修正は結構な量になりそうです。。。

翻訳中に分かったものからここに記載していこうと思います。