開発環境の構築
react-native-cliがインストールされている場合は、必ずアンインストールしてください。react-native-cliは不要になっていますが、古い記事を参照してインストールしてしまい、このコンテンツをすすめる中でトラブルを引き起こすケースがしばしば見られます。
npm run iosやnpm run androidでエラーが出るときは、まずreact-native-cliがインストールされていないことを確認してください。
- コマンドラインで
react-native --versionを実行して、コマンドが見つからないというエラーが発生することを確認する。 - コマンドが実行できてしまう場合は、
npm uninstall -g react-native-cliを実行し、react-native-cliをアンインストールする。 - 最終的に、コマンドラインで
react-native --versionを実行して、コマンドが見つからないというエラーが発生するようになったことを確認する。
インストールするツール
以下のツールは、React Nativeでのアプリ開発に必要となるので、必ずインストールしてください。XcodeとAndroid Studio以外のツールは、Homebrew (macOS)やScoop (Windows)などを利用してインストールすることをおすすめします。
| OS | ツール | バージョン | その他 |
|---|---|---|---|
| macOS, Windows | Node.js | アクティブLTS | Node.js 16以降であれば学習には問題ないはずですが、このコンテンツはアクティブLTSを前提にして書かれています。 |
| macOS, Windows | Java Development Kit | 11 | ディストリビューションにはこだわりなし |
| macOS, Windows | Android Studio | 最新 | インストール後にAndroid仮想デバイスの作成とAndroid SDKのコマンドラインツールの設定が必要です。 |
| macOS, Windows | Git | 最新 | Homebrew(macOS), 公式ページ(Windows)でインストール |
| macOS | Xcode | 最新 | App Storeでインストール ※ 異なるバージョンのXcodeを共存させる |
| macOS | CocoaPods | 最新 | Ruby, CocoaPodsのインストール |
これらに加えて、少し便利に開発するために次のツールも導入してください。
| OS | ツール | 用途 | おすすめのインストール方法 |
|---|---|---|---|
| macOS | watchman | ファイルシステムの変更監視（React Nativeアプリのビルド高速化など） | Homebrew |
IDEは好みのものを利用していますが、主に以下のいずれかです。
| ツール |
|---|
| Visual Studio Code |
| IntelliJ IDEA |
Android仮想デバイスの作成
仮想デバイスを作成して管理する | Android デベロッパーを参照して、Androidアプリの開発中に使う仮想デバイスを作成してください。
仮想デバイスは簡単に追加や削除ができるので、初回セットアップ時にはシステムイメージの一覧に初期表示されている「Recommended」タブから選択するのが良いです。
Android SDKのコマンドラインツールの設定
Android Studioをインストールした後、Android SDKに含まれる各種コマンドラインツールを使えるように設定する必要があります。
Android StudioでSDK Managerを開き、SDK Toolsタブで以下のツールにチェックが付いていることを確認してください。チェックが付いていない場合は、チェックを付けて「Apply」もしくは「OK」を押してインストールしてください。
- Android SDK Command-line Tools (10.0)
- Android SDK Platform-Tools
- Android Emulator
次に、環境変数ANDROID_SDK_ROOT、ANDROID_HOMEを設定します。
Windowsはユーザー環境変数に設定してください。また、%USERPROFILE%などの変数を使用するとアプリ実行時に変数が値に置き換わらずエラーとなることがあるため、値を直接設定してください。
| 環境変数 | 設定例（macOS） | 設定例（Windows） |
|---|---|---|
ANDROID_SDK_ROOT | $HOME/Library/Android/sdk | C:\Users\ユーザー名\AppData\Local\Android\Sdk |
ANDROID_HOME1 | $ANDROID_SDK_ROOT | C:\Users\ユーザー名\AppData\Local\Android\Sdk |
最後に、各コマンドラインツールのディレクトリをPATHに追加します。
| コマンドラインツール | 設定例（macOS） | 設定例（Windows） |
|---|---|---|
| Android SDK プラットフォーム ツール | $ANDROID_SDK_ROOT/platform-tools | %ANDROID_SDK_ROOT%\platform-tools |
| Android SDK コマンドライン ツール | $ANDROID_SDK_ROOT/cmdline-tools/10.0/bin | %ANDROID_SDK_ROOT%\cmdline-tools\10.0\bin |
| Android エミュレータ | $ANDROID_SDK_ROOT/emulator | %ANDROID_SDK_ROOT%\emulator |
$ANDROID_SDK_ROOT/toolsがPATHに含まれている場合、PATHから削除してください。古いバージョンのAndroid Studioをインストールしていた場合や、インストール方法を紹介した古い記事などを参照してインストールした場合に、特に注意してください。分かりづらいエラーが発生して解決できないというケースがしばしば見られます。
macOSでの~/.zprofileへの設定例は次のようになります。2
# Android CLI environment variables
# https://developer.android.com/studio/command-line/variables
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
# Android CLI PATHs
# https://developer.android.com/studio/command-line
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/cmdline-tools/10.0/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
これでコマンドラインツールの設定が完了しているはずです。次のコマンドを実行して、正常に完了することを確認してください。
sdkmanager --list_installed- インストール済みのSDKコンポーネントが表示されます。
avdmanager list avd- 作成済みの仮想デバイスの詳細が表示されます。
adb devices- 起動中のエミュレータや、USBで接続しているAndroid端末が表示されます。
emulator -list-avds- 作成済みの仮想デバイスが表示されます。
- macOSで現在の起動中のシェルを確認する方法
- ターミナルを開き
echo $SHELLを実行します。
- ターミナルを開き
- macOSのバージョンごとのデフォルトのログインシェル
- macOS Catalina（10.15）以前： デフォルトのログインシェルはBashです。
- macOS Catalina（10.15）以降： デフォルトのログインシェルはZshです。
- macOSでシェルに応じて環境設定ファイルを設定する方法
- ログインシェルがBashの場合
- 環境変数の設定は
~/.bash_profileファイルで行います。 - 環境設定は
.bashrcファイルで行います（.bashrcファイルが存在しない場合、touch ~/.bashrcで生成できます）。
- 環境変数の設定は
- ログインシェルがZshの場合
- 環境変数の設定は
~/.zprofileファイルで行います。 - 環境設定は
.zshrcファイルで行います（.zshrcファイルが存在しない場合、touch ~/.zshrcで生成できます）。
- 環境変数の設定は
- ログインシェルがBashの場合
※ ln -s ~/.bash_profile ~/.zprofileコマンドを使用して、BashとZsh両方同じ設定を共有できます。
Ruby, CocoaPodsのインストール
macOSには、デフォルトでRubyがインストールされているので、sudo gem install cocoapodsを実行することでCocoaPodsをインストールできます。
システム全体にBundlerをインストールするのは避けたい場合や、開発に特権ユーザを利用したくない場合はシステムとは別のRubyをインストールし、その中にBundlerをインストールしてください。asdf-vmなどのツールを利用すると、システムとは別のRubyを簡単にインストールできます。 インストールおよび使い方については、asdfのインストールを参考にしてください。
Appleシリコン搭載のMacコンピュータでは、Rubyのバージョンが2.7.x未満の場合にCocoaPodsのインストールでエラーが発生します。
Homebrewやasdf-vmなどのツールを利用して、使用するRubyのバージョンを2.7.x以上にアップデートしてください。
asdfのインストール
Bashの場合
# 依存関係をインストール
brew install coreutils curl git
# Homebrewを使用してインストール
brew install asdf
# asdf.shを.bashrcに追加
echo -e "\n. \"$(brew --prefix asdf)/libexec/asdf.sh\"" >> ~/.bashrc
Zshの場合
# 依存関係をインストール
brew install coreutils curl git
# Homebrewを使用してインストール
brew install asdf
# asdf.shを.zshrcに追加
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
asdfは複数のプログラミング言語やランタイム環境のバージョン管理を効果的にサポートするライブラリです。詳細はasdfの特徴とasdf公式ドキュメントを参照してください。
asdfの使い方およびプラグイン管理
使い方
# プラグインをインストール
asdf plugin add nodejs
# バージョンをインストール
asdf install nodejs 18.15.0
# バージョンを設定(.tool-versionsに追加される)
asdf local nodejs 18.15.0
プラグイン管理
# 追加
asdf plugin add <name> <git-url>
# 例) asdf plugin add elm https://github.com/vic/asdf-elm
# 照会
asdf plugin list
# アップデート
asdf plugin update --all
asdf plugin update <name>
# 例) asdf plugin update erlang
# 削除
asdf plugin remove <name>
# 例) asdf plugin remove erlang
プロキシ設定
プロキシ環境下で開発する場合は、各ツールにプロキシの設定が必要です。
環境変数でのプロキシ設定
npmやCocoaPodsなど多くのツールは環境変数に設定したプロキシ設定を利用します。以下の方法でプロキシを設定してください。
- macOS
- Windows
~/.zprofileに、以下の内容を追記してください。
export http_proxy=http://プロキシアドレス:ポート番号
export https_proxy=http://プロキシアドレス:ポート番号
この設定を追記した後source ~/.zprofileを実行すると、プロキシ設定が反映されるようになります。
setx http_proxy http://プロキシアドレス:ポート番号
setx https_proxy http://プロキシアドレス:ポート番号
Gradleのプロキシ設定
AndroidアプリのビルドはGradleで行われます。Gradleのプロキシ設定には環境変数の設定値は反映されないので、個別に設定する必要があります。
systemProp.http.proxyHost=プロキシアドレス
systemProp.http.proxyPort=8080
systemProp.https.proxyHost=プロキシアドレス
systemProp.https.proxyPort=8080
この設定内容を、次のファイルに追記してください。ファイルが存在しない場合は作成してください。
- macOS:
$HOME/.gradle/gradle.properties - Windows:
%USERPROFILE%\.gradle\gradle.properties