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

# Androidアプリ開発環境の構築

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

# 事前準備

## expo.ioアカウントの登録

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/09df8b8b-6b38-ff04-acf9-366e0c12750a.png)


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

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

- [node.js - https://nodejs.org/ja/](https://nodejs.org/ja/)  
 インストーラー: [node-v14.16.1-x64.msi](https://nodejs.org/dist/v14.16.1/node-v14.16.1-x64.msi)
- [Expo - https://expo.io/](https://expo.io/)  
  インストールコマンド: `npm install -global expo-cli`

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

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

- [Android Studio - https://developer.android.com/studio?hl=ja](https://developer.android.com/studio?hl=ja)  
  インストーラー: [android-studio-ide-202.7322048-windows.exe](https://redirector.gvt1.com/edgedl/android/studio/install/4.2.0.24/android-studio-ide-202.7322048-windows.exe)

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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/3415b847-2c03-104a-977c-f0213d2c410d.png)


## AVD Manager

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/b460aad3-259a-2a83-2cd5-be0064528d31.png)

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

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

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

Android端末の実機に[`Expo Go`アプリ](https://play.google.com/store/apps/details?id=host.exp.exponent)をインストールします。

https://play.google.com/store/apps/details?id=host.exp.exponent

# 開発 - hello

## プロジェクトの初期化

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/4d75cd1e-a964-5680-9461-9d9df2feea6b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/6d2150b9-11b0-01a7-0b7f-5e5f6a3519a0.png)


## デバッグの開始

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/5c7e8656-2dfb-f15d-d38c-0ba619a02be3.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/f3e2c9c3-d664-8b73-d67f-9c9d9524c310.png)


## Android実機での実行

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/93bb89de-47c1-1eb8-792d-52e3779b48ee.png)

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


## 開発アプリのリロード

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/02dd91e0-f8df-c216-fed3-5dd4bf063497.png)

# おわりに

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

- プロジェクトの初期化
- デバッグの開始
- Androidエミュレーターでの実行
- Android実機での実行
- 開発アプリのリロード