Expo環境構築〜Android/iOS Emulatorを立ち上げるまで

スマホアプリの作成にあたって、ローカル環境での動作確認のために必要となるEmulatorの設定方法と、そのために必要となるExpo等の設定方法をまとめました。

Expoとは

Reactのための、framwork,platformであり、iOSとAndroidに同じJavaScript/TypeScriptのコードで、build, deployできるようにしてくれるとても便利なツールです。

これによって、iOSとAndroidのアプリを同じコードでアプリリリースができるという超効率化を図ることができるツールなんですね!

Expo install

まずはinstallする前に現在の最新versionを確認します。

以下コマンドを実行すると、つらつらといっぱい出てきます。

$ npm show expo-cli

expo-cli@5.0.3 | MIT | deps: 58 | versions: 408
The command-line tool for creating and publishing Expo apps
expo-cli/packages/expo-cli at main · expo/expo-cli
Tools for creating, running, and deploying universal Expo and React Native apps - expo-cli/packages/expo-cli at main · expo/expo-cli
keywords: expo, react-native bin: expo, expo-cli dist .tarball: https://registry.npmjs.org/expo-cli/-/expo-cli-5.0.3.tgz .shasum: 33da75542828162f076c89a35e49b0e5eb436013 .integrity: sha512-Wou4IPj/V2VggX6k818WnU9Gz/JMgPln02282tQAvmouvkYInXwLG8IFkRqHJdt25nJvz9xrN7RATzn4IFcMWg== .unpackedSize: 2.6 MB dependencies: @babel/runtime: 7.9.0 @expo/osascript: 2.0.31 bplist-parser: 0.2.0 @expo/apple-utils: 0.0.0-alpha.26 @expo/package-manager: 0.0.48 chalk: ^4.0.0 @expo/bunyan: 4.0.0 @expo/plist: 0.0.16 cli-table3: ^0.6.0 @expo/config-plugins: 4.0.14 @expo/prebuild-config: 3.0.14 command-exists: ^1.2.8 @expo/config: 6.0.14 @expo/spawn-async: 1.5.0 commander: 2.17.1 @expo/dev-server: 0.1.101 @expo/xcpretty: ^4.1.0 dateformat: 3.0.3 @expo/dev-tools: 0.13.138 better-opn: ^3.0.1 env-editor: ^0.4.1 @expo/json-file: 8.2.34 boxen: ^5.0.1 envinfo: ^7.8.1 (...and 34 more.) maintainers: - tsapeta <npm@tsapeta.com> - dsokal <dominiksokal@gmail.com> - wkozyra <wojciech.kozyra@swmansion.com> - bbarthec <bartlomiejbukowski.b@gmail.com> - ide <ide+npm@jameside.com> - lukmccall <kosmatylukasz@gmail.com> - kgc00 <kirbygc00@gmail.com> - fiber-god <datwheat@gmail.com> - brentvatne <brentvatne@gmail.com> - ccheever <ccheever@gmail.com> - evanbacon <baconbrix@gmail.com> - quinlanj <quinlanjung@gmail.com> - esamelson <eric@expo.io> - expoadmin <support@expo.io> - charliecruzan <charliecruzan@gmail.com> - tcdavis <tc@expo.io> - exponent <exponent.team@gmail.com> - wschurman <wschurman@gmail.com> - jkhales <jonathan@expo.io> - bycedric <me@bycedric.com> - jonsamp <sampjon@gmail.com> - princefleaswallow <mhampton@hey.com> - andyboythekid <andydevs123@gmail.com> - kudochien <ckchien@gmail.com> - fson <ville.immonen@iki.fi> - jesseruder <jesseruder@gmail.com> - terribleben <ben@exp.host> - nikki93 <s.nikhilesh@gmail.com> - sjchmiela <sjchmiela@gmail.com> dist-tags: latest: 5.0.3 next: 5.0.4 published 2 weeks ago by brentvatne <brentvatne@gmail.com>

