Androidアプリ開発環境の構築

Expo開発ツールを使って、Windows10上にAndroidアプリの開発環境を構築します。

事前準備

expo.io(https://expo.io/) のページで、「Sing Up」して、アカウントを登録します。

インストーラーで、node.jsをインストールし、npmコマンドで、Expo開発ツールをインストールします。

Androidエミュレーターでデバッグする為、Android Studioをインストールします。

Android Studioを起動し、Configure から SDK Manager と AVD Manager を開き、それぞれの設定を行います。

右下の「Show Package Details」をチェックし、「Android 11.0 (R)」配下にある次の項目をチェックします。

「OK」ボタンを押下すると、コンポーネントのダウンロードが開始され、インストールされます。

「Create Virtual Device...」で、次の内容で、Androidの仮想デバイスを作成します。

Android SDKに関して、環境変数ANDROID_HOMEとPATHを設定します。

変数	値
ANDROID_HOME	%USERPROFILE%\AppData\Local\Android\Sdk
PATH	%USERPROFILE%\AppData\Local\Android\Sdk\tools
PATH	%USERPROFILE%\AppData\Local\Android\Sdk\tools\bin
PATH	%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools

%USERPROFILE% は、　echo %USERPROFILE%で表示される値に置き換えます。

Android端末の実機にExpo Goアプリをインストールします。

コマンドプロンプトを起動し、次のように、作業用フォルダでプロジェクトの初期化を実行します。

コマンドプロンプト.cmd

mkdir c:\workExpo
cd c:\workExpo
expo init hello

「blank」テンプレートを選択したままで、Enterキーを押下し、続行します。

コマンドプロンプトを起動し、次のように、プロジェクトのフォルダで、Expo開発ツールを開始します。

コマンドプロンプト.cmd

expo start c:\workExpo\hello

コマンドプロンプト画面で、aキーを押下するとAndroidエミュレーターが起動し、開発中のアプリが実行されます。

Android実機でExpo goアプリを開き、QRコードをスキャンします。
もし、Android実機から開発用PCへネットワーク接続できない場合は、接続モード(Connection)をTunnelにし、再度、QRコードをスキャンします。

インターネット経由で、開発中のアプリが実行されます。

例えば、C:\workExpo\hello\App.jsをエディタで開き、編集後に保存すると、自動的に開発アプリがリロードされ、最新の状態で開発アプリが実行されます。

Windows10上に、Expoの開発環境を構築し、次のとおり、アプリ開発を試してみました。