はじめに
本記事ではExpoのテスト用プロジェクトを作成し、Expoをエミュレーターや実機で動かす方法を解説します。
作業前提として、AndroidエミュレーターやiOSシミュレータの設定が完了している前提で解説します。
1. Expoの環境構築
1. Expoのテスト用プロジェクトを作成
コマンドプロンプトやターミナルで以下のコマンドを実行します。
$ exp init TestProject
次にコンソール上でどのテンプレートを利用するか確認されるので、最初に選択されている「blank」を選択し、Enterを押します。
すると、TestProjectディレクトリにExpoで必要なファイル一式が作製されます。
$ ls TestProject
App.js app.json assets node_modules package.json
2. Expoの起動
次にexpoへログインします。
$ exp login
コマンドライン上でユーザー名/パスワードが聞かれるので、入力してください。
「Success」と表示されたらログイン成功です。
そして、プロジェクトのディレクトリへ移動し、expo(開発サーバ)を起動します。
$ cd TestProject
$ exp start
3. Androidエミュレータでの確認
Android StudioからAndroidエミュレーターを起動し、以下のコマンドを実行する。
exp androidコマンドは、Androidエミュレーター内にExpoクライアントのインストールを行い、Expoクライアントは開発サーバに接続します。
$ cd TestProject
$ exp android
この時、Androidエミュレーター内でExpoクライアントが自動的に起動し、パーミッションを設定することが求められますので、「OK」を押し、パーミッションを有効にします。
「戻る」ボタンを押し、以下のような画面が表示されたら、
Androidエミュレータの確認は完了です。
4. iOSシミュレータでの確認
iOSシミュレータの起動は、xcodeを開かずに行うことができます。
プロジェクトのディレクトリ内で、次のコマンドを実行します。
$ cd TestProject
$ exp ios
ここでしばらく待つと、iOSシミュレーター内にExpoクライアントが自動的にインストールされ、Expoクライアントが自動的に読み込みを行います。
しばらくすると、以下のような画面が表示され、iOSシミュレーターでの確認は完了です。
5. Androidの実機での確認
Google Playから「Expo」で検索して、Expoアプリをインストールします。
インストールしたら、exp startを実行した後に表示されるQRコードをスキャンするとアプリのロードが開始されます。
上記Androidのエミュレーターと同じ画面が表示されればOKです。
以下のような画面が表示され、エラーとなった場合は同じローカルネットワークに接続されていないと考えられます。
その場合は、以下のコマンドでexpo(開発サーバ)を起動し、再度試してみてください。
$ cd TestProject
$ exp start --tunnel
これでもダメな場合は、セキュリティソフトがポート：19001をブロックしている可能性がありますので、セキュリティソフトの設定の見直しをしてみてください。
6. iOSの実機での確認
iOSのExpoアプリは、Androidと違ってQRコードで読み込む機能自体が廃止されています。そのため、exp sendというコマンドを使ってexpのURLを送信します。exp sendの引数はiOS端末のメールアドレスか電話番号となります。電話番号で送る場合は、必ず+81と日本の国番号をつけてください。
$ cd TestProject
$ exp send -s +81-90-xxxx-xxxx
SMSで受信すると、exp://から始まるURLが表示されるので、そのリンクをタップします。
すると、Expoアプリが起動します。
以上でExpoの環境構築、エミュレーターでの動確は完了です。
さいごに
2020年から個人ブログはじめました！
フリーランスエンジニアになって得た知識と経験をもとに、フリーランスエンジニアに関する情報をはじめ、IT技術情報や業界情報、エンジニアライフハック等のコンテンツを配信していく予定です。
まだまだ記事数は少ないのですが、週単位で更新してますので、もしご興味ございましたら、みていただけると嬉しいです。
さいごまでお読みいただき、ありがとうございました。