imakyo-logo
imakyo-blog
HomeAbout

ReactNativeの環境構築

2024/11/03
react-native-environmental-building

はじめに

ReactNative の環境構築をしたので、備忘録として記事を書きます。
ReactNative はフレームワーク(Expo)を使用しての開発が可能ですが、今回はフレームワークを使用しない方の環境構築手順をまとめます。

手順

  1. iOS の環境構築
  2. Android の環境構築
  3. ReactNative のプロジェクト作成と実行
  4. デバッグ方法

iOSの環境構築

ReactNative を iOS シミュレータで実行できるように設定を行います。

まずは、Homebrew で Node と Watchman をインストールします。

brew install node
brew install watchman

※ Node のバージョンは18.18以降である必要があるので、バージョンが古い場合はアップデートします。

次に最新版の XCode をインストールします。
XCode のバージョンによっては、過去のコードが動かなく可能性があるため、AppStore からではなく、Apple Developer から特定のバージョンをインストールするようにします。

XCode の Command Line Tools もインストールする必要があります。
Command Line Tools は XCode と一緒にインストールされるはずですが、念の為確認しておきます。
XCode を開き、XCode のメニューから Settings... を開き、Command Line Tools がインストールされていることを確認します。
必要があれば、Command Line Tools の最新版をインストールします。
unity_hub_installer
参考：https://reactnative.dev/docs/set-up-your-environment?platform=ios

Androidの環境構築

ReactNative を Android エミュレータで実行できるように設定を行います。
※ 手順で指定しているバージョンの値は ReactNative の更新によって変更している可能性があるので要注意

Android でも Node と Watchman のインストールが必要ですが、iOS の環境構築と同様なため、スキップします。
以下のコマンドで Open JDK を設定します。

brew install --cask zulu@17    // OpenJDKをインストール
brew info --cask zulu@17
echo 'export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home' >> ~/.zshrc    // 環境変数を設定
source ~/.zshrc    // 環境変数の反映

Android Studio を Android Developers のダウンロードページからダウンロードします。
ダウンロードができたら、Android Studio の settings で

  • Android SDK Platform 34
  • Intel x86 Atom_64 System ImageまたはGoogle APIs Intel x86 Atom System Imageまたは (Apple M1 Silicon の場合)Google APIs ARM 64 v8a System Image

がインストールされていることを確認します。
インストールがされていない場合、インストールしておきます。
また、SDK Tools タブを選択し、Android SDK Build-Tools で 34.0.0 がインストールされていることを確認します。

unity_hub_installer
unity_hub_installer
次に ReactNative が Android Studio に接続するために必要な環境変数を設定します。
# ~/.zshrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

参考：https://reactnative.dev/docs/set-up-your-environment?platform=android

ReactNative のプロジェクト作成と実行

以下のコマンドでプロジェクトを作成します。

npm uninstall -g react-native-cli @react-native-community/cli  // 予期しないエラーを防ぐため削除
npx @react-native-community/cli@latest init SampleProject      // HogeProjectを作成

プロジェクトが作成されたら、Gemfile を確認し、指定されたバージョンの ruby をインストールします。
asdf でインストールする場合、以下のコマンドを実行します。

asdf plugin list all | grep ruby                               // ruby のプラグインを表示
asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git  // ruby のプラグインをインストール
asdf plugin list                                               // asdf のインストール済みプラグインを表示
asdf list all ruby                                             // ruby のインストール可能なバージョンを表示
asdf install ruby 2.6.10                                       // ruby のバージョンを指定してインストール
asdf list ruby                                                 // ruby のインストール済みのバージョンを表示
asdf global ruby 2.6.10                                        // ruby 2.6.10 を global に指定

次に bundler でパッケージをインストールします。

gem install bundler     // bundler をインストール
cd SampleProject/       // ReactNative プロジェクトに移動
bundle install          // パッケージをインストール

次に CocoaPods でパッケージをインストールします。
cd ios                     // ios ディレクトリに移動
bundle exec pod install    // パッケージをインストール

ここまでできたら、package.json の scripts を実行し、アプリを起動します。
npm run start      // ReactNative の開発サーバーを起動
npm run ios        // iOS シミュレータを起動
npm run android    // Android エミュレータを起動

※ 失敗する場合は、コマンドからではなく XCode や Android Studio から実行します。実行が成功すると次回以降はコマンドから実行できるようになります。

参考：https://reactnative.dev/docs/getting-started-without-a-framework

デバッグ手順

React Native DevTools を使ったデバッグ手順をまとめます。

ReactNativeのバージョンが0.76の場合

通常通りアプリを起動します。

npm run start      // ReactNativeの開発サーバーを起動
npm run ios        // iOS シミュレータを起動
npm run android    // Android エミュレータを起動

起動できたら
  • iOS シミュレータ：Cmd ⌘ + D もしくは（Device > Shake）
  • Android エミュレータ： Cmd ⌘ + M （macOS）

でデバッグメニューを表示し、Open DevTools で DevToolsを起動します。

そして、DevTools の Sources でブレークポイントを使用したり、Console でログを確認し、デバッグを行います。
また、デバッグメニューで Toggle Element Inspector を選択することで、コンポーネントのサイズを確認することができます。

ReactNativeのバージョンが0.75~0.73の場合

以下のコマンドでデバッグ用のアプリを起動します。

npx react-native start --experimental-debugger    // ReactNativeのデバッグサーバーを起動
npm run ios                                       // iOS シミュレータを起動
npm run android                                   // Android エミュレータを起動

起動できたらバージョン0.76と同じく
- iOS シミュレータ：Cmd ⌘ + D もしくは（Device > Shake）
- Android エミュレータ： Cmd ⌘ + M （macOS）
でデバッグメニューを表示し、Open DevTools で DevToolsを起動します。

※ Sources でファイルが表示されない場合は、Cmd ⌘ + P でファイルを検索することができます。

参考：https://reactnative.dev/docs/debugging

おわりに

今回、ReactNative の環境構築からデバッグ手順までまとめました。
ReactNative のドキュメントでは、フレームワーク（Expo）が推奨されていたり、デバッグ方法もいくつかあったりし、少し分かりづらく感じました。
この記事では Expo を使用しない方法での環境構築手順をまとめたので、同じように Expo なしで環境構築している方へ参考になれば幸いです。

Imakyo
imakyo

未経験からエンジニアへ転職。メインはSwiftとDartを用いたモバイルアプリ開発。個人開発や業務での経験を備忘録として発信していきます。