create-react-native-appとは

React Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブアプリの開発ができるということで、実際にReact Nativeでのネイティブアプリの開発を試み始めた開発者の方も多くいることでしょう。ただ、React Nativeの開発環境構築（特にAndroid）に苦戦した方が多くいたということで、このcreate-react-native-appが開発されたということです。Reactのcreate-react-appに影響を受け、Expo（後ほど説明します）とFacebookがコラボレートして作られたツールということです。

• react-community/create-react-native-app

create-react-native-appを使用すると、XcodeやAndroid Studioを使用する必要がなくなります。またiOSアプリをLinuxやWindowsでも開発できるようになります。create-react-native-appで作成したアプリはネイティブコードにコンパイルせずに、純粋なJavaScriptで書かれた状態で、Expoを通して実行されます。このような仕組みとなっているため大変使い勝手がよく画期的なツールとなっていますので、ぜひ使ってみてください。

以下は、create-react-native-appの公開時に書かれたReact Native Blogの記事です。こちらも併せてお読みください。

• Introducing Create React Native App – React Native Blog

create-react-native-appを使う

create-react-native-appのインストール

create-react-native-appはnpmのパッケージとして用意されています。お使いの環境にNode.jsがインストールされていれば、npm経由でcreate-react-native-appをインストールすることができます。create-react-native-appはnpmコマンドだけでなくyarnコマンドでもインストール可能です。

$ npm install -g create-react-native-app
  # or
$ yarn global add create-react-native-app

yarnコマンドでインストールする場合は、別途yarnをインストールしておく必要があります。

$ npm install -g yarn

$ yarn global add create-react-native-app

yarn global v0.15.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Installed create-react-native-app@0.0.3 with binaries:
      - create-react-native-app
✨  Done in 3.39s.

インストールが完了すると、お使いの環境で、create-react-native-appコマンドが使えるようになります。

React Nativeプロジェクトを新規作成する

create-react-native-appをインストールしたら、create-react-native-appコマンドで一発でReact Nativeアプリの開発環境を構築できるようになります。

React Nativeプロジェクトを作成したいディレクトリに移動し、create-react-native-appコマンドを叩きます。コマンドの後ろには「React Nativeプロジェクト名」を指定します。

$ create-react-native-app my-react-native-app

Creating a new React Native app in /Users/maechabin/Sites/Project/my-react-native-app.

Installing packages. This might take a couple minutes.
Installing react-native-scripts...

npm WARN deprecated node-uuid@1.4.7: use uuid module instead

> dtrace-provider@0.8.1 install /Users/maechabin/Sites/Project/my-react-native-app/node_modules/dtrace-provider
> node scripts/install.js


> ref@1.3.4 install /Users/maechabin/Sites/Project/my-react-native-app/node_modules/ref
> node-gyp rebuild

  CXX(target) Release/obj.target/binding/src/binding.o
  SOLINK_MODULE(target) Release/binding.node

> ffi@2.2.0 install /Users/maechabin/Sites/Project/my-react-native-app/node_modules/ffi
> node-gyp rebuild

....
....
....

Success! Created my-react-native-app at /Users/maechabin/Sites/Project/my-react-native-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server so you can open your app in the Expo
    app on your phone.

  npm run ios
    (Mac only, requires Xcode)
    Starts the development server and loads your app in an iOS simulator.

  npm run android
    (Requires Android build tools)
    Starts the development server and loads your app on a connected Android
    device or emulator.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd /Users/maechabin/Sites/Project/my-react-native-app
  npm start

Happy hacking!

create-react-native-appコマンドを叩くと、環境構築が始まります。しばらく時間がかかります。

ターミナル画面に「Happy hacking!」が表示されたら、開発環境の構築は完了です。cdコマンドで作成したプロジェクト内に移動します。

$ cd my-react-native-app/

Hello World – React Nativeアプリを立ち上げる

create-react-native-appでReact Nativeアプリの開発環境を構築すると、もうすでにサンプルアプリが作られた状態となっています。このサンプルアプリを実際に立ち上げてみましょう。

create-react-native-appではいくつかのnpmコマンドが用意されています。React Nativeアプリを立ち上げるにはnpm startコマンドを叩きます。

$ npm start

> my-react-native-app@0.1.0 start /Users/maechabin/Sites/Project/my-react-native-app
> react-native-scripts start

Starting packager...
Packager started!

To view your app with live reloading, point the Expo app to this QR code.
You'll find the QR scanner on the Projects tab of the app, under the '+' menu.



Or enter this address in the Expo app's search bar:

  exp://10.0.1.10:19000

Your phone will need to be on the same local network as this computer.

For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

これでReact Nativeアプリが立ち上がりました。立ち上がったReact Nativeアプリを確認するには、iOS、Androidの両方に対応した「Expo」というアプリを使用します。この「Expo」のおかげで、実機での確認がとても簡単に行えるようになっています。さっそく「Expo」をインストールしてみてください。

