榊原昌彦

2016/10/06

【Angular2】 そろそろ Onsen UI 2 と Ionic2 を開発面からみて比較しようと思う。

記事のアイキャッチ画像

タイトルの通り、Angular2のUIフレームワークについて比較します。
 
先月15日にOnsenUI2が正式リリース。Ionic2も先月末にrc.0をリリースしました。
Ionic2はrc版とはいえ、本来ならrc版は「出荷候補」であって破壊的変更なんて起こさずに精度を高めていくプロセスですので、もう一度言っておきますが「破壊的変更は起きないプロセス」なはずですので、そろそろこの二者を比較してもいい時期ではないでしょうか。

 
といっても先にいっておきますが、どちらがいいという議論ではありません。こっちはやんちゃな子で、こっちは元気な子なんだよ!ぐらいの比較だと思って、大きな心で読んでいただければと思います。 
なお、この記事は「React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る」の内容を知っていることが前提となっています。
 

ざっくりな概略

OnsenUI2

Bootstrap的。「Angularと疎結合になるとどうなるんだろう?!」と話題になっていたものの、疎結合になって開発スタイルが大きく変わることはありませんでした。OnsenUI1を使ってて「全く違う!」という人は、ここ数年の開発環境の変化についていけていないだけで、別にその変化は疎結合になったことによって起こってるわけじゃないです。
疎結合だけあって、OnsenUI2で足湯も半身浴も全身浴もできるいい感じです( = 一部だけ利用とか、全部OnsenUI2でつくるとかはユーザ次第)
 

Ionic2

Ionic1時代を踏襲し、Angularと密結合。ReactやVue.jsへの浮気は無理。
使ってると、「Ionicチームが考えたさいきょうのAngular2開発環境」を実感できます。Ionic2は、「Ionic CLI」を使って開発することが前提になっていて、ここに依存する限りは素晴らしい開発環境が提供されるけど、そのレールから足を踏み外すと辛い。
UIフレームワークというより、Angular2総合開発環境という形です。
 
Ionic2を使うなら、Ionic2の機能を最大限引き出すことが最大のコスパを発揮します。
 

プロジェクトのはじめ方から比較

OnsenUI2

「Monaca CLI」を提供。$monaca createを実行すると、OnsenUI2を使うためのスターターキットが全てダウンロードされ、開発環境が整えられます。これがドキュメントで提供されているベーシックなはじめ方です。
しかしながら、「モバイルUIフレームワークのド本命、Onsen UI 2正式リリース!── React, Angular 2両対応!」にあるように、ただcomponentをHTMLから呼び出すだけでも使えます。いずれCDNからも利用可能になるのではないでしょうか。
 
[2016年12月10日追記]
テクテク関西さんに「monaca-cliはやめよう!OnsenUI2を使うにはangular-cliではじめた方がいい理由と使い方」という記事を寄稿しました。ぜひご参考ください。

Ionic2

「Ionic CLI」を使いましょう。OnsenUI2同様、$ionic startからプロジェクトを作成できます。それ以外の方法は、かなり辛い道のりになる覚悟が必要です。

webpackの設定から比較(CLI使用時)

OnsenUI2

開発スタイルは、TypScript/CSS/HTML/ejsあたり。コンポーネントテーマはstylusで作られてるのですが、webpack的にはstylusをサポートしているわけではないので、CSSを直で書く形になります。
コンポーネントテーマは事前に6つ用意されているのでそれを選ぶのを推奨してる感じでしょうか。ちょっと構造いじるとコンポーネントテーマを自分でいじれます。
 
ちなみに開発サーバは、webpack-dev-serverを使っています。メモリ上でファイルを展開する形なのが特徴。上に黒いBarがついてるのでこいつを邪魔に感じる人もいると思います。consoleレベルでいうとiframeの中でLiveReloadされるので、console追う時に階層構造が深くてちょっと億劫です。
 
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-06-13-04-39

Ionic2

開発スタイルは、TypeScript/SCSS/CSS/HTMLあたり。OnsenUI2との大きな違いの一つに、SCSSにデフォルトで対応している点があります。コンポーネントテーマもSCSSで書かれており、デフォルトでvariables.scssが用意されております。
 
