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

開発環境のセットアップ

このガイドでは、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

Node 20.19.4 以降をインストールするには、お使いの Linux ディストリビューションのインストール手順に従ってください。

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 Platform
  • Android Virtual Device

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

注

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

セットアップが完了し、ウェルカム画面が表示されたら、次のステップに進みます。

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

Android Studio はデフォルトで最新の Android SDK をインストールします。しかし、ネイティブコードで React Native アプリをビルドするには、特にAndroid 15 (VanillaIceCream) SDK が必要です。追加の Android SDK は Android Studio の SDK Manager を通じてインストールできます。

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

ヒント

SDK Manager は、Android Studio の「Settings」ダイアログのLanguages & Frameworks → Android SDKの下にもあります。

SDK Manager 内の「SDK Platforms」タブを選択し、右下隅の「Show Package Details」の横にあるチェックボックスをオンにします。Android 15 (VanillaIceCream) エントリを探して展開し、次の項目がチェックされていることを確認してください。

  • Android SDK Platform 35
  • Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image

次に、「SDK Tools」タブを選択し、ここでも「Show Package Details」の横にあるチェックボックスをオンにします。「Android SDK Build-Tools」エントリを探して展開し、35.0.0 が選択されていることを確認します。

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

3. ANDROID_HOME 環境変数を設定する

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

以下の行を $HOME/.bash_profile または $HOME/.bashrc (zsh を使用している場合は ~/.zprofile または ~/.zshrc) 設定ファイルに追加してください。

shell
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 の「Settings」ダイアログのLanguages & Frameworks → 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 Manager」を開くことで、利用可能な Android Virtual Device (AVD) のリストを確認できます。このようなアイコンを探してください

Android Studio AVD Manager

最近 Android Studio をインストールした場合は、おそらく新しい AVD を作成する必要があります。「Create Virtual Device...」を選択し、リストから任意の Phone を選択して「Next」をクリックし、VanillaIceCream API Level 35 イメージを選択します。

ヒント

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

「Next」をクリックし、「Finish」をクリックして AVD を作成します。この時点で、AVD の横にある緑色の三角ボタンをクリックして起動できるはずです。

以上です！

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

次は何をしますか？

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