UI用のReactコンポーネントをリリースしました。機能拡張をアナウンスしました。UIのカスタムエレメントをReactコンポーネントの中で利用できるものです。こちらの記事ではより複雑なコンポーネントをどう使うかについて紹介します。現在、この機能拡張は開発中なので、ぜひフィードバックをお願いします。それがよりよいAPIや問題の解決につながるはずです。UIやコアライブラリ、Reactも読み込む必要があります。プロジェクトへの追加方法は以下のようにコマンドを実行します。これはbrowserifyを使ってライブラリを読み込み、かつBabelを使ってES6とJSXをブラウザ向けに変換しています。タグを使った方法です。この方法で大事なのは関連するすべてのライブラリを正しい順番で読み込むことです。UIライブラリ、そしてこの2つに依存するライブラリを読み込んだ後で読み込む必要があります。セットアップしたら、コンポーネントは以下のように簡単に使えます。使った高度なナビゲーションの追加方法を紹介します。いうタグを知っているでしょう。これはスタックベースのナビゲーション機能を提供します。メソッドを使ってビューの切り替えができます。使ってページコンテンツを用意しなければなりませんでした。Reactではテンプレートを使いませんので、このAPIを公開する意味がありません。コンポーネントに注目しました。これは強力なAPIがあり、自由にページのスタックが管理できるようになっています。オブジェクトを内部のスタックに追加します。routeオブジェクトは何でも構いません。コンポーネントの中にレンダリングする情報を返す必要があります。デモメソッドコンポーネントにはページのスタックを管理するための幾つかのメソッドがあります。オブジェクトをスタックへプッシュし、画面遷移のアニメーションイベントを発生させます。アニメーションの制御に使います。オブジェクトをスタックの最上位から省きます。前のビューに遷移します。スタックを単独のルーティングにリセットします。スタックを配列のルーティングにリセットします。ルーティングとともにナビゲーションを初期化します。二つの引数を持った関数です。使ってスタックを初期化する必要があります。ルートオブジェクトのレンダリングに必要です。以下はサンプルコードです。インラインページを返していますが、コンポーネントを作成して返すようにもできます。UIはページナビゲーションに使えるコンポーネントを複数用意しています。<ons-tabbar>も<ons-template>と合わせて使うようになっていましたが、これもまたReactに合わせてテンプレートに依存しない形にしました。Navigatorと同様に、こちらも関数を作る必要があります。いうもので、以下のような構造になっています。/>},...]このコンポーネントは以下のような構造をもったオブジェクトを配列で返す必要があります。/>}デモメソッドタブバーコンポーネントはアクティブなタブを変えたり、現在アクティブになっているタブのインデックスを取得するといったメソッドが用意されています。遷移するアニメーションを指定します。アクティブなタブのインデックスを返します。最初に開くタブを指定します。タブとそこに含まれるコンテンツを配列で返します。(<TabbarinitialIndex={1}renderTabs={this.renderTabs}/>);}}コンポーネントの組み合わせについて複雑な画面構成のアプリではタブとスタックベースのナビゲーションが結合していることがあります。一つのタブの中だけでナビゲーションしたり、ページの中でタブバーを使いたいと言ったケースです。ナビゲーションおよびタブバーコンポーネントは組み合わせて使えるようになっていますので、複雑なナビゲーションも問題ありません。次のデモではタブバーの最初のページでナビゲーションを使えるようにしています。タブバーに対してページをプッシュし、ナビゲーションしています。これはナビゲーターの中にタブバーを配置することで簡単に実現できます。デモコードデモコードは少し長いですがシンプルなものです。'main'}}}renderPage={this.renderPage}/>);}}まとめ皆さんがぜひこのReact拡張を使ってくれることを期待しています。最初に書いた通りこのインタフェースに関するフィードバックをお待ちします。コメントや感じたところをフォーラムに書き込んでください。2向けのコンポーネントをお待ちください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。はじめてみよう関連記事2018年1月25日ビーコン対応アプリ開発プラットフォーム「Beacapp...2016年8月30日MonacaアプリでカスタムURLスキーマを実装する2018年3月9日ジオフェンシングにも最適。