【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす

React Nativeとは？

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。

言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

今回はGetting Startedにあるサンプルアプリをビルドして動かすところまでやってみました。

検証環境

以下の環境で試しました。

• macOS High Sierra 10.13.2
• Node.js 9.8.0
• yarn 1.7.0
• React 16.3.1
• React Native 0.55.2
• Xcode 9.0

環境構築

まずは create-react-native-app　をインストールします。yarn を使っている場合は以下のコマンドでインストールします。

$ yarn global add create-react-native-app

なお、npmの場合は以下のようになります。この辺はお好みで。

$ npm install -g create-react-native-app

開発モードで起動するためには watchman というツールも必要なので Homebrew を使ってインストールします。

$ brew install watchman

以上で環境構築は終わりです。

サンプルプロジェクトの新規作成

サンプルプロジェクトとして AwesomeProject を作ります。

$ create-react-native-app AwesomeProject

処理が完了すると AwesomeProject ディレクトリとソースコードファイルが生成されます。これだけで、アプリをビルドするための環境が整います。

サンプルアプリのビルドと起動

サンプルアプリをビルドしてみましょう。

$ cd AwesomeProject
$ yarn start

上記は AwesomeProject ディレクトリで開発用のビルドを実行しています。以下のようなログが流れます。

yarn run v1.7.0
$ react-native-scripts start
22:19:03: Starting packager...
Packager started!

【ここにQRコードが表示される】

Your app is now running at URL: exp://192.168.10.107:19000

View your app with live reloading:

  Android device:
    -> Point the Expo app to the QR code above.
       (You'll find the QR scanner on the Projects tab of the app.)
  iOS device:
    -> Press s to email/text the app URL to your phone.
  Emulator:
    -> Press a (Android) or i (iOS) to start an emulator.

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.

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: development)

試したいOSに合わせてコマンドを入力します。Androidエミュレーターで試す場合は a を、iOSエミュレーター（シミュレーター）で試す場合は i を押します。Expoアプリというものの中でアプリが起動します。今回はiOSシミュレータで試してみました。

実機で動かしたい場合は表示されているQRコードを読むだけで良いようです。

フロントエンドエンジニアも、Reactでモバイルアプリ開発を始めよう！

今回は実際のソースコードまではまだ手を付けていませんが、ほとんどWebアプリと変わらないソースコードになっていました。

React向けのライブラリも使えますし、ReactでWebアプリを作って来た人は、そのスキルを活かしながらモバイルアプリ開発を始められます。まずは試してみてはいかがでしょうか。

私も遅ばせながら、少しずつ遊んでいきたいと思います！