React Nativeを使ったスマホアプリの開発環境をExpo.ioというサービスを用い爆速で整えましょう。

手元のiPhoneがなかったので、本記事の実機検証はAndroid(Pixel4)を用いていますが、シミュレータ/エミュレータを導入すればiOSもAndroidも開発マシン上で検証できます。

Expo.ioのアカウントを作成する

アカウントを作成しておきましょう。
Expo.io

上記サイトでアカウントを作成します。

ここで登録したユーザーの認証情報は実機検証の際にも用いるので、もしパスワードをブラウザの自動生成で作成した場合は実機と共有するか、覚えておいてください。

作成したら、実機側にExpoアプリをインストールします。

Android版Expoアプリ
 iOS版Expoアプリ

インストールが完了したら、アプリ側でも同じ認証情報でログインしておいてください。

開発マシン側の環境を整える

Expoはnpmでインストールするので、最新バージョンかどうかを確認しましょう。

$ npm -v
$ node -v

最新バージョンであれば、expo-cliをグローバルにインストールします

$ npm i -g expo-cli

少しだけ時間がかかります。

インストールが終われば、適当なディレクトリでinitします。

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

テンプレートを選べ、と言われるのでアローキーを使ってテンプレートを選択してください。

用途に合わせて選びますが、今回はblank (TypeScript)を選択します。

Enterで進めると、必要なパッケージがインストールされますので待ちましょう。

完了すると

To get started, you can type:

  cd MyProject
  npm start

と表示されます。指示通りcdしてstartしましょう。

$ cd MyProject
$ npm start

すぐにブラウザで新しいページが開きます。

一応ターミナル側でもQRが表示されますが、ブラウザに表示されているものと同じものです。

ブラウザ側のQRの上にあるメニューからiOS/Androidのシミュレータ/エミュレータが起動します。入っていなければ開発マシンに追加しろってエラーを吐かれます。

ここまで来たら、実機側のアプリからScan QR Codeを選び、スキャンします。

App.tsxを開いて開発を始めましょう！って表示されるので、開発マシンでApp.tsx(テンプレートでTypeScript選ばなければApp.js)を開き、コードを編集してみます。

App.tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello!! MyProject!</Text> 
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

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

編集し、保存すると実機側もリアルタイムで更新されます。ホットリロード機能が最初からついているのです。

これでReact Nativeを使ってアプリ開発を行う環境が整いました。