react中津川篤司アプリを作る際には、最初にUIフレームワークを決めておくことをおすすめします。HTMLは自由度が高い反面、標準で用意されているコンポーネントの見た目や機能は多いとはとてもいえません。UIを後回しにして開発を進めても、部品の配置や配色などで思い描いた動作になりづらく、満足なUXが提供できなくなることもあります。UIやIonicといったUIフレームワークを使えます。これらだけでは希望したデザインにならない場合もあるでしょう。そのため、多くのUIフレームワークを知っておくのは大事なことです。Mobileを紹介します。アリババが開発しているようです。40を超えるUIコンポーネントがありますので、スクリーンショットを多めに紹介していきます。何はともあれ、実際にUIコンポーネントを見てもらうのがいいでしょう。一部はアニメーションGIFで、アニメーションも確認できます。レイアウトボックス型のレイアウト組を実現できます。縦表示の場合、4つのボックスが並ぶようです。メニュースライドしながら表示されます。マルチセレクトなメニューも可能です。ナビゲーションバーアイコン、または文字が表示できます。ページネーションボタンと数字と組み合わせて表示できます。周囲を暗転してポップオーバーだけを目立たせられます。セグメントコントロール幅や色は自由です。通常は画面下に配置されます。アイコンで通知も使えます。画面切り替え時にアニメーションもできます。ボタンアイコンを付けたり、サイズも自由に選べます。日付の複数選択、日付から時間の選択など機能が多いです。イメージピッカーサイズは多数用意されています。プラスアイコンをタップすると、自分で新しい写真を選択できます。複数選択や、選択肢が別な選択に影響する(大ジャンル、中ジャンルのような)仕組みもあります。検索に使えるUIコンポーネントです。スイッチiOS風、Android風それぞれが利用できます。アコーディオン長いリストを省略して表示するのに使えます。バッジ多彩な表現のバッジが用意されています。カルーセル左右を小さく表示したり、動的に追加したりする機能があります。グリッド写真やコンテンツをタイル状に表示するのに使えます。アイコン執筆時点(v2.3.1)ではアイコンの種類は多くありません(表示されているものくらいです)。リストリストはよく使われるので多彩な表示をサポートしています。入力フォームも組み込めます。お知らせ表示アニメーションするお知らせもあります。ステップウィザードなどに使えます。垂直だけでなく、水平のデザインもあります。タグタグはシンプルです。アクションシートボタンの他、アイコンを使ったものなども用意されています。インジケータ処理中に使えるUIコンポーネントです。ボタンを表示するパターンです。下から表示されるモーダルです。トースト処理中やエラーの時に使えます。Refreshいわゆる引っ張って情報を更新するUIです。上下が用意されているのですが、上側の方は処理方法が分かりませんでした。スイッチアクション左右にスワイプしてアクションを呼び出すUIです。異なるデザインで複数用意されています。リストビューリストの中に画像を差し込むデザインです。サブヘッダーを用意するデザインもあります。結果表示サンプルがAliPayの決済完了画面で、あまりにも限定的な利用想定になっています。実際には他にも使える場面がありそうです。言語切り替え機能があります。独自の数字入力UIコンポーネントも用意されています。Mobileはnpmでインストール可能です。--saveHTMLではメタタグの設定(maximum-scale)と、タップの遅延をなくすFastClickの読み込みが推奨されています。}</script>後はReact側で使うだけです。ボタンは次のようになります。mountNode);CSSは次のようにimportで読み込みます。4.0以降になります。中国では古いAndroidデバイスもまだ数多く使われていますので、4.0以降というのは幅広いデバイスに対応できそうです。Angularも開発されています。4.4以降が対象になるので注意してください。ソースコードはGitHub上にあります。UIのように画面切り替え時のアニメーションや、スマートフォンアプリならではのUXを提供する訳ではないようです(一部のコンポーネントではアニメーションもありますが)。アリババが開発していることもあって、中国向けにアプリを提供する場合には特に親和性が高いUIになりそうです。Mobileは多彩なコンポーネントが特徴になります。UX部分については別なライブラリを使ったり、実装する必要がありますが、探すのは難しくないでしょう。React(またはAngular)でMonacaアプリを開発する際には選定に含めてもよさそうです。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。見やすい、メンテナンスしやすいJavaScriptのために。