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

開発環境のセットアップ

このガイドでは、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 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 Virtual Deviceを使用することもできます。

どちらの方法でも、開発用にAndroidアプリを実行できるようにデバイスを準備する必要があります。

物理デバイスの使用

物理的なAndroidデバイスをお持ちの場合、USBケーブルでコンピュータに接続し、こちらの指示に従うことで、AVDの代わりに開発に使用できます。

仮想デバイスの使用

Android Studioで `./AwesomeProject/android` を開くと、Android Studio内から「AVD Manager」を開くことで、利用可能なAndroid Virtual Devices (AVD) のリストを見ることができます。このようなアイコンを探してください。

Android Studio AVD Manager

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

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

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

以上です！

おめでとうございます！開発環境のセットアップが正常に完了しました。

次は何をしますか？