【入門】はじめての React Native

この記事は、アプリケーションフレームワーク「React Native」の入門チュートリアルです。

開発環境の構築方法、および Hello World アプリケーションを iOS/Android エミュレータで起動する方法を解説します。

React Native とは

React Native は Facebook 社が開発しているオープンソースのアプリケーションフレームワークです。

クロスプラットフォームに対応しており、ワンソースで複数のプラットフォーム（iOS、Android、UWP、Web）に対応したアプリケーションを開発することができます。

Web フロントエンドのフレームワークである React をベースに開発されており、Javascript、JSX、CSS を使って開発します。

動作環境

• Mac OS X 10.14.6
• React Native 0.6.1
• Xcode 11.2
• Android Studio 3.5.1

はじめに

React Native には、次の２つの開発ツールが用意されています。

• React Native CLI（通常の開発ツール）
• Expo CLI（React Native の開発支援サービスである「Expo」を使用するための開発ツール）

Expo を利用すると、アプリストアの審査を通すことなくアプリを配信することができ、Web アプリのようにスムーズに開発することができます。

ただし、Expo は少し分かりづらい部分がありますので、最初は「React Native CLI」を使って開発することをおすすめします。

環境構築（React Native CLI）

「React Native CLI」を使った開発環境の構築します。

Homebrew を使って、Node と Watchman をインストールします。

$ brew install node
$ brew install watchman

Xcode を Mac App Store からインストールします。
Xcode を開くと、利用許諾（ライセンス同意契約）が表示されますので、「Agree（同意）」ボタンを押してください。

CocoaPods をインストールします。

$ sudo gem install cocoapods

Hello World アプリケーションの作成

iOS シミュレータを起動します。

$ open -a Simulator

React Native アプリケーションを作成し、iOS で起動します。
※「AwesomeProject」は任意のプロジェクト名を指定してください。

$ npx react-native init AwesomeProject
$ cd AwesomeProject
$ npx react-native run-ios

次のような React Native アプリケーションが起動します。

それでは、App.js をテキストエディタで開いて、次のコードを入力して保存します。

App.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

うまくいけば、iOS シミュレータ上で次のような画面が表示されます。

Android エミュレータで実行

次の URL から Android Studio をダウンロード後、インストールします。

Android Studio
https://developer.android.com/studio

React Native アプリケーションを Android エミュレータで動作させるには、ADV（Android Virtual Device）をインストールする必要があります。
メニューの「Tools」 > 「AVD Manager」を開いて、任意の Android デバイス（ここでは「Pixel 2 API 29」）を追加してください。

「Actions」の「▶️（起動ボタン）」を押して、Android エミュレータを起動します。

Android SDK を PATH に追加するために、~/.bash_profile を開いて、次の記述を追加してください。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

~/.bash_profile の設定を反映します。

$ source ~/.bash_profile

React Native アプリケーションを Android で起動します。

$ npx react-native run-android

うまくいけば、Android エミュレータ上で次のような画面が表示されます。

環境構築（Expo CLI）

「Expo CLI」を使った開発環境の構築します。

Expo CLI をインストールします。

$ npm install -g expo-cli

React Native アプリケーションを作成します。
※「ExpoAwesomeProject」は任意のプロジェクト名を指定してください。

「expo init」コマンドを実行すると、いくつか質問されます。

・使用するテンプレートを選択します。
ここでは一番シンプルな「blank」を選択します。

$ expo init ExpoAwesomeProject
? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration 

・アプリケーション名を入力します。
ここでは「ExpoAwsome」と入力します。

$ expo init ExpoAwesomeProject
? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 100% completed
 {
   "expo": {
     "name": "ExpoAwsome",
     "slug": "ExpoAwesomeProject"
   }
 }

・パッケージ管理に Yarn を使用するかどうかを指定します。
ここでは「n」を入力して、既存の npm を使用します。

$ expo init ExpoAwesomeProject
? Choose a template: expo-template-blank
✔ Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed
? Yarn v1.19.1 found. Use Yarn to install dependencies? (Y/n) n

プロジェクトフォルダに移動して、React Native アプリケーションを起動します。

cd ExpoAwesomeProject
npm start

コマンドプロンプトに以下が表示されたら、「i」を入力し、iOS シミュレータを起動します。
※Android エミュレータを起動する場合は、「a」を入力します。

  To run the app with live reloading, choose one of:
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email.
  • Press s to sign in and enable more options.

 Expo  Press ? to show a list of all available commands.

「Got it」ボタンを押すと、React Native アプリケーションが起動します。

さいごに

React Native は、Google 社の開発した Flutter と並んで、今もっとも人気にあるクロスプラットフォームフレームワークです。

※Flutter については、別記事「【入門】はじめての Flutter」を参照してください。

React Native は Web 技術をベースとしているため、Web 開発者が今までの経験を活かしてネイティブアプリを開発することができます。

もっと React Native を学びたいという方は、以下のサイトを参照してください。

• React Native 公式サイト
• React Native チュートリアル（Learn the Basics）