【React Native】Expoで開発環境を構築し新規プロジェクトを作成する方法

React Native（リアクト・ネイティヴ）は、Meta（旧Facebook）が開発したオープンソースのモバイルアプリケーションフレームワーク。

そのReactNativeでは、アプリのビルド・デプロイ・更新などを簡単に行える環境で開発できる『Expo』というツールがあります。

今回は、そのExpoで開発環境を構築し、ReactNativeの新規プロジェクトを作成する方法となります。

今回の例では、Expoを利用するためにnpmパッケージの Expo CLIをインストールします。そのためNode.jsがインストールされている前提としています。

また、Node.jsは12以上でLTS（長期サポート）のバージョンが必要となります。

Node.jsをMacでインストールする方法については、以下のリンク先を参考にしてみてください。

【nodebrewコマンドまとめ】Homebrewでのインストール｜Node.jsのバージョン管理

まずは、以下のコマンドでグローバルのnpmにexpo-cliをインストールします。

npm install -g expo-cli

次にプロジェクトを作成するディレクトリに移動し、以下のコマンドで新規プロジェクトを作成します。

expo init SampleProject –template blank

例では、プロジェクトのディレクトリ名をSampleProjectとし、オプションでテンプレートをblankとしています。

作成したプロジェクト内にはpackage.jsonファイルがあり、開発環境のサーバーを起動するnpm-scriptsなどが準備されています。

開発環境のサーバーを起動するには、package.jsonファイルがあるディレクトリに移動して、以下のnpm-scriptのコマンドを実行します。

npm start

それにより、開発環境のローカルサーバーが立ち上がり、そのサーバーにブラウザでアクセスするとExpoのデベロッパーツール画面が表示されます。

Expoで開発しているアプリをモバイル端末で確認する方法は以下となります。

また、モバイル端末は、開発しているPC・Macと同じネットワークに接続する必要があります。

まずは、iOSまたはAndroidの端末に、以下のExpoクライアントアプリをインストールします。

ブラウザのExpoのデベロッパーツール画面や、上記npm-scriptを実行したシェルの画面には、QRコードが表示れていると思います。

そのQRコードを、Expoクライアントアプリをインストールした端末で読み込み、そのアプリでアクセスすることにより、開発しているアプリをモバイル端末で確認できます。

Expoでの開発の制限

Expoを利用した開発では、ネイティブコードのモジュールが利用できないなどの制約があります。そのため開発できるアプリには制限があります。

そのようなExpoの開発環境から、制約のないReactNativeの開発環境に移行する場合には、Expoのejectを実行する必要があります。

Expoのejectは以下のnpm-scriptのコマンドで実行でき、ネイティブコードをビルドできる開発環境に移行できます。

npm eject

また、一度ejectを行うとExpoを利用した開発環境に戻すことはできません。