Android/iOSアプリ開発でIonic2を3か月ほど使ってみました。
2.0.0 finalもリリースされたことですしその経験をもとに感じたところを書こうと思います。
そもそもIonic2とは
IonicはWebの技術を用いたモバイルアプリの開発を可能にするフレームワークです。UIコンポーネントのライブラリとビルド等を行うためのCLIツールを含みます。2016年9月にRC.0がリリース。
2017年01月25日に2.0.0 finalがリリースされました。
以下のような特徴があります。
- オープンソース
- Android/iOS両方に対応したクロスプラットフォーム開発
- コーディングはHTML+CSS(Sass)+JavaScript(TypeScript)で行いWebView上で動作するハイブリッドアプリ
- Progressive Web Appsの開発にも （ここはあまりよくわかっていない）
- ビルドシステムはCordovaフレームワークを採用
- カメラ等の端末機能の利用はCordovプラグインを通して行う
- Angular2と密な作りのフレームワーク
- 関連してクラウドサービスもある
現在進行形でアクティブに開発が行われています。
辛いところ
フロントエンドの洗礼
IonicはAngular2を採用していることからもわかるとおり、モダンなWebフロントエンド開発の技術・ツールを内部に多く採用しています。普段Webでゴリゴリやってる人はともかくネイティブ寄りの人（雑な分け方でスミマセン...）がゼロから要素を網羅しようと思うと結構大変だと思います。というか私がその口でした。
全体的なトレンドに始まりnodeのエコシステムであるとかバンドルやトランスパイルの各種ツールだとかAngular2のお作法だとかTypeScriptの構文だとかRxなプログラミングだとか。他にもIonic自体だとかCordovaだとか。やってみると色々調べることが出てくるので全容を把握しようとすると結構な学習コストに。
そういう点で普段からフロントエンドやっている人の方が比較的障壁が低いかもしれません。
情報量
情報量はネイティブには及ぶべくもないので、仕様を知るにしてもエラーの解決法を調べるにしてもサンプル探すにしても調査コストは膨らみやすいです。
また、IonicはAngular1をベースとしたIonic1と、本稿の対象であるIonic2/Angular2があります。全くの別物なので検索時には注意が必要です。加えてAngular2の変更の影響をモロに受けて少し古い記事だと参考にならんってこともしばしばでした。
とはいえ情報が全くないかっていうとそんなこともなく、幸い海外コミュニティが結構活発です。公式フォーラムを漁りましょう。
公式ドキュメントの英語が平易なのも嬉しい。
Breaking Changes
Ionic2は2週間から1か月ぐらいのスパンでマイナーバージョンアップがリリースされてきました。破壊的変更もまあまああるのでちゃんと追随しようと思うと地味に大変です。Ionic依存のサードパーティライブラリが変更に追随できてない問題も当然おきます。
ツール周りは特に目まぐるしくて、βで使ってたgulpをRC0で辞めてnpm scriptsに移行、その際にバンドラーとしてRollupを採用して多くの開発者を混乱に叩き込み後のリリースでwebpack2を標準にしてくるなどnode界の潮流に影響受けまくりんぐ変わりまくりんぐ。
開発が活発であることの証左でもあるんですけどね。finalがリリースされたことで今後大規模な変更はそうないと思われますが、リスクとして勘案しておく必要はあるでしょう。
Cordova辛い
カメラやストレージ等端末の機能へのアクセスを実装したい場合、Cordovaフレームワークのプラグインをインストールして使います。凝ったことをするには必須なわけですが、そのCordovaプラグインを使い出すとIonicUI+Angularで済む部分に比べて途端に辛くなります（当社比）。
何が辛いってデバッグし辛いこと。Cordovaプラグインとは要は各プラットフォームのネイティブコードのJSラッパーです。プラグインによっては内部の実装を知らないとエラーの原因がわからないなんてこともあります。
２プラットフォームに1ソースで対応できて工数半分だぜ！とは往々にして行きません。
パフォーマンス
WebViewベースのハイブリッドアプリな以上しょうがないんですが、ネイティブに比べるとやはりパフォーマンスは劣ります。悪くはないけど若干の違和感は感じる、そんな動作感。あと端末の世代の差がモロに出ます。
良いところ
UI構築楽チン
HTMLとSass(CSS)でコーディング出来るので基礎的なWeb知識があればViewがつくれます。そしてIonicコンポーネントを使えばワンコードでAndroid/iOSそれぞれのプラットフォームに合わせたUIを表現してくれます。スタイルとアニメーションもなかなかネイティブに忠実ではないかと思います。AndroidのXMLレイアウトファイルとiOSのAutolayoutそれぞれいじるのに比べてなんて楽なことか！
開発環境
フロントエンド開発の環境をゼロから構築・設定しようと思うと手間だと思うんですが、Ionicコマンドで全部環境を作ってくれます。Ionicなら、Ionic開発チームが考える「最強の開発環境」をそのまま使えるわけですね。
「フロントエンドの洗礼」と矛盾するような話になってしまうんですが、細かいことに習熟しなくても何とかなるといえば何とかなります。割り切るなら覚える必要があるのはIonicのコマンドだけです。
(Ionicの実装を調べれば今時にどういうツールがどんな設定でどのように使われているのかを理解する切欠になるので、フロントエンドの学習用にも使える…かも？)
ブラウザで動作確認できる
ローカルサーバの起動・デプロイ・変更監視・ライブリロードまでをコマンド一つでやってくれるので、ブラウザで動作確認しつつ実装を進められます。デバッグもDeveloperToolsを使ってできます。モバイル開発の悩みであるビルド/デプロイメントの時間消費を減らせるのは大きいです。
プロトタイプをサクッと作れる
REST API使ってJSON取得して画面に表示してなんてのはよくやる事だと思うんですが、その手のアプリはフレームワークにおんぶにだっこでかなり高速にプロトタイプを作る事ができます。
単純にJavaやSwiftに比べて記述量が少なくて済むのも◯。
その他
Angularと密
上でも述べたようにIonicはAngularと密な作りのフレームワークです。基本的にAngularありき。ここは好みが分かれるかもしれません。React使いたいとか言われても知らんがな。
密ゆえのメリット(例えばナビゲーションの簡易さとかAngular AoTにデフォルトで対応とか)はもちろんありますが、その分IonicとAngularの世界にどっぷり浸かる覚悟が必要です。
まとめ
改めて書いてみるとOSSフレームワーク使う上での当たり前のコトも多いですが
、クロスプラットフォーム開発の参考にしてもらえれば。
とにかくIonicはオリジナルの流儀に従う必要がある感がありますね。ハマると強い。Ionic（とAngular）の道標に従えばかなり高速に開発できる一方、少しでも道から外れたこと（凝ったこと・独自のこと）をしようと思うと途端にその道程は険しくなります。そういう意味で開発するアプリに向き不向きがあることを知っておくと良いかと思います。ネイティブの機能をアレコレ盛り込むようなアプリには向かないです。