React Native アプリの開発で create-react-native-app を使うべきかどうか

React Native を試しています。

チュートリアルをやっていて「create-react-native-app を使うべきかどうか」が気になったので調べてみました。

create-react-native-app を使う方法

create-react-native-app は React Native のプロジェクトを作成するツールで、公式ドキュメントの Getting Started の「Quick Start」タブで説明されています。

特徴的なのは、作成したアプリを端末で実行する際に Expo というアプリを使うことです。

サードパーティのアプリなので最初は怪しそうに思えたのですが、公式に推奨されているので問題ないと判断しました。

create-react-native-app を使う場合は以下のような制限があります:

  • ネイティブコードのモジュールは使用できない。
  • アプリファイル(AndroidならAPKファイル)を生成できない。
  • ローカルネットワークでしか実行できない。

上記のことを可能にする場合は、「eject」する必要があります。

eject すると、そのままでは Expo 上で動作させることができなくなり、通常は後述の「react-native-cli を使う方法」で開発を続けることになります。(Expoのツールで開発する方法もあるようです。)

また、一度 eject すると、前の状態に戻すことはできません。

アプリをリリースする前に一度は eject する必要があるわけですが、eject した後の開発環境がどうなるのか気になるところです。

Ref. create-react-native-app/EJECTING.md

react-native-cli を使う方法

react-native-cli も React Native のプロジェクトを作成するツールで、公式ドキュメントの Getting Started の「Building Projects with Native Code」タブで説明されています。

特徴的なのは、作成したアプリを端末で実行するためには AndroidiOSのネイティブアプリの生成が必要なことです。

ネイティブアプリの生成と実行はコマンド一発(react-native run-android / run-ios)でできますが、ネイティブアプリをビルドする環境の設定が必要になります。

ただし、「create-react-native-app を使う方法」と同様にホットリロードはサポートされており、JSファイルを編集したら自動的に端末側に反映させることができます。

(端末をシェイクするとメニューが現れるので「Enable Hot Reloading」を選択します。)

両者の使い分け

最初のセットアップが済めば、開発環境としてはどちらも大差ないように思えます。

ただし、create-react-native-app ではJSの環境だけで開発できるので、そこがメリットになります。

なので、開発初期は create-react-native-app で始め、ネイティブコードでの実装やネイティブコードを使ったライブラリが必要になったり、アプリファイルを生成する必要が出てきたら、eject するということでよいと思います。

また、eject するのを避けて先延ばしにする必要もありません。

ただし、ネイティブでの開発経験がない場合は環境構築で苦労する可能性もあるので、できる限り create-react-native-app で進めるという選択肢もあると思います。