LiveReloadの環境があるのはOnsenUI2同様。ただ、OnsenUI2はメモリ上に展開してプレビューするのに対して、Ionic2は実ファイルを生成しながらプレビューするので少し遅い感じはあります。ちゃんと追えてないけど、多分公開フォルダの更新を受けてLiveReloadしてる感じかと思います。
ですので、代わりに邪魔なBarもないですし、consoleも本番環境と同じように要素が展開されます。
 
また、デフォルトでAoT対応しており、かなりの高速化を図っています。(AoTについて知らない方はAngular AoTガイドを参照下さい。
これを自分で環境構築から行うのはハードルが高いので、それをデフォルトで用意してくれているのは素晴らしい。
 

Angular2習熟要求

OnsenUI2

OnsenUI2のコンポーネント自体はAngular2と疎結合ですので、それなりのものをつくろうと思ったらAngular2を習熟した上でOnsenUI2のコンポーネントを使う必要があります。Angular2でプロダクトを作れる人がUIコンポーネントとして使う感じです。
ですので、例えばルーティングもAngular2デフォルトを使う必要があります。そういう意味では、Angular2のクイックスタート必須。
 

Ionic2

Ionic2ワールド. ルーティングも、NavControllerという独自のものを提供しています。LifeCycleもAngular2のものとは異なる独自のLifeCycleを提供しています。
Angular2を習熟しないうちにIonic2を使いだしても何とかなるレベル。
 
普通、<input type="date">で書く内容も、DateTimeコンポーネントで提供していますし、<select><option>で書く内容もSelectコンポーネントを提供しています。
そういう意味でも「Ionicチームが考えたさいきょうのせかい」です。
 

語学要求

OnsenUI2

日本語さいこー!
OnsenUI2のドキュメントは、日本語でも提供しています(日本語ドキュメント)。ついでに、開発メンバーに日本人がいるので、GitHubのIssue立ても日本語OK。疑問点も日本語で聞けます。Angular2自体は英語で習得しないといけない部分多いですが、OnsenUI2を覚えるのに英語は要りません!

Ionic2

にほんごなにそのことば。Please read and write English. 
 
ただ、公式のドキュメントは平坦な英語で書かれ、しかも英語読めなくても何とかなるように設計されてるので、案外何とかなります。また、公式のforum( https://forum.ionicframework.com/c/ionic-2 )が活発ですので、大体のことは聞いたら答えてもらえるのはメリットです。しかしながら、やはり英語必須です。
 

コンポーネントデザイン

以下のツイートが参考になります。現場においてコンポーネントデザインをそのまま採用して開発することはないのですが、Ionic2はデフォルトで、Google/Appleネイティブな世界観をつくることができます。

//platform.twitter.com/widgets.js
 
こちらは、OnsenUI2もIonic2もdemoを用意しておりますので、各自で見比べて下さい。
 
OnsenUI2 : https://ja.onsen.io/v2/docs/angular2.html
Ionic2 : http://ionicframework.com/docs/v2/components/#overview
 

まとめ(私見)

ざっと開発に関するOnsenUI2とIonic2の違いをみてきました。
どれもが優劣というわけではなく、それぞれの特色というわけですが、私的にはIonic2はやはりオリジナル色というか、Ionic2への依存要求が高いなと感じているところです。もちろん、それは悪いことではなく、そのことによる高速化、Cordovaへの最適化、様々なメリットを享受することができるのですが、それも含めての「Ionic2 World」が最大の特徴です。
依存を高めれば高めるほど開発効率があがる世界とどうやって付き合っていくかが鍵となります。
 
それに対して、OnsenUI2は「Angular2に対してもComponentを提供する」というポジションを徹底しているところが特徴です。ですので、しっかりとAngular2の基礎を学びながらさわるのに向いていそうです。また、日本語対応は本当にすばらしいので、入門的にぜひさわってみてください。
 
それでは、また。

Cookieを利用します

このWebサイトでは、Google Analyticsをアクセス解析のために導入しており、個人データであるCookieにアクセスします。引き続き利用する場合はCookieの利用への同意が必要です。

同意する