【React Native】Expoを利用した開発環境構築

はじめに

ReactNativeを利用したアプリケーション開発を行うために、環境構築を行いたいと思います。

Expoとは

ReactNative上で、JavaScriptのみでiOSやAndroid アプリを作る開発環境です。
アプリをQRコード経由で簡単に公開したり、共有したりすることができます。

Expoの導入

ExpoのGetStartedページを参考に進めていきます。

1. Fall in Love

実際に、Snackを利用して、確認してみましょう。

2. Download NodeJS

パソコンにNode.jsをインストールしていない場合は、Node.jsをインストールしましょう！

インストールページ

3. Get the command line tool

下記のコマンドでExpoのコマンドラインツールをインストールしましょう。

npm install expo-cli --global

インストールが完了したら、コマンドラインで利用できるかを確認しましょう。

expo --version
を実行し、バージョン情報が表示されれば、インストールが完了しています。

4.Create your first project

Expoを利用するために、アカウントの作成を行いましょう！
Expoのアカウント作成ページ

アカウントの作成が完了したら、ターミナル上でExpoにログインしておきます。

expo login
とターミナルで実行すると、ユーザーネームとパスワードを聞かれるので、入力します。

下記の内容が表示されたら、ログイン完了です。
Success. You are now logged in as ユーザー名.

下記のコマンドで初期のプロジェクトを作成します。

Expoプロジェクト作成コマンド

expo init myNewProject

Expoのプロジェクト作成は、対話形式で質問に回答しながら作成していく、方式なので、質問に答えていきます。

Expoプロジェクト作成時の質問

  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration 

**※選択項目の内容に関して**

◾️ Managed workflow
Expoのサポート下で簡単に開発できる
◾️ Bare workflow
Expoをほぼ利用せずに開発できる。
カスタマイズ性は高いが開発難易度は上がる

◾️ blank
blankは真っ白な画面でスタートする
◾️ tabs
画面の下にタブが表示された画面でスタートする。

今回は、blankを選択します。
時間が少々かかるので、少し待ちます。

プロジェクトの作成が完了したら、作成したプロジェクトのフォルダにコマンドで移動します。
cd myNewProject

そのフォルダで、下記のコマンドを実行します。
expo start

すると、Webブラウザが開き、QRコードが表示されると思います。
このQRを利用して、実機で動作を確認していきます。

5.Preview your project

iOSまたはAndroid端末にExpoのアプリをインストールします。
iOSはこちら ・ Androidはこちら

端末にインストールが完了した後に、アプリを利用してQRコードを読み取ることでテストできます。
※アプリを起動する端末は,実行しているパソコンと同じネットワーク内(WiFi)に接続してください。

初期の段階では、画面に「Open up App.js start working on your app!」と表示されていると思います。

上手く、起動しない場合はExpoを再起動すると上手く動作する可能性があります。

◾️ キャッシュをクリアして再起動する場合
expo start -c

シミュレータで動作させる場合

起動前に、iOS及びAndroidのシミュレーターをインストールしておく必要があります。

iOSの実機シミュレータを利用する場合は、Xcodeをインストールしてください。
Androidの実機シミュレータを利用する場合は、Android Studioをインストールしてください。

◾️ iOSシミュレータで確認する場合
Xcodeをインストールしているパソコンで、Expo起動時に表示される画面左のRun on iOS simulatorを選択します。

◾️ Androidシミュレータで確認する場合
Android Studioをインストールしているパソコンで、Androidシミュレーターを起動します。
その後、Expo起動時に表示される画面左のRun on Android device/emulatorを選択します。

6.Start coding!

上記で環境の構築は完了です。

ここから、先はapp.jsを変更し、自分のアプリを作成していきましょう！