Ionic2(Angular2 UIフレームワーク)をはじめるにあたっての注意点まとめ

[2016年07月2日大幅書き換え]
[2016年11月8日もっと書き換え]
 
本題でIonic2 beta.3について書いた時からかなり環境がかわりましたので、タイトルをそのままにほとんど書き換えております。
昔は、Angular2の更新のキャッチアップが遅かったり、$ionic start時に –ts をつけないとtypescriptで書けなくて困ったなどあったのですが現在(Ionic2 rc.2)はそれらも解消されて本当に使いやすくなっておりますので、ぜひお使いください!

Ionic2の役割ってなんだろう

まず、Ionic2は「構築パッケージ」と「Directive群」、「Cordova群」の2つで構成されているとみることができます。

構築パッケージ

$Ionic startのコマンドを打つと、大量のnode_module群が用意され、html/css/typescriptの自動コンパイル(そして、www/build 以下へのコピー)を行う環境が構築されます。なお、タスクランナーはwebpack2がデフォルトで採用されています。
Angular2では、webpackを使うかrollupを使うか闘争みたいなことをしていますが(そして環境構築が一大仕事ですが)、Ionic2はこういった「構築のための環境」を自動的につくってくれます。

Directive群

CSSフレームワークは指定に沿ったclass名をつけることによってあらかじめ用意されたスタイルを当てることができます。Bootstrapのドキュメントとか読んだらよくわかるかと思います。
それに対して、Ionic2が用意しているのはDirective群であって、「指定のHTMLタグを使ったら、自動的にスタイルを当てることができます」。厳密にいうと、自動的にDOM操作が行われてうんぬんみたいなことがあるのですが、馴染みがない人は「classじゃないのにスタイルが当たるんだ」という理解からはじめるぐらいがいいかと思います。
 
ですので、
 

<ion-list>
  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text" value=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>
</ion-list>

 
と表記したら
スクリーンショット 2016-04-09 10.47.18
 
というデザインが当たるみたいな感じです。
これらを実現するために、Ionic2は各種APIとそれを自動的に読み込むための「IonicModule()」を用意しています。
 

Cordova群

こちらは、ハイブリッドアプリをつくるためのものです。開発に用いる「$ionic serve」だと、www/以下にブラウザで確認できるファイル群が構築されますが、「$ionic emulate ios」だと、iOS上で実行できるように更にコンパイルされたファイルが用意されます。
iOS、Android、WindowsPhoneのそれぞれに対応しております。
 
ちなみに、単なるSPAをつくる場合は利用することはありません。
 

デフォルトで用意されていないもの

とはいえ、Ionic2も万全ではありませんので、開発していて「これ欲しいなぁ」というのが2点あります。テスト環境と、ルーティングの機能です。
 

テスト環境

JSのテストだと、karmaとかpower-assertとかを使うのが一般的だと思うのですが、Ionic2はここまで環境を用意しているのに、なぜかテスト環境を用意していないです。また、日本語情報もほとんどなく・・・。
私が把握している範囲では、Ionic2のテストを公開しているのは、
 
1. 標準パッケージのテスト
driftyco/ionic
こちらは、コンポーネントやdirectiveのテストを書いています。大体、標準機能に沿ったものだったらこちらの書き方を参考にすればいいかと思いますが、ただ当然ながらそこから外れたものについての記述はありませんので、実案件にとっては参考止まりかと思います。
 
2. @ovrmrw さんのテストサンプル
ovrmrw/ionic2-testing-sample
Angular2のテストをいろいろ書いている@ovrmrwさんに、「ぜひIonic2も!」と無茶振りをお願いしましたところ、快く書いていただき、少しずついろいろなテストの知見が蓄積されていっています。Facebookログインのテストもありますので、実案件構築にはこちらの方が参考になるのではないでしょうか。
注:このサンプルはionic2 beta.10時代のもので、現在は動作しません
 

ルーティング

Ionic2はデフォルトでプロジェクトをはじめると、routerがURL書き換えをしない状態で入ります。
スマホアプリを作る時などは、URLを持たない方が(直接URLを叩かれることがないため)都合がいいのですが、単にSPAを作りたい、とかとなるとURL共有ができないのは不便です。

ちょっと私は試していないのですが、ionic2のtestをみてると、angular2の機能を使ったroutingもできるっぽいので、最初に確認しておいた方がいいかと思います。
 
[2016.11.08 追記]
そこで、Ionic2では、DeepLinkerというURLルーティングをするためのAPIをAngular2とは別途用意しております。Ionic2でルーティングしようという方は、以下をご利用ください。

[2017.08.13 追記]
現在はIonicPageという機能で自動でURLが割り振られるようになっております。

まとめ

以前、本記事ではいろいろ書いていましたが、RC版になりましてnavControllerの不安定さもなくなり、webpack2によってbuildもめちゃくちゃ早くなり、そしてデザインパッケージ群も丁寧に揃えられ、隙のないフレームワークとなりましたので、ぜひご利用ください!
 
それでは、また。

お問い合わせ