見るべきところは一番最後だけで、latest は5.0.3となっていますので、最新がこちらであることが確認できます。

それではinstallしましょう!

-g と指定して、global installをします。

$ npm install -g expo-cli@5.0.3

installができているか確認しましょう。

$ expo --version
5.0.3

ちゃんとversionが返ってきたので、これでExpoのinstallは完了です!

Expoの会員登録

Expo
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

会員登録ができたら、terminalからloginします。

$ expo login

✔ Username/Email Address: … "Username"
✔ Password: … ***************

Success. You are now logged in as "Username".

UsernameまたはEmailと、Passwordを入力すると「success」と表示され、loginできたことがわかります。

スマホにもExpoをインストール

App Store または、Play Storeで「Expo Client」と検索すると出てくるのでそれをinstallします。

XcodeをinstallしてiOS Simulatorを起動

iPhoneのSimulatorを動かすにはXcodeが必要になるのでPCにXcodeをinstall

これでiphoneのSimulatorを使うことができるようになりました。

Simulatorをclickすると、こんなスマホの画面が出現します!!

Android用のEmulatorをdawnload

Android Studioというサイトを開きます。

Download Android Studio and SDK tools  |  Android Developers
Download the official Android IDE and developer tools to build apps for Android phones, tablets, wearables, TVs, and more.

こちらのサイトより、「Download Android Studio」からダウンロードします。

ダウンロードが完了したら、以下の Preference より、以下画面を開き、Amdroid SDK Locationのpathをコピーして、pathを通す設定をしていきます。

ここでコピーしたのをvimでファイルを開いて記述します。

$ vim ~/.zshrc

開かれたファイルに以下を記述し、環境変数を設定します。

記述位置はどこでも良いです。

export ANDROID_SDK_ROOT="Amdroid SDK Locationでコピーしたpath"
export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH
export PATH=$ANDROID_SDK_ROOT/emulator:$PATH

記述が完了したら、一度ターミナルを立ち上げ直します。

pathが設定できているか確認します。

$ echo $ANDROID_SDK_ROOT

ANDROID_SDK_ROOTに設定したpathが表示されるはずです。

続けて、以下を実行

$ echo $PATH

platform-tools と emulator に設定したpathが表示されるはずです。

最後に環境変数の設定ができているか確認のため、

Android Debug Bridge というもののversionを確認しましょう!

$ adb --version
Android Debug Bridge version 1.0.41
Version 31.0.3-7562133
Installed as /Users/XXXXX/Library/Android/sdk/platform-tools/adb

この画面が表示されればちゃんとできています。

Emulatorをinstall

More ActionからADV Managerを開きます。

「+ Create Virtual Device」をクリック

こちらで機種を選択しますが、Pixelが安定しているようですので、「Pixel 3」とします。

次にOSを選択します。

私はM1 macですので、M1 macで使用可能確認済の「Other Image」の中のAndroid 12.0(Google API)をDownloadします。

このDownloadには結構時間かかります。

Downloadができたら、こちらの再生ボタンを実行すると、Androidのスマホ画面を立ち上げることができました。

Emulatorをターミナルからコマンドラインで立ち上げる

有効になっているEmulatorのdeviceを確認します。

$ emulator -list-avds
Pixel_3a_API_32_arm64-v8a

確認したdevice名を使って、Emulatorを立ち上げます。

上記で表示されたdevice名をコピーして、@を付けて以下を実行すれば、起動できます。

$ emulator @Pixel_3a_API_32_arm64-v8a

この状態だと、google環境下以外にアクセスできていないので、コマンドに少し付け加えて実行します。

$ emulator @Pixel_3a_API_32_arm64-v8a -dns-server 8.8.8.8 

このようにして立ち上げることで、chrome検索ができるようになりました!

以上、読んでいただきありがとうございました。

コメント