• Expo Client on the App Store – iTunes – Apple
• Expo – Android Apps on Google Play

iOS、Androidアプリ「Expo」でReact Nativeアプリを確認する

さっそくExpoを使ったReact Nativeアプリの確認方法について説明します。

上記で説明したnpm startコマンドを叩くと、以下のようにターミナル上にQRコードが表示されます。

そうしたら、スマートフォンにインストールした「Expo」を起動し、アプリ内の「Scan QR Code」をタップして、ターミナルに表示されたQRコードを読み取ります。

または「Expo」の「Explore」タブをタップして、表示される検索バーに「exp://10.0.1.10:19000」を入力し、検索結果に表示されたプロジェクトをタップします。

問題なければ、「Expo」内にReact Nativeアプリが立ち上がり、内容を確認することができます。サンプルのアプリは以下のように2行のテキストが表示されるだけのものとなっています。

ちなみに、このExpoを使用する際は、スマートフォンと開発環境のあるパソコンは同じネットワーク上にある必要があります。また、このExpoの優れている点となりますが、ExpoでReact Nativeアプリを起動した状態でライヴリローディングが可能だということです。起動した状態で、App.jsのTextコンポーネント内のテキストを変更して、ファイルを保存してみてください。内容がExpoの方に即反映されるのがわかるかと思います。

create-react-native-appで用意されたnpmコマンドについて

「Expo」で確認するには、npm startコマンドを使用すると説明しました。create-react-native-appでは、その他にも使用できるコマンドが用意されています。以下に紹介します。

npm start

開発用サーバーを立ち上げ、開発中のアプリをスマートフォンにインストールした「Expo」で確認できるようにします。

npm run ios

開発用サーバーを立ち上げ、開発中のアプリをiOSシミュレーターで確認できるようにします。（このコマンドはMacのみ使用でき、かつXocdeを必要とします。）

npm run android

開発用サーバーを立ち上げ、開発中のアプリを接続したAndroid端末やエミュレーターでロードできるようにします。（Android用のビルドツールが必要となります。）

npm test

テストランナーを起動します。テストフレームワークはjestが使われています。

npm run eject

これは、Web用のcreate-react-appにも用意されている機能となりますが、自分で設定ファイルをいじりたくなった際に使用するカスタムセットアップ用のコマンドです。npm run ejectを叩くと、create-react-native-app自体が削除されますが、すべての設定ファイルと依存関係が現在のプロジェクトにコピーされるので、自由に設定ファイルをいじることが可能になります。いわゆるreact-native initコマンドで構築した環境と同じものとなり、XcodeやAndroid Studio環境を設定する必要があります。なお、このコマンドを実行すると元に戻せなくなるのでご注意ください。

スタンドアローン版へのビルドについて

React Nativeで開発したNativeアプリを配布するために、最終的にはスタンドアローン版にビルドする必要があります。スタンドアローン版にすることで、iOS版であればApp Store、Android版であればGoogle Play Storeに登録して多くの利用者に使ってもらえるようになります。

今回紹介した「Expo」には、関連ツールとして「exp」というnpmパッケージがあり、スタンドアローン版へのビルド機能が用意されています。こちらの使い方については、今回は省略しますが、興味のある方は以下のページでご確認ください。

• Building Standalone Apps | Expo v15.0.0 documentation

まとめ

create-react-native-appでReact Nativeアプリの開発環境がコマンド一発で構築できるようになり、さらにスマートフォンのアプリ「Expo」を使うと、簡単に実機での確認とライブリローディングが実現できます。これまでなかなか手が出せなかったReact Nativeアプリの開発もこのツールがあれば、なんとかやってみようと思わせてくれますね。そういう意味で、このcreate-react-native-appやExpoは、Nativeアプリの開発を大きく変える画期的なツールとなるのではないでしょうか。

自分もこれまでReact Nativeには難しいイメージがありましたが、今回のツールの登場によりReact NativeでNativeアプリを作ってみようという気になりました。ただ、実際にサンプルを作ってみたところ、Reactの作法でNativeアプリが作れるという謳い文句はその通りなのですが、やはりReact Native特有の覚えなくてはいけない事項も多々あり、それはそれで学習コストが高いかなと思いました。とにかくReact NativeのコンポーネントとAPIをひたすら覚える必要がありますね。

React Nativeのドキュメントは以下となります。まずはこの大量のドキュメントとの格闘が待っていますね。

• Getting Started – React Native

最後に自分がcreate-react-native-appで作ってみたサンプルを紹介しておきます。登録と削除のみの単純なToDoアプリとなります。

• maechabin/create-react-native-app-sample

ExpoのPlaygroundサービスのExpo Snack（Expo Sketch）にもアップしました。こちらだとオンライン上のシミュレータで確認可能です。

• React Native ToDO App Sample – Expo Snack