メインコンテンツへスキップ

環境のセットアップ

このガイドでは、Android StudioとXcodeでプロジェクトを実行できるように、環境をセットアップする方法を学びます。これにより、AndroidエミュレーターとiOSシミュレーターで開発したり、アプリをローカルでビルドしたりできるようになります。

注

このガイドには、Android StudioまたはXcodeが必要です。これらのプログラムのいずれかがすでにインストールされている場合は、数分以内に起動して実行できるはずです。インストールされていない場合は、インストールと設定に約1時間かかることを想定してください。

環境のセットアップは必須ですか？

フレームワークを使用している場合、環境のセットアップは必須ではありません。React Nativeフレームワークを使用すると、フレームワークがネイティブアプリのビルドを処理するため、Android StudioやXCodeをセットアップする必要はありません。

フレームワークの使用を妨げる制約がある場合、または独自のフレームワークを記述したい場合は、ローカル環境のセットアップが必要です。環境をセットアップしたら、フレームワークなしで始める方法を学んでください。

開発OS​

対象OS​

依存関係のインストール​

Node、React Native コマンドラインインターフェース、JDK、および Android Studio が必要になります。

アプリの開発には任意のエディターを使用できますが、Android向けのReact Nativeアプリをビルドするために必要なツールをセットアップするには、Android Studioをインストールする必要があります。

Node

お使いの Linux ディストリビューションのインストール手順に従って、Node 18.18 以降をインストールします。

Java Development Kit

React Native では、現在、Java SE Development Kit (JDK) のバージョン 17 を推奨しています。より高い JDK バージョンを使用すると問題が発生する可能性があります。AdoptOpenJDK またはシステムのパッケージマネージャーから OpenJDK をダウンロードしてインストールできます。

Android開発環境

Android開発に慣れていない場合、開発環境のセットアップはやや面倒な場合があります。すでにAndroid開発に精通している場合は、いくつかの構成が必要になる場合があります。いずれの場合も、次のいくつかの手順を注意深く実行してください。

1. Android Studioをインストールする

Android Studioをダウンロードしてインストールします。Android Studioインストールウィザードで、次のすべての項目の横にあるボックスがオンになっていることを確認してください。

  • Android SDK
  • Android SDKプラットフォーム
  • Android仮想デバイス

次に、「次へ」をクリックして、これらのすべてのコンポーネントをインストールします。

チェックボックスがグレー表示されている場合は、後でこれらのコンポーネントをインストールする機会があります。

セットアップが完了し、ようこそ画面が表示されたら、次の手順に進みます。

2. Android SDKをインストールする

Android Studioは、デフォルトで最新のAndroid SDKをインストールします。ただし、ネイティブコードでReact Nativeアプリをビルドするには、特にAndroid 14 (UpsideDownCake) SDKが必要です。追加のAndroid SDKは、Android StudioのSDKマネージャーからインストールできます。

そのためには、Android Studio を開き、「Configure」ボタンをクリックして「SDK Manager」を選択します。

SDKマネージャーは、Android Studioの「設定」ダイアログの 言語＆フレームワーク → Android SDK でも見つけることができます。

SDKマネージャー内から「SDKプラットフォーム」タブを選択し、右下隅の「パッケージの詳細を表示」の横にあるボックスをオンにします。Android 14 (UpsideDownCake)エントリを探して展開し、次の項目がオンになっていることを確認します。

  • Android SDKプラットフォーム34
  • Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image

次に、「SDKツール」タブを選択し、ここでも「パッケージの詳細を表示」の横にあるボックスをオンにします。「Android SDK Build-Tools」エントリを探して展開し、34.0.0が選択されていることを確認します。

最後に、「適用」をクリックして、Android SDKおよび関連するビルドツールをダウンロードしてインストールします。

3. ANDROID_HOME環境変数を構成する

React Nativeツールは、ネイティブコードでアプリをビルドするために、いくつかの環境変数を設定する必要があります。

次の行を $HOME/.bash_profile または $HOME/.bashrc（zsh を使用している場合は ~/.zprofile または ~/.zshrc）設定ファイルに追加します。

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profile は bash 固有です。別のシェルを使用している場合は、適切なシェル固有の設定ファイルを編集する必要があります。

bash の場合は source $HOME/.bash_profile、zsh の場合は source $HOME/.zprofile を入力して、設定を現在のシェルに読み込みます。echo $ANDROID_HOME を実行して ANDROID_HOME が設定されていること、および echo $PATH を実行して適切なディレクトリがパスに追加されていることを確認します。

正しいAndroid SDKパスを使用していることを確認してください。SDKの実際の場所は、Android Studioの「設定」ダイアログの 言語＆フレームワーク → Android SDK で確認できます。

Watchman

Watchman インストールガイドに従って、Watchman をソースからコンパイルしてインストールします。

Watchman は、Facebook がファイルシステムの変更を監視するために使用するツールです。パフォーマンスの向上と特定のケースでの互換性を高めるために、インストールすることを強くお勧めします（言い換えれば、これをインストールしなくても何とかできますが、結果は異なる可能性があります。今インストールしておくと、後で頭痛の種を減らすことができます）。

Androidデバイスの準備

React Native Androidアプリを実行するには、Androidデバイスが必要です。これは、物理的なAndroidデバイスであるか、より一般的には、コンピューターでAndroidデバイスをエミュレートできるAndroid仮想デバイスを使用できます。

いずれにせよ、開発用にAndroidアプリを実行できるようにデバイスを準備する必要があります。

物理デバイスを使用する

物理的なAndroidデバイスがある場合は、USBケーブルを使用してコンピューターに接続し、こちらの手順に従って、AVDの代わりに開発に使用できます。

仮想デバイスを使用する

Android Studioを使用して./AwesomeProject/androidを開くと、Android Studio内から「AVDマネージャー」を開いて、利用可能なAndroid仮想デバイス（AVD）のリストを確認できます。このようなアイコンを探してください

Android Studio AVD Manager

最近Android Studioをインストールした場合は、新しいAVDを作成する必要がある可能性があります。「仮想デバイスを作成...」を選択し、リストから任意の電話を選択して「次へ」をクリックし、次にUpsideDownCake APIレベル34イメージを選択します。

パフォーマンスを向上させるために、システムで VM アクセラレーションを設定することをお勧めします。これらの手順に従ったら、AVD Manager に戻ります。

「次へ」をクリックしてから「完了」をクリックしてAVDを作成します。この時点で、AVDの横にある緑色の三角形ボタンをクリックして起動できるようになります。

以上です！

おめでとうございます！開発環境のセットアップに成功しました。

次は？

  • この新しいReact Nativeコードを既存のアプリケーションに追加する場合は、統合ガイドをご覧ください。
  • React Nativeについてさらに詳しく知りたい場合は、React Native入門をご覧ください。