Zenn
📝

ゼロから始める React Native + Expo 入門

2020/11/13に公開
Android
iOS
React Native
Expo
tech

React Native とは

React を使って Android,iOS アプリを開発するためのツールです。
React Native は 開発者が JavaScript を書いて React Native を通すことで、ネイティブのコードで動作するという仕組みです。

Expo とは

Expo とは開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより web アプリケーションは開発体験に近づけたものになります。
開発時も実機に Expo クライアントと呼ばれるアプリをインストールして、簡単にローカル環境と繋いでスムーズに動作確認ができます。まるで web アプリケーションを開発しているかのような開発体験です。

所感

普段 web アプリケーションは React、 iOS アプリケーションは Swift で書いていた著者が、少し触ったところの感想としては、

開発イメージ.jpg

良いところ

  • Expo を使った開発体験がとってもスムーズ
  • コンポーネントのレイアウトが CSS のように書けるのが最高
  • 通信処理が JavaScript で書けるのが嬉しい
  • ネイティブアプリ開発で React Hooks や TypeScript 使えるの最高
  • Native Base という React Native 用 UI コンポーネント集が良い
  • 開発中のアプリのホットリロード最高
  • 今から Swift 書くぞという脳内のスイッチングコストがいらない
  • コードを Expo のクラウド上でビルドして ipa ファイルや apk ファイルがダウンロードできる（らしい）

疑問・心配ごと

  • Expo SDK の開発、React Native 本体への追従スピードは大丈夫？
    • iOS 14 のサポート、React Native(0.63) や React Native for Web(0.13) の最新版 に追従した Expo SDK 39 は 9/22 にリリース
  • iOS/Android の OS アップデートに伴う各種コンポーネントで起きる不具合対応
    • ネイティブ部分が遮蔽されているので、こればかりはやってみないと分からない
  • Expo のサーバダウンしたらどこまで影響でる?
    • 追々感じてみる
  • アプリを審査を通さずにアップデートできる OTA アップデートってどうなってるの？
    • Store からインストールされたときに ipa に同梱されている初版がインストールされる
    • 該当バージョンで OTA アップデートした回数分アプリの再起動が必要
    • 詳しくはこの記事が分かりやすい

プロジェクトに適用する場合

触った感触として、React Native + Expo をプロジェクトに適用する条件としては

  • プロトタイプ的に効率的にアプリケーション開発を進めたい
    • Expo,React Native なら開発スピードを優先しながら Android / iOS 開発が可能
  • デザインや機能仕様がコントロールできるアプリケーション開発である
    • Expo,React Native との技術的な制約とせめぎ合いが起きないような仕様
  • アプリケーション開発・保守できるメンバーが JS エンジニアしかいない
    • 開発自体は React 触れるならできるんじゃないかという印象、ネイティブ層で不具合が起きなければね（汗）

将来的にプロダクトの成長に伴ってネイティブコードへのアクセスがどうしても必要になるという場合は、Expo を eject して使うという方法もあるようです。

つまり Expo での高速開発の恩恵を受けつつプロダクト自体が成長したタイミングで、eject して運用。将来的にはネイティブアプリ運用に持っていくのもありなのかなと思います。（開発のスピード感が違うので一度味わうと、ネイティブに戻るのも腰が重くなりそうですが笑）

それでは前置きはこのくらいにして、 Expo を使ってアプリケーションを動かしてみましょう。

事前準備

Expo アカウントを登録

Expo Client をインストール

Expo クライアントを使うと実際に Expo で作ったアプリケーションを実機で確認することが簡単にできます。
お手元の iOS / Android の実機にインストールしてください。

Android
https://play.google.com/store/apps/details?id=host.exp.exponent

iOS
https://apps.apple.com/jp/app/expo-client/id982107779

ローカル開発環境をつくる

Expo CLI をインストール

  1. Expo CLI をインストールする

    npm install -g expo-cli

    expo --version
3.28.5

    インストール後に、バージョンが表示されれば OK です。

  2. expo init コマンドでプロジェクトの雛形を作成する

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

    workflow についての公式ドキュメントはこちらを参考ください。

    今回は Managed workflow + TypeScript でいきたいと思います。

    ✅ Your project is ready!

    と表示されれば、インストール完了です。

（補足） Managed workflow と Bare workflow の比較表


赤枠部分がポイントになると思います。

  • Expo らしい開発効率の恩恵を享受したい場合は Managed workflow を選択
  • ネイティブコードまで触る可能性がある場合は Bare workflow を選択

なのかなと思います。

早速、動かしてみる

yarn start

yarn start をすると、 package.json に記述されている、expo start コマンドが実行されます。

上記画像の Expo Developer Tools が立ち上がれば成功です。

Expo Developer Tools のポイント

  • 画面左下の QRコードを Expo Client の QR リーダーで読み込むと、開発途中のアプリケーションの動作確認ができます

  • 実機の Expo Client で Expo のアカウントにログインしておくと、 QR コード読み込まさなくても開発中のアプリケーションが一覧に同期されます

  • 開発環境に繋がらない場合は、CONNECTION を Tunnel に変更すると良いと思います

  • Xcode がインストールされていれば、Run on iOS simulator でシミュレーターが起動すると思います

それでは、準備ができましたので早速コードを書いてみましょう。

App.tsx を触ってみる

普段 React を使っている方であれば、ネイティブ感が全くないようなコードが入っていると思います。
container のスタイルの背景を白から黒に反転させて、Text に白色を当ててみましょう。

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
      <View style={styles.container}>
        <Text style={styles.text/* 追加 */}>Open up App.tsx to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000', // 追加 #fff -> #000
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { // 追加
    color: '#fff' // 追加
  } // 追加
});

このように変更すると、背景が黒になりましたね。

上記コードをエディターで保存すると分かると思いますが、ホットリロードが有効になっているため、実機やシミュレーターなどの結果が即時反映されます。

もちろん、 iOS / Android を二台手元に置いておけば同時に反映されます。

ネイティブコードで開発する場合は、都度コードをビルドしてアプリをインストールし直さないといけません。 React Native , Expo の場合はこのホットリロードがあるおかげで、 web アプリのように高速に開発できます。

コードを変更して動かすということが体験できましたので、次にディレクトリ構造を確認してみましょう。

初期ディレクトリを確認する

expo init で作られた初期ディレクトリやファイルも確認しておきましょう。

画面の各コンポーネントをどうするか

React Native には標準コンポーネントも用意されていますが、iOS アプリに Material っぽさを入れたくないので今のところ Native Base というコンポーネント集が良いかなと思っています。
ドキュメントも充実しています。

React を使ったことのある方であれば、このドキュメントを見ただけでアプリが作れそうな気がするのではないでしょうか。

iOS アプリの開発をする際に、テーブルUIの表示を行う UITableView や UICollectionView といった部分の実装に非常に時間がかかるので、この部分が簡単に実装できるだけでも感動しています。

まとめ

触り始めというところもあって、かもしれない・ようだ的なまとめになりますが、

  • React や JavaScript の知見を生かした状態でネイティブアプリケーション開発するには、 React Native + Expo という組み合わせは多いにありかもしれない
  • 今回触れなかった ipa ファイルや apk ファイルのビルドは こちら を参考にすると良いと思います
  • Expo の開発体験が超スムーズだった（単にまだハマっていないだけかもしれない）

この記事が気に入った方は、下のハートマークを押してもらえると嬉しいです。

Discussion