Expo環境構築

# はじめに
本記事ではExpoのテスト用プロジェクトを作成し、Expoをエミュレーターや実機で動かす方法を解説します。
作業前提として、AndroidエミュレーターやiOSシミュレータの設定が完了している前提で解説します。

# 1. Expoの環境構築

# 1. Expoのテスト用プロジェクトを作成
コマンドプロンプトやターミナルで以下のコマンドを実行します。

```BASH:コマンド
$ exp init TestProject
```
次にコンソール上でどのテンプレートを利用するか確認されるので、最初に選択されている「blank」を選択し、Enterを押します。
<img width="955" alt="スクリーンショット 2018-10-07 2.47.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/5d3381e5-4769-fd2c-b3a8-3bce262806f8.png">
すると、TestProjectディレクトリにExpoで必要なファイル一式が作製されます。

```BASH:コマンド
$ ls TestProject
App.js		app.json	assets		node_modules	package.json
```
# 2. Expoの起動
次にexpoへログインします。

```BASH:コマンド
$ exp login
```
コマンドライン上でユーザー名/パスワードが聞かれるので、入力してください。
「Success」と表示されたらログイン成功です。

そして、プロジェクトのディレクトリへ移動し、expo(開発サーバ)を起動します。

```BASH:コマンド
$ cd TestProject
$ exp start
```
# 3. Androidエミュレータでの確認
Android StudioからAndroidエミュレーターを起動し、以下のコマンドを実行する。
exp androidコマンドは、Androidエミュレーター内にExpoクライアントのインストールを行い、Expoクライアントは開発サーバに接続します。

```BASH:コマンド
$ cd TestProject
$ exp android
```

この時、Androidエミュレーター内でExpoクライアントが自動的に起動し、パーミッションを設定することが求められますので、「OK」を押し、パーミッションを有効にします。
<img width="392" alt="スクリーンショット 2018-10-07 3.24.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/4088afb0-c5f6-d01c-c281-3aed37bbe030.png">
<img width="392" alt="スクリーンショット 2018-10-07 3.27.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/794fdb02-3713-e3ee-6aba-682ed8a6c111.png">
「戻る」ボタンを押し、以下のような画面が表示されたら、
Androidエミュレータの確認は完了です。
<img width="392" alt="スクリーンショット 2018-10-07 3.31.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/b3544087-dc24-1689-5f7b-4966347c6f7f.png">

# 4. iOSシミュレータでの確認
iOSシミュレータの起動は、xcodeを開かずに行うことができます。
プロジェクトのディレクトリ内で、次のコマンドを実行します。

```BASH:コマンド
$ cd TestProject
$ exp ios
```

ここでしばらく待つと、iOSシミュレーター内にExpoクライアントが自動的にインストールされ、Expoクライアントが自動的に読み込みを行います。
しばらくすると、以下のような画面が表示され、iOSシミュレーターでの確認は完了です。
<img width="248" alt="スクリーンショット 2018-10-07 3.52.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/6e9f1730-8ece-0758-e7d2-74253af8845f.png">

# 5. Androidの実機での確認
Google Playから「Expo」で検索して、Expoアプリをインストールします。
インストールしたら、exp startを実行した後に表示されるQRコードをスキャンするとアプリのロードが開始されます。
<img width="1094" alt="スクリーンショット 2018-10-07 3.01.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/298750/4931c7e2-58c1-b9b3-6180-99a32d46dfc8.png">

上記Androidのエミュレーターと同じ画面が表示されればOKです。

以下のような画面が表示され、エラーとなった場合は同じローカルネットワークに接続されていないと考えられます。

![Screenshot_20181007-042935.jpg](https://qiita-image-store.s3.amazonaws.com/0/298750/e688782e-0393-45a9-ef0f-7e028bb2141f.jpeg)

その場合は、以下のコマンドでexpo(開発サーバ)を起動し、再度試してみてください。

```BASH:コマンド
$ cd TestProject
$ exp start --tunnel
```
これでもダメな場合は、セキュリティソフトがポート：19001をブロックしている可能性がありますので、セキュリティソフトの設定の見直しをしてみてください。

# 6. iOSの実機での確認
iOSのExpoアプリは、Androidと違ってQRコードで読み込む機能自体が廃止されています。そのため、exp sendというコマンドを使ってexpのURLを送信します。exp sendの引数はiOS端末のメールアドレスか電話番号となります。電話番号で送る場合は、必ず+81と日本の国番号をつけてください。

```BASH:コマンド
$ cd TestProject
$ exp send -s +81-90-xxxx-xxxx
```

SMSで受信すると、exp://から始まるURLが表示されるので、そのリンクをタップします。
すると、Expoアプリが起動します。

以上でExpoの環境構築、エミュレーターでの動確は完了です。

# さいごに
2020年から個人ブログはじめました！

フリーランスエンジニアになって得た知識と経験をもとに、フリーランスエンジニアに関する情報をはじめ、IT技術情報や業界情報、エンジニアライフハック等のコンテンツを配信していく予定です。

まだまだ記事数は少ないのですが、週単位で更新してますので、もしご興味ございましたら、みていただけると嬉しいです。

https://yacchi-engineer.com/

さいごまでお読みいただき、ありがとうございました。