Hello World! による各フレームワークの比較

（この記事は Onsen UI チームの Fran Dios が英語版 Monaca x Onsen ブログに投稿した Comparing frameworks: Hello World! の翻訳です。）

Onsen UI は Web Components をベースに作られているので、どのフレームワークとも一緒に使うことができます。
しかし、開発用にフロントエンドフレームワークを選ぶとなると、選択肢の多さに圧倒されてしまいます。特に Web プログラミングの経験が少ない人にとっては、自分に合ったフレームワークを選ぶ作業はうんざりするほど大変です。

あなたは、Onsen UIでコーディングするときにどのフレームワークを使うか決めていますか？決まっていない人のために、この記事では Vanilla JavaScript、AngularJS、Angular 2、React、Vue.js 、それから Knockout.js を使った「Hello World」アプリの作り方を紹介します。

Hello World サンプル

これから紹介するのは、ボタンをクリックするとアラートを表示する簡単なサンプルプログラムです。それらのプログラムを通して、各フレームワークによって構文がどう違うのか、また、どのくらい難易度が違うのかを説明します。サンプルプログラムのプレビューには対話的チュートリアルを使用します。対話的チュートリアルには、この記事で紹介するもの以外にもたくさんのサンプルプログラムを用意しています。対話的チュートリアルでは、サンプルプログラムを見るだけでなく、サンプルプログラムを自由に編集して実行することができます。

Vanilla JavaScript

Onsen UI のコンポーネントはネイティブの DOM 要素のように振る舞うため（Custom Elements）、純粋な JavaScript や jQuery でも使うことができます。必要なのは、イベント、DOM 要素、属性、プロパティを使ったオーソドックスでシンプルな JavaScript だけです。

Onsen UI でページの初期化を行うには、init イベントを使います。リスナーをセットして、あとはそこに初期化処理を書くだけです。他のコンポーネントでのサンプルを見るには、このリンクから対話的チュートリアルのメイン画面を開いてください。

AngularJS

このサンプルでは、メインページに AngularJS のコントローラをリンクさせています。このサンプルの HTML は AngularJS のテンプレートとして機能しており、そのテンプレートがコントローラ内の変数にアクセスすることでデータが表示されています。ここでは angular.module('myApp', ['onsen']) の短縮記法である ons.bootstrap() を使っています。（もちろん、前者のように書く場合は ng-app="myApp" が必要です）。

AngularJS を使った Onsen UI のサンプルプログラムをもっと見たい方は、このリンクからご覧ください。

Angular 2

これは少々複雑です。Angular 2 を利用するには TypeScript を使います。まずは、 platformBrowserDynamic、NgModule、OnsenModule などの必要モジュールのインポートが必要です。これらのモジュールにより、型付けされた Onsen UI コンポーネントが使えるようになります。

このリンクからさらに、Onsen UI を使った Angular 2 のチュートリアルにアクセスできます。

React

React の使い方は独特です。このサンプルでは JSX を使い、トランスパイラとして Babel を利用しています。一見複雑なようにも見えますが、個人的には React のアプローチが好きです。なぜなら、モジュール化を強制し、さらに JSX により「テンプレート」とロジックを直接結び付けているからです。

さらに Onsen UI のための React コンポーネントサンプルが欲しい方は、こちらからどうぞ。

Vue.js

Vue は、物事をシンプルにしてくれる強力なフレームワークです。少なくとも前の2つよりはシンプルです。実際このサンプルでは、最初の2行で Vue.js フレームワークと vue-onsenui バインディングをインクルードしているだけで、残りはほとんど Vanilla JavaScript のようなものです。また、Vue では、ons.notification を使わなくても、テンプレートから直接$notification にアクセスできます。

Vue のバインディングはまだ開発中ですが、Vue 2 を完全にサポートするために、これからバインディングを準備していきたいと思っています。ご期待ください!

Knockout.js

シンプルな（といってもそんなにシンプルでない）アプリを作るための選択肢として、もう1つ良いフレームワークがあります。Knockout.js なら、通常の使い方では バインディングパッケージすら要らず、好きなようにバインディングが定義できます。このサンプルでは、ページが初期化されたタイミングで、init イベントの中で直接 Knockout のビューモデルを紐づけています（ページの ID を使っています）。

Knockout.js と Onsen UI の組み合わせ方についてもっと知りたければ、もう1つこのサンプルをどうぞ。このサンプルは同時にナビゲーターとタブバーを使っているため、もう少し複雑です。

まとめ

最近の主要なフレームワークへの Onsen UI の組み込みがいかに簡単か、おわかりいただけたと思います。中には、「ブートストラップ」コードを多用する複雑なフレームワークもありますが、それらのフレームワークも、アプリの規模が大きくなってデータとビューを堅実に管理する必要が出てきた時にはとても便利です。学習曲線が緩やかで単純明快なフレームワークでは、複雑なアプリには対応できません。しかし最終的にこれは考え方の問題でもあり、各開発者の好みにもよるでしょう。あなたはどうでしょうか？ Onsen UI 用にどれを選びますか？

Githubでのスターや、ツイート、コメントなどいただけるとうれしいです。では楽しいコーディングを!

翻訳者紹介