0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Expoを使ったAndroidアプリ開発環境の構築

Androidアプリ開発環境の構築

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

事前準備

expo.ioアカウントの登録

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

image.png

Expo開発ツールのインストール

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

Android Studioのインストールと設定

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

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

SDK Manager

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

  • Android SDK Platform 30
  • Sources for Android 30
  • Google APIs Intel x86 Atom_64 System Image

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

image.png

AVD Manager

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

  • Hardware - Pixel 4
  • System Image - x86_64, Android 11.0 (Google APIs)

image.png

Android SDK に関する環境変数の設定

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

変数
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%で表示される値に置き換えます。

Expo Go アプリのインストール

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

開発 - hello

プロジェクトの初期化

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

コマンドプロンプト.cmd
mkdir c:\workExpo
cd c:\workExpo
expo init hello

image.png

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

image.png

デバッグの開始

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

コマンドプロンプト.cmd
expo start c:\workExpo\hello

image.png

Androidエミュレーターでの実行

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

image.png

Android実機での実行

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

image.png

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

開発アプリのリロード

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

image.png

おわりに

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

  • プロジェクトの初期化
  • デバッグの開始
  • Androidエミュレーターでの実行
  • Android実機での実行
  • 開発アプリのリロード
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?