monaca-cliはやめよう!OnsenUI2を使うにはangular-cliではじめた方がいい理由と使い方

2016年12月13日

こんにちは、榊原@rdlaboです。
 
AngularでOnsenUI2を使う際、公式ガイド(2016/12/10現在)通りmonaca-cliを使うと後ほど困る事態が待ち構えております。ですので、ぜひともOnsenUI2のプロジェクトをはじめるときは、angular-cliをお使いいただければと思います。この記事はOnsen UI Advent Calendar 2016の17日目の記事です。
 

Angularを使う上で利用したい機能

NgModuleの威力

Angular2を昔からさわってる方は、NgModuleがRC.5にいきなり登場して困惑した記憶があると思います。今つかってる方でも、なぜComponentもProviderもNgModuleに登録しないと呼び出すことができないか疑問を持つ方もいるでしょう。ちなみにRC.4以前だと、事前登録しなくても、いきなりComponentの中でimportして呼び出すことできたりしたんです。
ぶっちゃけた話、わざわざ事前登録しないとエラーが出るようになって、とても面倒になったんです。
 
なぜそういう変更が行われたかというと、Angular 2 NgModule Introに紹介があるとおり、AoTコンパイルを実現するためです。AoTコンパイルの逆は、JiTコンパイル。簡単に説明すると
 

  • JiTコンパイル : Webブラウザで表示される時に、コンパイルを実行する(一般的なコンパイル)
  • AoTコンパイル : ビルド時(事前)にコンパイルを実行しておき、Webブラウザではコンパイル結果が呼び出される

 
AoTコンパイルにすると処理が高速化されます。ですので、RC.5から実装された機能であるにも関わらず、「リリース版でAoTコンパイルしていないのは、Angularのアンチパターンだ!」という人もいるぐらい、Angularを使う上では必須の機能になります(詳細は「Angular AoTガイド」をご覧ください)
 

サーバサイドレンダリングという選択肢

SSR(サーバサイドレンダリング)という機能があります。まぁ、変態(褒め言葉)な機能です。
JavaScriptなどの非同期処理は、ユーザのブラウザでレンダリングされるのが今までの常識でした。
ですので、検索エンジンはレンダリングされる前のファイルを読もうとするので、ルーティングすらJavaScriptで行うSinglePageApplicationは「SEOには不利だ!」とか、「脆弱なユーザ環境だとレンダリングパワーないから大丈夫か?!」など言われてきていたわけです。
 
で、SSRは「だったら、JavaScriptのレンダリングをサーバでやっちゃえばいいじゃない!」という技術です(詳しくは「サーバーサイドレンダリングとは?」をあたりをご参考ください)。
 
こちら、Angularでも実装の取組が行われていて、Angular-Universalというプロジェクトが進行しています。

monaca-cliをやめた方がいい理由

本稿のタイトルでもありますが、なぜmonaca-cliをやめた方がいいかといいますと、monaca-cliではAoTコンパイルもサーバサイドレンダリングも実装されていないですし、実装される予定も(中の人によると)ないからです。ご存知のように、OnsenUI2は「フレームワーク疎結合」を掲げておりまして、angularだけに最適化されているわけではありません。
むしろ、monacaという名前がついている通り、OnsenUI2をつくっているアシアル社の製品であるMonacaに最適化されています。
 
ですので、処理速度とかSEOとかを考えずに「習作として実装する」場合に限ってはmonaca-cliでも問題ありませんが、実際にリリースを見据えると現実的な選択肢ではありません。むしろ、リリース後に「もっと早くしたい」など考えた時にハマるやつです。(自分でタスクランナー書ける方はそもそもmonaca-cliを使っていないと思うのでここでは省略します)
 
中の人もこれからはangular-cli推しでいくということなので、「ドキュメントにあるから」とか盲目にならず、monaca-cliでcreateするのはやめましょう。
 

angular-cliを使ってOnsenUI2を実装する

CLIを使って開発する場合、angular-cliをおすすめします。Angularが公式で開発しているCLIです。
こちらはまだSSRをサポートしていないですが、angular-cliをForkしてuniversal-cliがつくられ、いずれangular-cliにも合流するのではないかなぁと期待しているところです。リソースが投下され、どんどん改善されていっておりますので、ぜひangular-cliではじめてください!
 
以下、angular-cliでOnsenUI2を使う方法です。
 
1. まずは、angular-cliをnpmインストールして、プロジェクトを作成します。

npm install -g angular-cli
ng new PROJECT_NAME

プロジェクトを作成するのには時間がかかりますので気長にお待ち下さい。
 
2. PROJECT_NAMEに移動して、OnsenUI2のパッケージをインストールします。
ちなみに、angula2-onsenuiはOnsenUI2のAPIをAngularで使う橋渡し役のAPIです。そういえば、Angular4になったらこのライブラリ名はどうするんでしょうw

cd PROJECT_NAME
npm i onsenui angular2-onsenui --save

 
3. polifylls.tsに以下を追記します。AngularはTypeScriptなので、OnsenUI2の型の宣言を行います。

declare global {
    interface Window {
        ons: any;
    }
}
window.ons = require('onsenui');

 
4. app.module.tsに追記します。追記するところは、左端に+をつけておりますのでご参考ください。

+ import { OnsenModule } from 'angular2-onsenui';
+ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
+   OnsenModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
+     CUSTOM_ELEMENTS_SCHEMA,
  ],
})

 
5. styles.cssに追記します。OnsenUI2のCSSモジュールを読み込みます。

@import '../node_modules/onsenui/css/onsenui.css';
@import '../node_modules/onsenui/css/onsen-css-components.css';

 
これで、OnsenUI2を使いはじめることができます!
 

まとめ

先日「【初心者向け】Angular2と一緒に使う有名なサードパーティを見回してみる」を書きましたが、この記事はその補足となっております。
Angularのリリースが今年9月でしたので、サードパーティはまだまだこれから感がありますが、その中でもOnsenUI2は
 

  • OnsenUI1時代のユーザがいる
  • ドキュメントが日本語なので初心者向け
  • 中の人(@n_matagawa)のサポートがとても丁寧で使っていて心が折れない

 
などの長所がありますので、これからどんどん伸びていくのではないかと思います。プロジェクトをはじめる際に本稿が参考になりましたら幸いです。
 
また、ng-onsenui2.slack.comというslackチームをつくりました。OnsenUI2(Angular2)について知見を共有する場です。これから使い始めるという方はぜひご参加ください。
https://ng-onsenui2.herokuapp.com/
 
それでは、また。