最速でReact Native × Expoの環境構築〜動作確認をする

Featured image of the post

概要

React Nativeの開発を始めるときに必要な作業を簡潔にまとめる😊

対象読者
  • ささっとReact Nativeの開発環境を作りたい方

前提

React Nativeは、Expoというフレームワークを使って開発することが多い。

そのため今回の解説もExpoを使う前提で解説する。

💡
【Expoとは】

React Nativeの開発を手助けしてくれる機能が詰まったフレームワークのこと。

結論

✅動作確認までに必要な作業はたった3ステップだけ!

  1. 「Node.js」と「watchman」をインストールする。
  2. create-expo-appコマンドでプロジェクトを作る。
  3. 自分のスマホにExpo Goアプリをインストールして動作確認する。

①インストール

✅開発に必要なツールをインストールする。

Node.jsをインストール

React Native(Expo)の開発をするためにNode.jsが必要。

公式サイトからインストールするだけでOK!

watchmanをインストール(Linux、macOSユーザーのみ)

コードを変更したときに自動でシミュレータ等へ反映するために必要。

コマンドでインストールするだけでOK!

brew install watchman

②新規プロジェクトを作成

✅React Native × Expoのプロジェクトを作る。

プロジェクト新規作成

create-expo-appコマンドを実行するだけでプロジェクトが作れる!

npx create-expo-app プロジェクト名

③動作確認

✅自分のスマホで動作確認する。

準備
動作確認
  1. コマンドを実行
    npm run start

  2. Expo GoアプリでQRコードをスキャン
    Image in a image block

  3. 自分のスマホで動作確認できる!

    ※表示される画面はExpoのバージョンによって異なる。

    Image in a image block

💡
QRコードをスキャンするだけで実機で動作確認できる!

【補足】Expo Go以外で動作確認

動作確認の方法は他にもいくつかある

ここでは代表的な3つの確認方法を紹介する。

※前述のExpo Goよりも面倒。基本的にはExpo Goで確認すればOK。

【パターン1】iOSシミュレーターで確認
⚠️
Macのみ対応

  1. Xcodeをインストール(インストール済みなら飛ばしてOK)

    ※iOSシミュレーターを使うためにXcodeが必要。

    ※iOSシミュレーターなしでExpo Goで動作確認することも可能だが、ネイティブコードを使う場合はiOSシミュレーターが必要になる。

  2. コマンドを実行
    npm run ios

【パターン2】Androidエミュレーターで確認する
  1. Android Studioをインストール(インストール済みなら飛ばしてOK)

    ※Androidエミュレーターを使うためにAndroid Studioが必要。

    ※AndroidエミュレーターなしでExpo Goで動作確認することも可能だが、ネイティブコードを使う場合はAndroidエミュレーターが必要になる。

  2. コマンドを実行
    npm run android

【パターン3】Web上で確認する
  1. Web版の確認に必要なパッケージをインストールする。
    npx expo install react-native-web react-dom @expo/metro-runtime

  2. コマンドを実行
    npm run start

  3. URLをクリック
    Image in a image block

【+α】開発効率を上げるツール
デバッグ環境

✅VSCodeの拡張機能「Expo Tools」でブレークポイントを使った効率的なデバッグできる。

デバッグ手順
  1. 【開発用PC】VSCodeの拡張機能「Expo Tools」をインストール
  2. 【開発用PC】コマンドnpm run startを実行
  3. 【スマホ】Expo Goからアプリを起動
  4. 【開発用PC】VSCodeでコマンドパレットを開く

    Ctrl + Shift + p or Cmd ⌘ + Shift + p

  5. 【開発用PC】コマンドパレットでExpo: Debugを入力して実行
  6. 【開発用PC】ブレークポイントを置いてデバッグ

【注意点】古いExpoは非対応

✅ExpoはVer.49以上であること。

ESLintとPrettier

✅構文エラーやコード整形ができる。

Sentry

✅エラー監視ができる。

参考サイト