読者の皆様こんにちは、編集長の白石です。

先日ふとしたきっかけで、本サイトの認定エキスパートでありアシアル株式会社の社長でもある田中 正裕さんと、Web技術について語り合う機会がありました。

ReactやAngular2といった次世代のアプリケーションフレームワークが存在感を増す中で、UIを構築するためのフレームワークはどう進化するのか？

これらのアプリケーションフレームワークをベースとしたIonic2やOnsen UI2と言ったUIフレームワークについて、それぞれの立場から語り合ってみました。 （田中さんはOnsen UI2の開発者、白石はIonic2をかなりヘビーに使い倒しています）

Progressive Web Apps (PWApps)というキーワードが認知を広げる中で、ハイブリッドアプリやモバイルサイトを構築する手段として、これらのフレームワークは存在感を増しています。PWApps、React、Angular2、Cordovaといったキーワードに関心のある方は必読です！

では、本編をお楽しみください。

対談参加者のプロフィール

田中 正裕(アシアル株式会社 代表取締役社長)

ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイルアプリ開発プラットフォーム「Monaca」のプロダクトマネジャーを兼務。

白石 俊平(HTML5 Experts.jp編集長)

株式会社オープンウェブ・テクノロジーCEO。2015年12月、「最先端は、ここにある。」を謳うテクノロジー情報キュレーションサービスTechFeedをリリース。Web技術者向け情報メディア「HTML5 Experts.jp」編集長。日本最大（6,500名超）のHTML5開発者コミュニティ「html5j」ファウンダー。Google社公認Developer Expert (HTML5)、Microsoft社公認Most Valuable Professional (IE) などを歴任。著書に「HTML5&API入門」（2010, 日経BP）、「Google Gearsスタートガイド」（2007, 技術評論社）など。監訳に「実践jQuery Mobile」（2013, オライリー）など。

Ionic2とOnsen UI2

白石: 本日はよろしくお願いします。今回はReact/Angular2時代のUIフレームワークということで、最先端のUIフレームワークについて語る場にしたいと思っています。

田中: はい、よろしくお願いします！

白石: まずは、Ionic2やOnsen UI2について馴染みのない読者も多いと思うので、それぞれのフレームワークとぼくらの関わりについて話しましょうか。まずは、両フレームワークの共通点としては、以下の様な点が挙げられるかと思います。

• どちらもコンポーネント指向のUIフレームワーク。独自のタグを元に、HTMLっぽいテンプレートを記述することでUIを構築していける。
• どちらも最初から数多くのUIコンポーネントを備えており、モバイルネイティブに近い見た目のアプリを作れる。
• どちらも、Cordovaをベースとしたモバイルアプリ開発（ハイブリッドアプリ）を前提としている。そのため、以下に示すようなCordovaの特徴を備えることになる。
  • ほぼ完全なクロスプラットフォーム性を備える
  • プラグインを通じて、ネイティブの機能を呼び出すことができる
  • WebView上で動作するので、ネイティブアプリに比べて動作が遅い

白石: で、こうした認識をベースとして、それぞれのフレームワークの違いなどに踏み込んでいければと思います。 まずは田中さんとOnsen UIの関係ですが、田中さんはOnsen UIのメイン開発者ということでいいんでしょうか？

田中: 正確に言うと、開発のリードをしている立場ですね。

白石: では、開発の優先順位なども田中さんが決定してらっしゃるということですね。チームは何人くらいいるんですか？

田中: 以前弊社に所属していた久保田 光則さんも含めると、4〜5人くらいがフルコミットしている感じですね。

そもそもOnsen UIとは何かというと、バージョン1の時はAngular1をベースとしたUIフレームワークでした。現在開発を続けているOnsen UI2の大きな特徴は「アプリケーションフレームワーク非依存」ということです。

<!--
Onsen UI2のコード例。
以下の例はAngular2だが、Angular1やReactと組み合わせることも可能
-->
<ons-page>
  <ons-input (change)="onChange()" type="text"></ons-input>
  <ons-button>Click Me!</ons-button>
</ons-page>

Onsen UI2自体はWeb Componentsに則って作られていて、それをReactやAngular2、Angular1、さらにはjQueryなどと組み合わせて利用できます。最近だとVue.jsとか今はMeteorとかいうバインディングも増えていますね。

白石: そこがIonicとの大きな違いですね。

ぼくは、先日リリースしたTechFeedというアプリで、Ionic2を全面的に採用しました。TechFeedはエンジニア向けのニュースアプリなのですが、Web/メール/モバイルアプリと、様々なクライアントがあります。そのモバイルアプリを開発するにあたって、プラットフォームごとにコードベースを分けたくなかったので、Cordova上で動作するモバイルアプリ用UIフレームワークを探していたんですね。

