ReactNativeの話

Flutterのほうがイマドキっぽいのかもしれないが、今後伸びるのはReactNativeな気がする

なぜReactNative?

  • ネイティブアプリで新規開発するモチベーションってどんどん薄れていきそう。
  • FlutterやXmarinもあるけど、Web(React)エンジニアがとっつきやすいというのは大きいメリット。

ReactNativeって何?

ネイティブで動くやつ、って意味でNativeが付くんだろう。 当たり前だけどReactとは言えReactではなく、React風に書けるJavaScriptライブラリ。ビルドされると、ReactNativeで書かれたコンポーネントは各プラットフォーム毎にUIクラスを生成する。(ViewControllerとActivity、とか。) 昔のクロスプラットフォームHTML5で書いてWebViewで。。。みたいな、めちゃしょぼいやつだったけど、ReactNativeとか、あんまり詳しく無いけどXamarinとか、Flutterとか、実際にネイティブで動くクロスプラットフォームのライブラリが生まれてから、リッチなインタラクションを実現できるようになっていろんなプロダクトで採用されていると思う。

ReactNativeはどんなアプリで使われているの?

React自体がFacebook製というのもあって、FacebookInstagramはReactNativeだったはず。AirbnbはReactNativeだったけど今はネイティブになったらしい。 SNS系はそんなにUIに凝らない(アニメーションとか)けど、AirbnbとかはLottieみたいなアニメーションライブラリ出してたり、いろいろ力を入れている印象なので、ReactNativeでは物足りなくなったのかもしれない。ちなみにUber/UberEatsもReactNativeらしい。

ReactNativeをやってみる

ReactNativeの環境構築

https://reactnative.dev/docs/environment-setup 公式が、「Expo-CLIを使え!」と言ってくる。 チュートリアルの通りにコマンド打ち込んで、Expoインストール→プロジェクト作成しましょう。 (TypeScriptでやりたいので、そうした)

Expoって何?

ReactNativeのライブラリ。なんかいろいろ簡単にやらせてくれるらしい。 その分制約がある(ネイティブコードを弄れない、とか?) https://trilingual-engineer.com/expo-vs-react-native

アプリを起動してみる

プロジェクト直下のディレクトリ で

expo start

を実行すると、 スクリーンショット 2020-06-01 23.58.05.png

こんな画面に飛ばされるので、起動したいデバイス(シミュレーター とか実機とか)を選択する。 そしたら、そのデバイスにExpoアプリがインストールされて、その上でさっき作成したReactNativeのアプリが動く。 これはホットリロードなので、デバッグする時は保存すると勝手に反映される。はず。