はじめに

株式会社Another worksでインターンをしている、ハッケイと申します。
業務では主にTypeScript, ReactNativeでモバイルアプリの開発をしています。（1年半くらい）
4月から株式会社Another wokrsにて正社員として働きます。

ReactNativeという選択肢

ReactNativeではReactで培った知識や技術の多くを活かすことができます。
React経験者は、手軽にnative開発ができます。

Reactエンジニアに向けてReactとReactNativeの共通点やReactNativeのメリット等紹介できたらと思います。

ReactNativeとはなにか

javascriptでnative層(ios, android)のuiを動かしている、nativeのコンポーネントを抽象化している存在といえます。

JavaScriptを使用して各プラットフォームのAPIにアクセスし、UIの外観と動作を記述します。
内部でネイティブのレンダリングAPIが呼び出されるので、WebViewではなく、ネイティブのUIが描画されます。基本的にOSに準拠したUIになります。

ざっくり言うと、javascriptを通してネイティブのUIを構築/操作しているイメージです。

*flutterなどはdartで実装されたuiを表示しているらしい。（ネイティブのUIではない）

公式にわかりやすい図がありました。

reactnative	android	ios
Image	ImageView	UIImageView
Text	TextView	UITextView

参考：https://reactnative.dev/docs/intro-react-native-components

web開発と共通している部分

JSXでUIの構築
ほとんどReactの知識でUIの作成ができます。
関数コンポーネント、hooksを使うことができます。
CSSに近いスタイリング
基本的に今まで培ってきたCSSの知見が活かせます。
yoga layoutが採用されており、flexも使えます！
ただし、webとは少し違う部分もあるので注意は必要。
キャメルケースでstyleを記述する。flex-gapは使用できないなど
chromeのdevelopperToolが使える
consoleやnetwork、performanceのデバッグが可能
ReactnativeDebuggerを使えば、ReduxDevtoolsなんかも使える。
Hot reloadによるwebに近い開発体験
ソースコードを保存するたびに自動でリロードが行われます。
expoを利用することでurlを読み取るだけで実機開発も可能。
TypeScriptが使える
型は正義

expoという最強の相棒

expoとは、ReactNativeアプリの開発やビルドを支援してくれるサービス。
様々なライブラリを提供しており、どれもクオリティが高い印象。ドキュメントもかなり読みやすい。
更新頻度もとても早くて、信頼しています。

json形式の設定ファイルを記述するだけでios/androidの設定をexpo側でやってくれるのが本当にありがたい。

２種類のworkflow

expoを利用する場合、2種類のworkflowを選択できる。
最初はManaged workを利用するのがおすすめ。

Managed workflow
expoがネイティブ開発の複雑な部分を管理してくれるので「managed」
Managed　Workflowを利用すればネイティブのコードをほとんど書かずに開発することができる。
その代償として、ネイティブに依存した複雑な実装ができなかったりもするが、途中でBareに切り替えることも可能。

Bare workflow
expoの管理から外れたworkflowなので「bare(裸)」
ネイティブレイヤーのコードを自由に変更することが可能。
管理から外れた代償として、ネイティブ関連の設定を自分で行わなければならない。
BareからManagedに移行することはできない。

ReactNativeのメリット

・クロスプラットフォームなので開発がはやい
・社内でReactの知見やロジックを共有できる
・React経験者なら学習が容易
・expoを使えば証明書周りがとても簡単

ReactNativeのデメリット

・情報が少ない（特に日本語の情報は全然ない）
・コミュニティ・ドリブンなので「これ使っとけばOK！」といった決定版のライブラリが少ない
・ネイティブ言語での開発（swift, kotlin）に比べてパフォーマンスが劣る
・ライブラリを多用するのでアップデートの際に依存関係がバグる

学習のすゝめ

まずはチュートリアルから触れてみるのがおすすめです！
https://reactnative.dev/docs/tutorial