React Native開発事例（使用したライブラリも紹介）
大人気のJavascriptフレームワークのReactですが、そのノウハウそのままでモバイルアプリまで作れてしまいます。
まさに「Learn once, write anywhere」。
ということで最近リリースしたアプリの紹介と、使用したツール／ライブラリの楽屋裏公開です。
アプリの紹介
今回リリースしたアプリは「Peer Ring ピアリング – なかまと話そう！女性特有のがん」です。
乳がん・子宮がん・卵巣がんなど、女性特有のがんに直面する人のためのピアサポート・コミュニティ（無料会員制ＳＮＳ）です。
コミュニティも活発になってきているのでのぞいてみてください。
Webアプリ版
今回紹介したPeer RingにはWebアプリ版もあります。
https://peer-ring.com/
React × Redux × Material UIを使用しています。
ほとんどMaterial UIのコンポーネントだけでできています。
サーバサイドはRuby on Railsでフロントエンドと開発はWebpacker上でやっています。
フロントエンドを無理やりRailsに載せた感じですが、さくっと一体的に開発ができて便利でした。
UIはAll Reactです。
一部だけとかせこいことしてません。笑
モバイルアプリを開発するにあたって候補にあがるのが当然React Native。
もちろんSwiftによるネイティブ開発も検討しましたが、Webアプリからのノウハウの転用、React Nativeや周辺ライブラリの充実、Androidアプリ開発も勘案し、React Nativeが最適と判断しました。
結果的にReact Nativeでよかったです。
React Native版
Webアプリで使用したAPI群はそのまま使用しています。
ReactやReduxはノウハウはそのまま使用できます。
転用できないのはUIコンポーネントで、Material UIはReat Nativeでは使えません。
Material Desginを実装したReact Native対応ライブラリを使用してもよかったのですが、Native Baseを採用しました。
Material Desginでなくネイティブアプリっぽい作りにしたかったので。
Objective-Cのコードはライブラリの設定必要になったもの（ほぼコピペ）以外は書いていません。
99% Javascriptです。
使用した主なライブラリ
・React Native
https://facebook.github.io/react-native/
今回のアプリ開発の核となるライブラリです。
開発中にもどんどんバージョンがあがるので、追いかけ続けました。
といってもアップデートで困ることはほとんどなかったですが。
後述のNativeBaseでUIコンポーネントはほとんどまかなえたので、React Nativeのコンポーネントを直接呼んだのはあまり多くないです。
Alert、WebView、Modal、Linking、CameraRoll、TouchableXX系くらいかな。
・Redux
https://redux.js.org/
Reactのstate管理に使います。特にアプリ全体で参照する必要があるようなものです。
ReduxというかFluxの設計は本当によくできています。
データを変更する場所がはっきりするので、おかしなデータが知らないところで入っているような余計なバグを生まなくて、開発がかなりやりやすくなります。
Webアプリとほとんど同じ設計でいけました。
モバイルアプリ特有のstateとしては、React Navigationのnavigationをフッタータブごとにreduxで管理しています。
Redux Persistで永続化して、アプリを再起動しても前回の状態／データを引き継げるようにしています。
・Native Base
https://nativebase.io/
使いたいUIコンポーネントは大体揃っています。
しかもネイティブアプリっぽく見えるのがまたいい。
ないものは自作したり他から持ってきたりはしていますが、あと欲しいのはPopoverとかDatePickerくらいかな。
Navigationはサンプルではreact-native-router-fluxを使っていますが、いまいち使いにくいので、Navigationと関係するヘッダーやフッタータブはReact Navigationにおまかせしました。
・React Navigation
https://reactnavigation.org/
React NativeのNavigationといえばreact-native-router-fluxが主流でしたが、最近はオフィシャルにこのReact Navigationを推しているようです。
ヘッダーやフッタータブのUIコンポーネントもついてきてかなり便利です。
Navigation（ページ遷移）はフッタータブごとにReduxで管理しています。
ページ遷移するときは、actionをつくってdispatchして、reduxerがうけとってNavigationのstateをつくって、React Navigationに渡すという流れです。
こうすることでページ遷移を任意のコンポーネントから扱えるようになりますし、その状態をそのまま永続的に保存できるようになります。
・Firebase
https://firebase.google.com/
通知にFirebase Cloud Messaging（FCM）を使っています。
iOSの場合はAPNsに直接送ってもいいのですが、Android版でどうせ必要だし、共通化するために通知はFCMでいくことにしました。
あとはAnalyticsも組み込んでいます。
React Native上では、React Native Firebaseを使って、Javascriptで組み込んでいます。
React Native FirebaseはいかにもFirebaseオフィシャルっぽい名前ですが、オフィシャルじゃないのですね。。。
・React Native Vector Icon
https://github.com/oblador/react-native-vector-icons
FontAwesomeやIonicons、MaterialIconsといったウェブフォントがそのままReact Nativeで使用できる便利なライブラリです。
ちょっとしたアイコンを使いたいときに重宝します。
・Expo / Create React Native App
https://expo.io/
https://facebook.github.io/react-native/docs/getting-started.html
React NativeではCreate React Native Appというツールを用意して、さくっとアプリができるようにしています。
Expoというアプリの上でReact Nativeアプリが動き、XcodeでビルドしなくてもExpo上でアプリを共有したりできるという便利そうなものなのですが、遅いし使いにくいし、そうそうに使用をやめました。
Create React Native Appで簡単にアプリを立ち上げるのはいいことだと思いますが、早い段階でEjectして切り離したほうがいいと思います。
全然関係ないですが、「もっと見る」ボタン機能にExpo製の@expo/react-native-read-more-textを使用しています。
開発環境
・Visual Studio Code
エディター。これだけでコーディング作業はほとんどまかなえます。
ESLintプラグインで構文チェックしておくくらいでしょうか。
・React Native Debugger
https://github.com/jhen0409/react-native-debugger
複数のツールが一体化して便利です。
が、実はあまり使っていなくて、オフィシャルのツールをいくつか立ち上げていることが多かったです。
Chrome Developer Tools ・・・ ログやソースコードデバッガー
React Developer Tools ・・・ React Componentの構造を可視化
Redux DevTools ・・・ Reduxのaction/stateの可視化
この３つがあればこと足ります。
・XCode
・Android Studio
最終的なバイナリを作るのにはもちろん必要です。
CameraRollやFirebase等、ネイティブと連携するときにも必要になることがあります。
React Nativeの利点
・ Webフロントエンドのスキル（Javascript、React）がそのまま使える
・ ネイティブアプリでないのに、レンダリングが速い（UIコンポーネントは内部的にネイティブを使っている）
・ ドキュメントが充実
・ サードパーティ製ライブラリが豊富
今は多くのプロジェクトでWebアプリはReact（サーバサイドはRuby on Rails）、モバイルアプリはReact Nativeを使っています。
ウェブ上のドキュメントは充実していますが、React Nativeのいい書籍は全然ないのですよ。
React.jsも少ないけど。
自分で本書こうかな。