その際、まだβ版が出たばかりだったAngular2が割とアーキテクチャ的に美しくまとまっていたのと、Ionic2が既にAngular2に対応していたので、採用することにしました。 なので、Ionic2はAngular2をベースにしたUIフレームワークです。Angular2以外では動きません。

<!--
  Ionic2のコード例。
  タグの名前などは異なるが、あまり変わらない。
-->
<ion-content>
  <ion-input (change)="onChange()" type="text"></ion-input>
  <button>Click Me!</button>
</ion-content>

この、UIフレームワークとアプリケーションフレームワークが密結合（Ionic2）なのか、それとも疎結合（Onsen UI2）なのかというところが、今日の対談のポイントになりそうですね。

ただこのまま、UIフレームワークありきの議論に入っていく前に、ぼくは一つ確認したいことがありまして。そもそもUIフレームワークって必要とされているんでしょうか？

UIフレームワークは必要か？

白石: 「いらないだろう」という前提で話すわけではなくて、Webの世界にとってコンポーネント指向のUIフレームワークというのはまだ新しい存在なので、そもそも「なぜ必要なのか？」を確認したいのです。とりあえず、フレームワークが必要か不要かで言うと、Webデザイナーさんの中には、フレームワークを嫌がる方も多い気がするのですが。

田中: 確かにそういう方もいらっしゃるとは思います。が、（Bootstrapなどのような）CSSフレームワークと、JavaScriptも含めたUIフレームワークは別に考えるべきじゃないかと思います。

白石: 確かにそうですね。CSSフレームワークは、デフォルトでそれなりの見た目になるとか、コーディングスタイルが統一されるなどの利点はあると思いますが、フレームワークのスタイルを変更しようとすると途端に面倒だったりしますしね。フレームワーク独自のルールを覚えなくちゃいけないし、最終的には全部リセットしたくなったり（笑）。

田中: その通りです。それに、ことモバイルアプリやサイトをWeb技術で作る場合に大事なのって、単なるCSSのプリセットがあることではありません。実際に操作してみた時のスムーズさだったり、アプリ全体から受ける印象だったりと、振る舞いも含めたもっと包括的なUXです。

そういう面で、アプリ全体のUXを統一して、なおかつプラットフォームに馴染んだものにするためには、やはり一貫した枠組みが必要です。それは実際に私がMonacaを運営する上で、お客様からご要望をいただいてきたところでもありますし、だからこそOnsen UIを作ることにも繋がりました。ということで、私はUIフレームワークは確実に必要だと思いますね。

白石: なるほど。ただ、UIフレームワークって、寿命が短くないですか？昔はjQuery MobileやKendo UIなんてのもありましたが、今ではあまり使っているという話を聞きません。

UIフレームワークとアプリケーションフレームワーク

田中: それは、それらのフレームワークがUI的に古びてしまったというわけではなく、アーキテクチャ的に古いと見なされたから使われなくなってしまったんだと思うんです。JavaScriptアプリケーションのアーキテクチャは、ここ数年目まぐるしく移り変わってきました。jQueryのあとAngular1、React、Angular2, 他にもRiot.jsとかVue.jsなども出てきている。

ですがそれはアーキテクチャの進化であって、UIが進化したわけではありません。例えばUIの進化って、iOS7からフラットデザインになりましたとか、マテリアルデザインが出てきましたとか、そういうことです。こうした進化がすごく早いかと言われると、正直そうは思いません。UIフレームワークが、アプリケーションアーキテクチャの進化に引きずられちゃってたんじゃないか、というのがぼくの思うところです。

白石: なるほど、だからOnsen UI2はアプリケーション・フレームワークに依存しない形で設計されているわけですね。ぼくはTechFeedをIonic2で作りましたが、それはAngular2の採用を先に決めていたから、というのもあります。というか、その時はまだOnsen UI2が今ほど開発が進んでいなかったので、モバイルアプリを包括的に作れるUIフレームワークと、コンポーネント指向のアプリケーションフレームワークの組み合わせが、Ionic2 + Angular2しかなかったんですよね。

田中: Ionic2はAngular2に強く依存しているわけですが、Ionic2を学ぶには先にAngular2を学ばなくてはならないわけですよね。私はそこを少しもったいないな、と思います。元々私がUIフレームワークで実現したかったことって、「JavaScriptのフレームワークを学ばなくても簡単に使える」ということだったので。

白石: 確かに、Onsen UIはそういうところの配慮が行き届いている気がします。ぼくもOnsen UI1の時に使わせていただいていましたが、Webサイト上のサンプルコードが良くできていて、コピペするだけでUIが作れてしまうのが、とても楽ちんでした。

それぞれのフレームワークが目指すもの

田中: あと、Ionic2はどことなくUIフレームワークというよりは「プラットフォーム」を目指している気がします。

