Help us understand the problem. What is going on with this article?

Expoのアカウントを作ってReact Nativeの開発環境を整える

More than 1 year has passed since last update.

この記事は、「【連載】初めてのReact Native + Expo開発環境構築入門」の子記事です。環境などの条件は、親記事をご覧ください。


 React Native を開発するにあたって、モジュールのバージョン管理やらデバッグ環境準備やら公開作業やらから解放されたい時には、Expoが便利です。今回は、Expoを使う前に必要な準備を整えていきます。Windows 10で実施しますが、MacやLinuxでも基本は同じです。

アカウント作成

 Expoを使うには、アカウントを作成する必要があります。

まず、Expo.ioを開いて、「Create an account」をクリックします。
image.png

次に、Email、希望するユーザーID、パスワード2回を入れて、「Create your account」をクリック。
image.png

こんな感じになったらOKです。
image.png

Projectsタブの中は空っぽですが、プロジェクトを追加するようなボタンはここにはありません。その代わりに「Learn how to get started」というリンクがありますね。このリンク先の説明に従って、これから開発するプロジェクトを作ることになりますが、ここではそのうちの不要ないくつかをスキップしながら進めます。

 少し待ったらExpoからEmailの確認が届くので、Email本文内のリンクをクリックして確認を済ませてください。

Node.js を準備する

 Expoを使った開発を行うには、まず自分のローカルPCにNode.jsをインストールする必要があります。Node.jsのバージョンは最新を使え、と書いてありますので、まだNode.jsをローカルPCにインストールしてない場合はNode.jsのサイトからLTS版をインストールしましょう。
image.png

Expo-CLI をインストールする

 では、Node.jsのインストールで一緒にインストールされたnpmを使って、Expo-CLI(Expoのプロジェクトを作ったりパブリッシュしたりするためのコマンドライン機能)をローカルPCにインストールしましょう。
 PowerShellを立ち上げて、
image.png

 以下のコマンドを実行します。

npm install expo-cli --global

 WARNはいくつかでますが、ERRORが出てなければ問題ないはずです。

Expoプロジェクトを格納するフォルダを作る

 今後たくさんのExpoプロジェクトを作ることになるので、プロジェクト用フォルダを作っておきましょう。例えば C:\ExpoProjects など。PowerShellで、以下のようにします。

> cd /
> mkdir ExpoProjects

Expoプロジェクトを作成する

 それではテストで1つ、HelloWorldプロジェクトを作りましょう。PowerShellで先ほど作ったプロジェクト用フォルダに入り、プロジェクトを作ります。

> cd /ExpoProjects
> expo init hello-world

 新規プロジェクト作成では、テンプレートが選択できます。ここでは blank を選びます(Enterキー)。
image.png

 また、プロジェクトの表示名を聞かれるので、キーボードで入力してEnterキーで確定します。ここでは「Hello World!」
image.png

 またもやWARNはいくつかでますが、ERRORが出てなければ問題ないはずです。
 では、Hello Worldプロジェクトを実行してみましょう。

> cd hello-world
> expo start

 ファイアーウォールの警告が出た場合は、通信を許可してください。
 うまくいったら以下のようにブラウザが開いて、QRコードが表示されます。

image.png

Expo Clientアプリで実行を確認

 実行結果の確認は、iPhoneまたはAndroidの実機にExpo Clientというアプリをインストールして、そのアプリでQRコードを読むことで実施します。(今回はiPhoneで試します)
 image.png

 手元のスマホにExpo Clientをインストールし、自分のExpoアカウントでログインしたのち、カメラアプリから先ほど表示したQRコードを読み込んでみてください。

Expo Clientがうまくいかない場合

 Expoは、ローカルPC上で expo start することで、Expoサーバーとして動作します。モバイル(iPhoneやAndroid)上のExpo Clientは、そのサーバーにプロジェクトのアプリを取得しに行って、取得が終わったら実行することになります。つまり、モバイルとローカルPCが直接通信できる状態になければExpo Clientが動作しないことになります。

 うまくいかない場合、以下を確認しましょう。

  • ローカルPCのファイアーウォールで19000や19001のポートが拒否されていないか。
  • ローカルPCの参加するサブネットと、モバイルの参加するサブネットが同じか。
  • ローカルネットワーク上で端末同士の通信が許可されているか。
  • 仮想PC上で expo start したなら、仮想PCとモバイルと同じサブネットのIPアドレスに見えているか。

 ほかに、初回ビルドが遅すぎてClient側が待てなくてタイムアウトすることもあります。。。
 いろいろ試してダメな場合は、ConnectionでTunnelを選んでやり直してみてください。

初回画面

 うまくいくと、Expo Clientの初期画面が表示されます。

image.png

 上に表示されているのが初回だけ表示される内容で、意訳すると「デバイスを振るとこのメニューに戻れるからねー」です。Got itでとじましょう。閉じた後に実際の実行結果が表示されます。
image.png

 真っ白な画面に、「App.jsを開けて開発を始めよう!」と出るだけですが、このメッセージはReactのコードから出力されています!簡単!

hitotch
お仕事や協力開発、越境相談など大歓迎。 松下電器産業株式会社(現パナソニック)でレッツノートを設計、ホイールパッドなどを発明。2007年ニューヨークにて独立し、主に在米日系企業のシステム開発を請け負うかたわら、暇を見つけては新技術に触れてニタニタしています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした