2016 年になって React Native 開発が現実的な選択肢となってきたので、 advent calendar の締めとしてメリット・デメリットの整理と、はじめるための諸情報をまとめる。
メリット
React Native の利点だと言われる次のことを詳細に。
- 実行速度が速い
- 開発速度が速い
- OSS
- 開発要員の確保が容易
実行速度が速い
よく聞かれたり、ハナシが噛み合わないときに確認したらそうだった、ということとして「 WebView 上で動くから遅いんでしょ ? 」ということがある。たぶん Cordova あたりを思いだして言っているのかなと思いつつも、既存の JavaScript によるモバイル開発の感覚はまったく役に立たないという返答をしている。
どのくらいサクサク動くのかという例として既存のアプリをみてもらうのがはやいので、次のアプリをインストールしてスクロールしまくってほしい。
ここまでの速度を出すためのチューニングに関しては次の記事が詳しい。
React Native Packager がソースをバンドルする際に babel helper を最適化したものに差し替えたり、ブリッジ呼び出しを都度呼び出しにし、反対にキャッシュ操作をまとめたりといったことが軽快な動作の立役者ということらしい。
ここで「ブリッジ」と言っている部分については次を参照。中の人が書いた解説記事の日本語訳。
開発速度が速い
ソースを書き換えても再コンパイルが走らず、すぐに反映可能なこと、 HTML のように宣言的に書けることが大きな理由として挙げられている。
また、まったくの最初からでもコマンドふたつだけで開発をはじめられることも大きい。最近は yarn に対応し、プロジェクトセットアップ時間が非常に短縮されている。
yarn global add react-native-cli
react-native init <project name>
OSS
すべてのソースコードが読めるため、よくわからない現象に遭遇したときも調査が非常に楽。調査方法としては次が一番はやい気がする。
- 公式ドキュメントを探す
- https://facebook.github.io/react-native/docs/getting-started.html
- 最近かなり整備されてきたのでまずあたることを推奨
- エラーメッセージなどをキーワードに issue を漁る
- https://github.com/facebook/react-native/issues
- 大体の問題はすぐにレポートされているので現状を把握しやすい
- ソースコードを読む
- 非常に読みやすくメンテナンスされているのであまりハマった経験がない
- わかりにくいが、
react-native init <project name>時のテンプレートは次の位置にある
開発要員の確保が容易
React の Learn once, write anywhere という思想によって、 Web アプリケーションを React で書いている方であればそのままモバイルアプリ開発が可能。これは @gonta616 が検証してくれているのでそっち読んだほうがはやい。
Angular2 も NativeScript という選択肢があるようだが、 2016 年現在では React 経験者が多いためまだ React Native のほうが現実的と考えている。
デメリット
- flow バージョンをあわせなければいけない
- upgrade が大変
flow バージョンをあわせなければいけない
React Native では flow を標準採用しているが、 flow は node_modules 以下も含めてプロジェクト全体でひとつのバージョンしか使えない。 flow が安定していればそれでも影響は少ないのだが、まだまだチェック対象やチェック内容が変わっていく段階で、バージョンをあげるといままで通っていたところで引っかかる。
自前でロジックやコンポーネントを定義している場合、それらで使用する flow バージョンが React Native と同じものに強制されるという制約となる。
upgrade が大変
React Native は 2 週間に 1 回ていどマイナーバージョンが上がっており、使えるコンポーネントが増えたり、既存コンポーネントのバグが治ったり、パフォーマンスが上がったりと基本的にバージョンが大きい方がよい。
ただし安全かつ簡単にバージョンをあげる手順が存在しない。これについては次に書いたので参照のこと。
事例
公式の事例は次にまとめられている。
Facebook 公式のアプリがいくつか、 Instagram 、 Airbnb などがならんでいる。 Instagram は Facebook 傘下となったので採用はまあわかるのだが、 Airbnb に関してはかなりの関心を持って採用していることがわかる。 Airbnb 制の地図コンポーネントが公式推奨になっている。
日本国内では Coiney さんが↑事例に載っている。
さらに次の事例を確認済み。他に知っている方いらっしゃれば教えてください。
- Togetter さん
- iOS / Android
- https://twitter.com/yositosi/status/791951323352535040
- ALICEHOLIC さん
- Builderscon session timer
- iOS / Android
- iOS 版は未リリース
- http://cureapp-dev.hatenablog.com/entry/2016/07/04/120613
- CureApp
コミュニティ
本家
Facebook が公式でホストしているチャットルームがある。メンバー数が増えすぎて Slack で新しいメンバーを招待できなくなったので Discord へ移動したらしい。ちなみに Discode の iOS クライアントも React Native 制。
質問とその回答などされているようだが、 React や flow 、 GraphQL なども同じチームなのでひとつひとつのチャンネルが散漫になっている印象を受ける。
日本
日本では Facebook グループと Slack チャンネルがある。
https://www.facebook.com/groups/1722053778010342/
https://slackin-xrtxcxctgz.now.sh/
Slack では general チャンネルで質問や React Native の話題が流れている。実際に使っている方が参加している。困っていることを issue として本家にあげることも可能なので何かある方はぜひ相談を。
来年 1 月には第 4 回目の勉強会も開かれる予定。
まとめ
まだ v1.0.0 を迎えていないものの、完成度は非常に高い。公式に載っている事例アプリをインストールして触ってみると既存アプリと遜色ないことがわかると思う。メリット・デメリットを考慮する価値がすでに出てきたのかなと思っている。
ここにあげた情報がクリスマスプレゼントになっていることを願う。よいお年を !!