React Native 開発手法

に公開

まずReactNativeとはJSの一番人気なフレームワークのReactでスマホアプリも作れるようにしたものです。

現在のReact Nativeでは、まずは ExpoのManaged Workflow(マネージドワークフロー) を使って開発をスタートし、
途中でネイティブ機能が必要になったときに Bare Workflow(ベアワークフロー) に切り替える、という流れが一般的です。

🚀 Expo(Managed Workflow)の説明
Expo は、React Nativeの開発をもっと簡単・スピーディーにしてくれるフレームワークです。
・ネイティブコードを書かなくても JavaScript だけでアプリ開発が可能
・ビルド不要で実機確認ができる
・クラウド(EAS Build)でネイティブアプリのビルド・共有・デプロイができる
・環境構築が非常に簡単

🔧 開発の始め方
まずは以下のコマンドでプロジェクトを作成します:

npx create-expo-app@latest
#環境構築コマンド

上記のコマンドを実行後にプロンプトの指示に従って進めると環境構築完了です。
プロジェクト作成後にルートディレクトリに移動して

npx expo start

すると、以下のように QRコードが表示されます。

📱 実機での動作確認
・Android:Expo Go アプリでQRコードを読み込む
・iOS:iPhoneのカメラアプリでQRコードを読み込む

すぐにスマホ上でExpo Goアプリが立ち上がり動作の確認できます。
※確認の条件:
・ネイティブコードを含まない(=Expo対応のライブラリのみ)
・Expo GoとSDKバージョンが一致している
・スマホとPCが同じWi-Fiネットワークに接続されている

Windows PCを使っていても iOS 実機での確認が可能です!

🖥️ エミュレーターでの確認
Windows → コマンド実行後に a キーを押すとAndroidエミュレーターが起動

macOS → i キーを押すとiOSエミュレーターが起動(a キーでAndroidの確認も可能)

エミュレーター上でもExpo Goアプリが立ち上がり動作の確認ができます。

以上が Expo(Managed Workflow)の説明です。

Bare Workflowの説明

Bare Workflow(ベアワークフロー) は、次のような場合に使います:
・カメラ制御や決済SDKなど、Expoだけでは対応できないネイティブ機能を使いたいとき
・AndroidやiOSの ネイティブコード(Objective-C / Swift / Java / Kotlin) を自分で編集・追加したいとき
・React Native標準のネイティブモジュール(例:react-native-keyboard-controller
)を使いたいとき
・ Expo Goの制限を受けずに、自由にネイティブアプリを構成したいとき

つまり、ExpoのManaged Workflowではできないことをしたい場合に途中から「より自由な開発モード」に切り替えるのが Bare Workflow です。

※Bare Workflowに移行すると、アプリがカスタムネイティブコードを含むため、
Expo Goでは起動できなくなります。

Bare Workflowでの開発の方法
まずexpo dev clientというものを入れる必要があります。これはネイティブコートを含んだアプリでExpo Goの開発体験(QRコードで即デバッグができる)ができるようにしてくれるライブラリです。

npx expo install expo-dev-client

インストール後に

npx expo prebuild

上記コマンドを実行後プロジェクトのapp.jsonというネイティブを生成する設定ファイルを見て android/・ios/ ディレクトリが生成され、ネイティブ構成に切り替わります。
app.json は、Expoがどんなネイティブ機能を含めるかを定義する設定ファイルです。
ライブラリによっては「app.jsonに以下の設定を追加してください」と書かれていることがあります。

この設定があることで、expo prebuild は適切なネイティブコードを含む android/・ios/ ディレクトリを生成します。
この状態からネイティブコードをカスタマイズすることができます。

その後、開発用クライアントをビルドして端末にインストールします

npx expo run:android
# または
npx expo run:ios

上記のコマンドを実行すると、PCに接続されている 実機 または起動中の エミュレーター に デバッグビルド(Debug Build) がインストールされます。

ここからは ネイティブコードを含んでいてもデバッグビルドがインストールされていればExpo(Managed Workflow)と同じように

npx expo start

上記コマンド実行後に上の Expo(Managed Workflow)で説明したものと同じようにQRコードで読み取って実機で動作確認、aまたはiを押してエミュレーターで動作確認ができます。
※Windows環境では、iOS向けのデバッグビルドは作成できません。
そのため、Bare WorkflowでiOSアプリを動かすには 一度Macを使って expo run:ios をして、iOS実機にインストールする必要があります。
いったん開発用クライアントが iOS 実機に入ってしまえば、
その後は Windows PCから npx expo start でQRコードを出し、iOS 実機で読み取って動作確認を続けることができます。

以上が Bare Workflowの説明です。

まとめ

  1. Expoで開発をスタート
  2. 可能であれば、Expo環境(JavaScriptオンリー)でアプリを完成させる
  3. ネイティブコードをいじらないとアプリができない。。。
  4. Bare Workflowに移行して、ネイティブコードを追加しながらアプリを仕上げる

最初は手軽に、必要になったら本格的にというかんじです。

参考URL
https://docs.expo.dev/
https://reactnative.dev/docs/environment-setup
https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

Discussion