2018最新定番！React Native開発の虎の巻
定番！React Native開発の虎の巻
弊社がReact Nativeでスマホアプリの開発を約2年前から初めています。
まだReact Nativeの初期の段階から、React Nativeの開発のノウハウを蓄積しています。
React Nativeは魔法ではありません。
他の言語やフレームワークと同じで、得意と不得意があります。
React Nativeを使って実際にアップルアプリストアとGoogle Playにアプリをリリースして
たくさんの苦労があったのも事実ですし、その過程でReact Nativeを使ってよかったところもあります。
概要
React Nativeはまだ安定していないという認識は正しいでしょう。
2018年5月23日現在React Nativeがバージョンが0.55.4になっています。
React Nativeのよかった点
React.js
React NativeフレームワークはReact.jsをベースにしています。
JavaScript開発経験者にとっては始めやすいです。フロントエンド開発などで、JavaScriptを開発したことがあれば、違和感なく、すぐ始められます。
Reactコンポーネントのライフサイクルの概念もそのままReact Nativeの中で使っていますので、React.jsでの開発経験があれば、そのまま応用できます。
React開発者でしたら、一層簡単に始めることができます。仮にReactでの開発経験が無くとも、Javascript開発者であれば、最初の学習コストが低いはずです。実際に私が知っているReact Nativeの開発者はプログラミング自体未経験の人もいます。それでも、最初の入門のハードルが低いです。
Web開発の経験を活かせる
React Nativeでの開発は、Web開発の経験や知見を活かすことができます。
例えば、UIのレイアウトはStyle Sheetのようなコンポーネントが用意されて、CSSの感覚で、画面のレイアウトの設定ができます。
一部のライブラリを除き、Javascript開発者がこれまで使ってきた多くのライブラリがReact Native開発でも適用可能です。例えば、moment.jsなど、日付や時刻を処理するライブラリーが大変便利です。
あと、開発のワークフロー的にもウェブと似たような感覚で行うことになります。
Hot reloading
React NativeのjsでUIのViewの変更をしましたら、変更後の動作確認がビルドなしでシミュレータのリロードですぐできます。Xcodeでの再度のコンパイルなどの作業もなく、とても高速です。
iOS開発(Objective-C)ですと、そこでストレスでした、Viewのコードをちょっと変更しただけでいちいちビルドをする必要がありました。（Objective-Cはコンパイラ型言語ですから）
React Nativeでは、コードの変更を監視するプロセスが起動していますので
コードが変更するたびに、監視するプロセスがそれを検知してシミュレータに反映されます。
失敗を避けるためのノウハウ
頻繁のバージョンアップとアップデート戦略
React Nativeは、まだ1.0リリースではありません（2018年5月27日現在）
私も一年前最初にReact Nativeに触れた時は、まだv0.37でした！（今、gitの一番最初のcommitを確認しました。笑）
今は、v0.55.4ですね。
一時期、毎週バージョンアップしまして、その後２週間一回、今は月一回のバージョンアップですね。
頻繁にバージョンアップということは、それなりにコミュニティも高速回転、高速開発していることですが
同時に、このフレームワークはまだ安定期に入っていないということでもあります。
基本的には、可能な限り毎回最新安定版にアップデートしていくのがおすすめですが
これもなかなか大変です。
もしプロダクションで公開中のアプリがあれば、どうしても安定性を優先してしまいますので
必ずリアルタイムに最新版に追随することはありません。
あと、アップデートしていくとしても
他のライブラリーとの相性も確認しながら、慎重に行っていかなければいけません。
だいたい、ど最新版ではなく、一つ二つぐらい古いのが比較的に周囲のライブラリーと問題なく動いているケースが多いですので、一つおすすめの戦略です。
ライブラリーの選別
先日こんな記事も書きましたが、ハテナブークマークでちょっとバズっています。笑。
（今は13userにブックマークされています。まだ少ない方ですが、よかったら、ブックマークしてみてください。）
何と48人のユーザーにブックマークされています！嬉しい！
http://b.hatena.ne.jp/entry/s/kokensha.xyz/reactnative/react-native-production-ready-library-2018/
なんと！
嬉しい！ pic.twitter.com/n6rO8A1R91— 川島@ソフトウェア、Web、アプリ、IoT作るのが大好き (@kokensha_tech) 2018年5月29日
この記事がみんなに気に入ってもらうことは、この辺やはりノウハウの需要があるということですね。
これからも自分の実戦で使っている優秀なライブラリーとコンポーネントを定期的に更新していきたいと思います。
React Nativeの開発では、ある意味、ライブラリーの選別は勝敗を決めるぐらい重要な作業の一つです。
上の記事では、先人たちが精選したものと、私も実際に本番アプリで使っているライブラリーをご紹介しました。
皆さんのプロジェクトでライブラリー選別時のご参考になれば嬉しいです。
もし探しても、欲しい機能を実現しているライブラリーがなければ、自分で作る必要があります。
不可能とは言いませんが、とてもハードルが高いです。
例：ビデオを編集する機能、カメラ機能、GPS、新しいハードウェアの動作の検出など
新しいReactNative のバージョンでどんどん新しいAPIとして実装されていくでしょうが、現時点でReact Nativeの標準のAPIになっていないものが多いのが現状です。
「こういう機能が欲しいな」と思う時に、行動の順番としては
- React Native公式のドキュメントを見て、あるかどうかを確認する
- なかったら、githubなどで、イメージの近いライブラリーを探す。
- なかったら、自作を検討する OR その機能を諦める（諦めるのも現時点で重要なストラテジーです！）
react-native link
React Nativeが外部ライブラリーを導入するときに、使う便利なコマンドです。
これは、「昔」古いバージョンではなかったのです、その「時代」ほぼ全部手動配置でした！笑
ただ、react-native linkを実行すれば全てがよくなる訳ではなく
pod install が必要なライブラリーもあります。（例えば、react-native-firebase, react-native-mapsなど）
そういう時は、react-native linkのあとで、pod installも忘れずに
ライブラリーの手動配置
ライブラリーを使わないReact Nativeプロジェクトってほぼないと言っていいでしょう。
外部ライブラリーを活用するのはむしろ必須で前提になっていると理解しています。
その中で、ライブラリーにもよりますが
手動で配置しなければならないライブラリーもあります。（それ以外はほとんど npm install のあと、react-native linkでやれば、配置してくれるのが多いです。）
例えば、react-native-mapsがその一つです、上の記事に、少し手動配置の内容を触れます。
あとは
https://github.com/react-community/react-native-image-picker
現時点で、手動で配置しなければいけません。（2018年5月26日）
あとは、react-native linkしてもうまく配置してくれないライブラリーがあります。（バグなどの原因で、例えば、react-native-fetch-blob）
そういう時も、手動で配置する必要があります。
だいたい、そのライブラリーのgithubページで書いていることが多いので
説明通りに実施すれば、ほとんど解決できます。
pod install
pod で管理されているライブラリーがあります。
pod installがスムーズできるための環境整備も事前に確認して欲しいものです。
開発ツール
nuclide
私が使っている開発ツールは、Atomです。
もっと正確にいうと、Facebookのnuclideです！
React Nativeの開発に必要なプラグインなど
一通り揃っていますので、Atomで自分で色々部品を拾ってきて自分で構築するよりは便利で確実です。
私も、全ての機能を使いこなせていないぐらいです。
今後、Nuclideの使い方なでもどこかで記事にまとめてみたいと思います！
deco
あとはdecoというのがありまして、実際に使っていませんが、とても有望な感じです！
最近、どうなっているのかなとサイトをチェックしましたら
なんと、Airbnbに入りました！というびっくりニュース、ますます楽しみですね！
AirbnbってJSの会社ですね。前はreact-native-mapsもAirbnbが作っていましたし（https://github.com/react-community/react-native-maps 今react-community配下にありますが）、JavaScriptのお作法のgithubライブラリも大人気ですし（https://github.com/airbnb/javascript）。色々貢献していますね。
storybook
人生が変わるらしいです！笑
XcodeとAndroid Studio
当たり前ですが
React Nativeを使っているとはいえ、最終的にはストアに公開するためには
XcodeとAndroidStudioを使わなければいけません。
ある程度のXcodeとAndroidStudioの知識がないとやはりダメです。
極端にいえば、XcodeとAndroidStudioで設定、アプリの発行、アップロードできるようになればとりあえず最後（アプリのリリース）までいけます。
よく参考するサイトurl
公式ドキュメント
本家ドキュメントです。
https://facebook.github.io/react-native/
awesome react native
おなじみのawesome系githubレポです。
良さそうな各種ライブラリのまとめリポジトリです。
https://github.com/jondot/awesome-react-native
js.coach
ReactとReact Nativeのライブラリ検索サイトです。なかなかよくできているサイトです。
ライブラリの説明をみればなんとなく可能性をつかめるでしょう。
あとは、弊サイトのまとめ記事（今執筆中ですが）
他の選択肢
実は、最近手強いライバルが現れました！
それはGoogleのFlutterです！
React Nativeのように、DartというJavaに連想させられる言語を使って、iOS/Android向けハイブリッドのアプリを開発できるのです！
上の記事のように、私もちょっと試したのですが、第一印象がすごくいいです。
React Nativeの Styelの部分がCSSのように書くのではなく、コンポーネント化して、rowとcolumのようにコンポーネント配置を組み合わせることで、レイアウトを制御しています。私個人的に、React Nativeと比べてこれが分かりやすいと思っています。
Cordova
他にもApache Cordovaもあります。
しばらく、ハイブリッドアプリ作成の世界で、戦国時代が続くかもしれません。
Angular+ Native Script
Angular+ Native Scriptという競合もあります。
Weex
Vue.jsを使ってWeexフレームワークもあります
Be Native!
もちろん、最初から純正Nativeで開発することもできます！笑
iOS: Objective-C/Swift
Android: Java/Kotlin
習得すると、本当に最強で、デバイスのハードウェアも本系のSDKそのままアクセスして制御できますし、最新のOSの機能なども待つことなくすぐ実装することができます。
Nativeは最強です。しかし、それに対してとても学習コストがかかって、Objective-C/Swift、Java/Kotlinの経験豊富なベテランソフトウェアエンジニアを見つけてチームビルディングするのが非常にハードル高いですし、人件費という意味でのコストもとても高いです。
展望
React Nativeはしばらく、色々選択肢の中で、しばらく優位性を持つと見ています。
しかし、一年後、二年後は、その業界地図が大きく変わるかもしれません。
他に何か気になるところがありましたら、Twitterでもお気軽に声をかけてください！
なんと
いつの間にか#タイムチケット でプログラミング部門
第４位！
ありがとうございます！#React #reactnative #アプリ開発 pic.twitter.com/YpkRgOarH6— 川島@ソフトウェア、Web、アプリ、IoT作るのが大好き (@kokensha_tech) 2018年5月24日
今しか取れないスクリーンショットかもしれません！#ReactNative #タイムチケット pic.twitter.com/QnvGj74pQ2
— 川島@ソフトウェア、Web、アプリ、IoT作るのが大好き (@kokensha_tech) 2018年5月31日
obnizでドットマトリックスLEDを制御して日本語（他の言語も）を表示する！
川島賢の自己紹介
