プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

Expo CLI(旧create-react-native-app)を使ってnativeアプリ開発環境を時短構築

はじめに

Webアプリケーションを触っているなら気になるのがiOSアプリの開発、Androidアプリの開発。ネイティブアプリの作成は少しハードルが高く感じてしまいますが、Expo CLI(元はcreate-react-native-app)を使えば特定のIDEを用意せずに、クロスコンパイルが可能なアプリを簡単に作ることができるということなので、まずはやってみました。

※この記事ではwindows10で行っています。

react nativeの開発環境は大きく2つ、この記事で使用するExpo CLIとnative CLIがあります。前者はnativeコードが使えない(全てjs)等制限があるのだが、大抵のことはExpoで事足りるようなのと、初心者には圧倒的にこちらのほうが楽ということなのでExpo CLIを使っていきます。

Expo CLIを使えば、Windows上でAndroidのエミュレータを動かしての確認と、実機のiPhoneがあればiOSでの確認の両方ができます。

Windowsでの「iOS simulator」は使えないというのにご注意。Xcodeの機能が必要になるためです。

※参考にさせていただいた記事
https://itblo9.com/expo-io/

準備

Expo CLI( create-react-native-app)をインストールするために

まずは以下からnode.jsをインストール。
https://nodejs.org/ja/
react nativeのdocumentにはnode.jsのバージョンが10.0以上というように書いてあるので、 ダウンロードするのはLTS版のほうで問題ないでしょう。
インストール時の選択肢はすべてデフォルトのままでOKです。

node.jsのインストールと同時にnpmというパッケージマネージャーが使えるようになるので、コマンドラインから以下コマンドを実行します。

npm i -g expo-cli

ツールのインストールが完了すると以下の表示がでます。
これでグローバルな領域でexpoコマンドが使えるようになります。

react nativeのプロジェクトを作成する

プロジェクトを作成したいディレクトリに移動し、以下コマンドを叩きます。
プロジェクト名は任意で、以下ではsample-react-nativeという名称にしました。

expo init sample-react-native

Choose a templateとテンプレートの選択を聞かれます。
テンプレートを使用しないのでblankで進めました。

プロジェクトの作成が完了すると、以下のメッセージが表示されます

Your project is ready at C:\sample-react-native
To get started, you can type:
  cd sample-react-native
  npm start

エラー発生時

git bashを使うと以下のエラーが発生しました。
windowsのpower shellを使うと問題なく進められました。

Input is required, but Expo CLI is in non-interactive mode.
--template: argument is required in non-interactive mode. Valid choices are: 'blank', 'tabs', 'bare-minimum' or any custom template (name of npm package).

作成したアプリを立ち上げてみる

プロジェクトを作成したディレクトリで以下コマンドを叩きアプリを立ち上げます。

npm start

するとブラウザー上に開発ツールが立ち上がり、power shellにはQRコードが表示されます。

デバイスでアプリを表示する

この表示されているQRコードをiPhoneで読み込む前に、デバイス側に「expo client」というアプリをインストールする必要があります(無料)。
https://itunes.apple.com/jp/app/expo-client/id982107779?mt=8

expo clientをインストールした状態で、QRコードを読み込みます。
QRコードを読み込むと「expoで開く」と出てくるので、そちらをタップ。

デフォルトのままの状態のアプリケーションが立ち上がります。
これは作成したプロジェクトのApp.jsの中にあるメッセージが表示されているので、ここを書き換えると任意の文字列を表示できます。

操作端末のネットワーク設定

画像の箇所を以下のようにして接続できる環境を変更できます。

Tunnel…外部ネットワークから接続可能
lAN…LAN内から接続可能
Local…同一ネットワークからのみ接続可能

さいごに

まずはhello world的なところまで。
次はもう少し実装部分を見ていきます。