Onsen UIが2.0になり、AngularJSが必須ではなくなりました。その結果、他のフレームワークと組み合わせて使えるようになったのですが、その一つとして開発が進められているのがReact向けのOnsen UIです。

Reactと言えばReact Nativeが有名ですが、あちらはネイティブアプリを開発するための技術になります。JavaScriptは使いますが、独自のルールがあります。React × Onsen UIの場合はWeb技術をそのままに、Reactのレンダリング技術を活かしたアプリ開発が可能になります。

今回はその最初の一歩を紹介します。

導入方法は2パターン

イチからはじめる場合の導入方法は2通りあります。一つはMonaca CLIを使った方法です。

インストールとサインアップは次のようになります。

そしてアプリケーションのベースを作るのですが、テンプレートとしてReactを使ったものが用意されています。

その中から好きなテンプレートを選択してください。

もう一つの導入方法はnpmを使った方法です。

で任意のWebアプリケーションにOnsen UI×Reactが組み込めます。

最後に、もう一つとしてKitchen Sinkを使う方法もあります。こちらはそのまま開発に使えないと思いますが、コードの参考になるはずです。

Hello Worldを出してみる

今回はテンプレートから試しています。作成したアプリのディレクトリに入ってコマンドを打ちます。

さらにES2016で記述するために幾つかのライブラリを入れます。

そして www/app.js として次のように記述します。

これ自体は #app に対してReactを反映するだけのシンプルなコードです。次にHTMLは次のようになります。

最後にapp.jsを通常のJavaScriptに変換します。

この変換については慣れればgulpなどを使って自動的に行えば良いでしょう。

動かしてみる

では実際に動かしてみます。 monaca preview コマンドを打つとWebサーバが立ち上がるので、http://127.0.0.1:8000にアクセスします。

表示されたらボタンをタップします。そうするとOnsen UIのアラートが出るのが確認できるはずです。


このようにReactの書き方に沿ってOnsen UIのUIライブラリ、さらにアラートなどのライブラリを組み合わせられるようになります。Reactを使ってスマートフォン向けのWebアプリケーションやハイブリッドアプリを開発する際にはぜひ使ってみてください。

React Components by Onsen UI Hybrid Mobile App Framework