【ReactNative】ExpoなしのReactNativeの環境構築をやってみた(Android編)

こんにちは、kazuです。
React Nativeでアプリを開発する際、Expoを利用した開発とReact Native CLIを用いた開発の2つのアプローチがあります。
Expoは簡単に開発を始めることができる一方で、いくつかの制約があります。
一方、React Native CLIを使用する方法では、よりネイティブに近い開発体験が得られます。
この記事では、React Native CLIを使用した環境構築の手順について、Androidに焦点を当てて解説します！

前提条件

以下表はインストール済みのものです。そして私の環境になります。
以下は必須なので、必ずインストールしてください!

補足

AndroidStudioですが、Giraffe以上が必要です（2024/2 現在）
理由としては以下インストール直後にビルドしたら以下のエラーが出たからです。
The project is using an incompatible version (AGP 8.1.1) of the Android Gradle plugin. Latest supported version is AGP 8.0.0
簡単にいうとAGPが保証されていないよというエラーですね。私がFlamingoを使用していたときにエラーが出ました。そしてAndroid Studio Hedgehogをインストールして再度試してみるとエラーが出なくなったのでそういうことらしいですね。
以下は必要なAGPバージョンのサポートが記載されている公式サイトです。

>> Android Developer – Android Studio Hedgehog

環境構築を行う

次に実際に環境構築を始めていきます！

1.環境変数の設定を行う

export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools

2.watchmanをインストールする

ターミナル上でbrew install watchman実行しwatchmanをインストールする。
ちなみにwatchmanとはファイルを監視し、ファイルが変更された時特定のアクションを実行するツールのことです。

>> watchman

3.ReactNativeでプロジェクトを作成する

では、実際にReactNativeでプロジェクトを作成していきます！
インストールしたい場所にディレクトリ移動してnpx react-native init <プロジェクト名> npx @react-native-community/cli@latest init <プロジェクト名>を実行する
これだけです。簡単ですよね！！
※6/7更新　ただのinitは非推奨になったみたいですね今は@react-native-community/cli@latest initが正しいみたいです！

実際にアプリをビルドしてみる

次は実際に起動していきます。方法は2つあるので紹介していきます。
1つ目はnpm run startからmetroを起動してビルドする方法
もう一つはAndroidStudioのRun'App'からのアプリをビルドする方法の二つです。
上記は同じビルドでも性質が違うので説明します。

metroからのビルド

まずmetroとは何かということですが、
MetroはFacebookのReactNativeチームによって開発された、
アプリケーションを数千のモジュールを効率的に操作できるものです。
Metroからビルドをするとデバッグビルドが実行されます。そしてデバッグのアプリがインストールされます。
ここで認識をしてほしいのですが、デバッグビルドではMetroを起動していないとアプリが起動できません。
ただデバッグビルドで開発するメリットとしては、Metroがリアルタイムでコードの変更を検出してホットリロードなどの機能でアプリを更新すること可能になります。
またconsole.logなどのログを出力してくれるのがメリットです。

AndroidStudioからのビルド

次はAndroidStudioからのビルドです。やることはネイティブアプリと同じになります。
まずはBuild Variantsからreleaseに変更してRun'App' をクリックする。これだけです！
releaseビルドでアプリをインストールすると次のようなメリットがあります。
まずexpoやmetro経由でビルドするとアプリをPCと端末を繋いでおかないといけないです。
ただ、AndroidStudioからリリースビルドを実行するとPCに接続していなくてもアプリが起動できるようになります。

最後に

いかがでしたでしょうか？
ReactNativeの環境構築（Android）の仕方を書いていきました！
ネイティブの方からReactNativeに入ると開発手法が違くて戸惑うと思います。
私も慣れるのに時間がかかりました。
ただホットリロードなどはすごく便利になります。
最近は探せば色々なパッケージがあるので開発しやすくなっているので、ReactNativeを開発の選択肢に入れるのもいいと思いました。
iOS版の記事も書こうかと思っています。
最後までご確認いただきありがとうございました。