React Native Expoで作る3プラットフォーム対応のアプリケーションを作ろう：〜導入からHello worldまで〜

はじめに

今回はReact.jsを使って簡単にネイティブアプリケーションを作ることができるReact Native Expoと導入方法を紹介します。

実際に手を動かしながら、一緒に開発できる環境を整えましょう。

この記事の対象読者

ネイティブアプリケーション開発を行ってみたい人
新しい技術に興味がある人
React.jsに触ったことのある人

React.jsに関する他の記事はこちら

【React特集】アプリ開発オススメ記事まとめ！言語・FWの知識から開発・運用まで

動作環境

実際に以下の環境で動作していることが確認できています(2019/09/27)。

Mac OS 10.14.6
node v12.10.0
nom 6.11.3
expo-cli 3.1.2

React Native Expoとはなにか

React Native Expo(以下 Expo)とはReact Native上で完全にJavsScriptのみでAndoroid/iOS、Webのネイティブアプリケーション*1を開発・ビルドできる環境です。

Expo：The fastest way to build an app
With Expo tools, services, and React, you can build, deploy, and quickly iterate on native Android, iOS, and web apps from the same JavaScript codebase.

Expoを利用すると、React Nativeプロジェクトを１から立ち上げることなしに開発できます。

また、Expoにはデフォルトで実機確認用アプリと即座に確認できる環境やPush通知もOS関係なく使える等の便利な機能が付属しています。
Expo対応のライブラリしか使えないという制限はありますが、カメラやAudio、Videoなどの大体のアプリケーションで使えるようなものは一通り揃っています。

今回はExpoをセットアップし、実際にiOS、Android、Webの3プラットフォームでHello worldと表示するところまで行います。

*1：ネイティブアプリケーション
あるプラットフォーム(Andoroid, iOS, WIndows, MacOS等)において、そのプラットフォーム上で直接動作するアプリケーションのこと。
逆にWebアプリはブラウザ上で動作するため、ネイティブアプリケーションではない。
ネイティブアプリケーションの例
Microsoft Office：Excel, Word, PowerPoint
Instagram, Facebook, Twitter

Expoのセットアップ

nodeとnpmのインストール

Expoをセットアップするにはnodeとnpmをインストールする必要があります。
初めてインストールする方はMacをお使いの方は以下の記事を参考にしてください。

これらの記事は今後の行う可能性のあるバージョン管理のためにnodebrewも導入しています。
よくわからない方は直接nodeをインストールしてしまっても大丈夫です。
MacにNode.jsをインストール

以下のコマンドを打ってnodeやnpmのバージョンが表示されていればインストールされています。

$ node --version

$ npm --version

Expo CLIのインストールと設定

Expoを使って開発するにはExpo CLIをインストールする必要があります。
以下のコマンドでインストールしましょう。

$ npm install expo-cli --global

インストール終了後、バージョンが表示されればインストール成功です。

$ expo -V

プロジェクトの作成

それでは自分の好きな場所にディレクトリを作ってプロジェクトを立ち上げましょう。
以下のコマンドでプロジェクトを立ち上げることができます。

最初に開発するテンプレートを選べるのでblank (TypeScript)を選びましょう。

$ expo init
? 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

次にnameとslugを設定します。
基本的に好きな名前で構いませんが、ここではsampleで行います。

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

あとは自動でインストールされるので待ちましょう。
インストールが終わるとsampleというディレクトリができていると思います。
構造は以下のとおりです。

├── .expo-shared
│ └── assets.json 
├── .watchmanconfig 
├── App.tsx
├── app.json
├── assets
│ ├── icon.png
│ └── splash.png 
├── babel.config.js 
├── package-lock.json 
├── package.json 
└── tsconfig.json

プロジェクトの起動

それではさっそくプロジェクトを起動してみましょう。

$ cd sample
$ npm run start

すると次のような画面が表示されます。

問題なくプロジェクトが立ち上がっているでしょうか。
今立ち上がっているプロジェクトはAndroidやiOSで動作確認ができます。
確認するためには自分のスマートフォンに以下のアプリをインストールしてください。

自分のスマートフォンに合ったアプリを選択してください。
iOSクライアント
Androidクライアント

あとは画面に表示されているQRコードを読み込むと起動できます。

またWeb上で動作確認をしたい場合は、Control + Cで一度停止して次のコマンドで実行できます。

$ npm run web

Web, Android, iOSの3つをまとめて開発できることがご理解いただけたでしょうか。
ここから先は自分の好きなもので動作確認を行ってみてください。

Hello worldと表示させよう

それでは画面に文字を表示させてみましょう。

まずsrc/screens/Hello.tsxのファイルを作ります。

├── .expo-shared
│ └── assets.json 
├── .watchmanconfig 
├── App.tsx
├── app.json
├── assets
│ ├── icon.png
│ └── splash.png 
├── src
│ └── screens
│  └── Hello.tsx <- ここを追加する
├── babel.config.js 
├── package-lock.json 
├── package.json 
└── tsconfig.json

そしてHello.tsxに以下のように記述します。
必要に応じてコピー&ペーストしてください。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default function AboutScreen() {
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Hello world
            </Text>
        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 32,
        paddingHorizontal: 16,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center"
    },
    text: {
        fontSize: 100,
    }
});

この作った画面をApp.tsxに読み込んで表示させます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Hello from './src/screens/Hello'

export default function App() {
  return (
    <View style={styles.container}>
      <Hello />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

これで以下のように表示できていれば成功です。