白石: 確かに。Ionicはモバイルアプリを作る際はCordovaを使用するのですが、CordovaもあくまでIonicが規定するプラットフォームの一部というつもりなのか、cordovaコマンドをラップしたionicコマンドを提供していますね。また、CordovaプラグインのAPIをラップした ionic-native というモジュールも提供しています。これは、各種プラグインをTypeScriptから使えるようにしてくれているので、結構ありがたくはあるんですが。

田中: UIフレームワークを入り口として、プラットフォームに入ってきてください、というスタンスな気がしますよね。 Onsen UIはあくまでUIフレームワークであり、アプリケーションスタックの一部という位置付けなので、そこは思想の違いが現れている気がします。

白石: Ionic2はアプリケーションプラットフォームを限定していて、プラットフォームを志向している。Onsen UI2はアプリケーションプラットフォーム非依存で、ライブラリを指向している。こういう対比になりますね。こうして並べると、個人的にはOnsen UI2の方が設計面で魅力を感じます。

田中: ありがとうございます(笑)。

白石: ただ、まだ結論を出すのは早い気もしますね。どちらも正式リリース前ですし(笑)。

TechFeedがAngular2とIonic2を採用しているからというわけではないですが、アプリケーションプラットフォームを限定しているからこその強みもあるかもしれません。ぼくはまだOnsen UI2を実際に触ってみたことがないので比較ができないのですが、Ionic2のほうがAngular2との相性とかはさすがにいいでしょうし。先ほど出てきたionic-nativeパッケージとかもなかなか便利です。

またぼくらがIonicを採用した理由の一つには、コミュニティの大きさがIonicのほうが大きそうだった、という理由もあります。GitHubのStarの数が、Ionicは25,000、Onsen UIは3,000という違いがあったので。コミュニティの大きさは、Web上の情報量の差にもなって表れてくるので、困ったときに情報を得やすいと思ったのです。

このようにいろんな観点での比較ができそうなので、一概にどちらが優れているとここでは結論付けられなそうですが、こうした議論が読者の皆さんにとって判断の助けになるといいですね。

（編集部: 参考までに、ここまでに出てきた論点や、Web上で得られる内容を比較した表を掲載しておきます）

（UIコンポーネントは現在のところほぼ同数ですが、どちらかにしか実装されていないコンポーネントもいくつかありますし、今後大きく増えていく部分だと思われるため、表からは除外しています）

今後のWeb技術の展望を語る

白石: 最後にお聞きしたいんですが、Onsen UIに限らず、今後のWeb技術って、どういう方向に進んでいくとお考えですか？

田中: Web技術って、今どんどん開発のバリエーションが増えている状態だと思っています。それはフラグメンテーションと呼べるかもしれない。例えば、Angular2がTypeScriptを、ReactがJSXを使用しているように、です。これらが収束して一つの太い流れができていくのか、このまま個別の進化を続けていくのかは、まだ何ともいえません。

白石: テクノロジーのスタックが積み上がっていくにつれ、それぞれの開発手法の間の差異が広がっているというわけですね。こうした状況は、なぜ起きていると考えられますか？

田中: 私はMonacaを通じて「ハイブリッドアプリ」、つまりWeb技術でモバイルアプリを作るというところをずっとやってきました。その経験から言うと、モバイルアプリは大きく2パターンあります。一つは長期間のメンテナンスが必要なアプリ。もう一つはキャンペーンなどのワンタイムなアプリケーションですね。前者には強固な基盤が求められるので、Angular2のようなものが求められます。後者はそうではないですね。逆にさくっと作れるようなものが求められます。

こうしたニーズの二分化も理由の一つじゃないかなあとは思っています。

白石: なるほど、ニーズが分かれていると。そういう意味でいうと、静的な文書中心の「Webサイト」と、Single Page Application化が進む「Webアプリ」の違いも、フロントエンド技術のフラグメンテーションに一役買っていそうです。「Webサイト」の制作においては、まだまだjQueryは現役ですし、無理にそこを変える必要もなさそうですし。

あと、Web技術の適用範囲が増えてきているというのもあるかもしれませんね。WebVRとか、JavaScriptで動かせる組み込み基板とか。ウェアラブルやロボティクスという分野にも、Web技術が広まっていくとは思います。実際にそれがどれくらい使われるかは未知数ですけども。

田中: とはいえWeb技術って、情報技術全体から見るとエッジの技術ではありませんよね。かなりコモディティ化の進んだ、汎用的でメインストリームな技術。

白石: 確かに。これだけ技術が進んでも、結局のところHTML/CSS/JavaScriptという基本的な部分はあまり変わっていません。

田中: こうしたWeb技術の適用範囲をいかに広げていくか…というのは、個人的な興味として強くあります。いちエンジニアとして、Webのスキルセットをいろんなプラットフォームで使えるよう後支えしたいというのは、私の目指すところです。

白石: それは、HTML5 Experts.jpでもぜひ進めていきたいところです。ではそろそろお時間ですね。本日はお付き合いいただき、どうもありがとうございました！