Aureliaのdocs.mdに書いてある機能を試す(1)

skelton-navigationも動作したので、docs.md に書いてある機能を試していくことにします。docs.md は機能の説明はあるんですが、動くコードが見当たらなかったりすることもしばしばあるので、skelton-navigationをベースにdocs.md の機能を確認していくことにします。

初期化時の設定スクリプト

Aureliaの初期化時にフレームワークの設定を変更したり、任意のコードを実行したりします。これは、最新のskelton-navigationにはanimationのサンプルとして入っています。skelton-navigationの補足 を見ていただけると使い方がわかると思います。

注意しなければならない点として、この機能を使うとAureliaの初期化は行われなくなり、自分で必要な初期化を行わなければなりません。
サンプルのconfigureスクリプトのうち

  aurelia.use
    .standardConfiguration()
    .developmentLogging()

この部分だけが、必要な初期化になります。standardConfiguration は標準の初期化を行うための便利関数です。中で何をやっているかは、bootstrapperのソース を見ると良いでしょう。

ロガー

上記では合わせてロガーの設定(developmentLogging)をしています。中ではコンソールアペンダーをセットしています。
docs.mdでは、ログの出し方やログレベルの設定もわかるだろ? って書いてあるんですが、分からないです。はい。

先ほどのbootstrapperのソース中でも使っているので分かりました。使い方は

• LogManagerをimport
• debug / info / warn / error の各メソッドでレベルを指定
• 引数を渡せる

ログをapp.js に組み込んでみたのが下記です。

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

// ロガーの取得。この時出力するクラス名をセット
var logger = LogManager.getLogger('app');


@inject(Router)
export class App {
  constructor(router) {
    //debugログ
    logger.debug('start app constructor');
    
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        { route: ['','welcome'],  moduleId: './welcome',      nav: true, title:'Welcome' },
        { route: 'flickr',        moduleId: './flickr',       nav: true },
        { route: 'child-router',  moduleId: './child-router', nav: true, title:'Child Router' }
      ]);
    });
    
    // infoログ。ここではES6のtemplate stringや、引数も試している
    logger.info(`router configured : ${router.title}`,[router]);
  }
}

Javaやっている人はお馴染みの使い方ですね。ただ、出力フォーマットは固定です。
こんな感じでコンソールに出力されます。

最後のinfoでは、template stringを使って変数を文字列にしてみたり、引数にオブジェクトを渡してコンソールに出力したりしています。