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

はじめに

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

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

この記事の対象読者

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

目次

動作環境

実際に以下の環境で動作していることが確認できています(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プロジェクトを1から立ち上げることなしに開発できます。

また、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

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

react-native-project

問題なくプロジェクトが立ち上がっているでしょうか。
今立ち上がっているプロジェクトは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',
  },
});

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

helloworld

まとめ

今回はReact Native Expoを導入し、Hello Worldと表示するところまで行いました。
人によっては物足りないと感じた人もいると思います。

Expoでは最初に紹介したようにスマホのカメラなどを使った機能を簡単に追加することができます。
興味がある方はぜひこれを機にさらに勉強してみてください。

React.jsに関する他の記事を見る↓↓


おすすめ記事