弊社のサービスHapitasのアプリ版はReact Nativeを用いて開発されています。インターンとして開発に携わっているのですがで正直環境がどのように動いているのか全く理解していなかったので、勉強としてまずは開発環境を構築したので備忘録としてまとめます。30分ほどあれば作れます。

React Nativetとは

React Native（リアクト・ネイテイヴ）は、Facebookが作成したオープンソースのモバイルアプリケーションフレームワークです。開発者がネイティブプラットフォーム機能とともにReactを使用できるようにすることで、Android、iOSアプリケーションを開発するために使用されています。Web開発で用いられるReactをもとに開発をされているので、Web エンジニアでも学習コストが低いと言われています。
React Nativeのビルドや開発を支援してくれるサービスであるExpoを用いることで、簡単に開発環境が構築できます。

目標

実機、ios,android両シミュレータをローカルで立ち上げてコードを編集保存したら即時反映させる。

(実機でも確認)

事前準備

全体の流れ

1.Expoアカウントを登録
2.Xcodeインストール(ios準備)
3.JDKインストール(android準備)
4.Android Studioインストール(android準備)
5.実機にExpo Clientをインストール
6.Expo CLI をインストール
7.Expoプロジェクトの作成
8.Expo Developer Toolsを起動する
実機でのみ確認したい場合は上記2,3,4をスキップしてください。

動作環境

macOS Big Sur v11.5.2
node v14.15.0
npm v8.1.0

1.Expoアカウントを登録

公式アカウントでExpoアカウントを作成。

2.Xcodeインストール(ios準備)

ローカル環境でiso端末のシミュレータを起動させるためにXcodeが必要になります。
上記のリンクからアプリストアでXcodeをダウンロードします。
XcodeをインストールしたらCommand Line Toolsを設定する必要があります。
Xcodeを実行して上部のメニューでXcode > Preferences > Locationsを押して、
Command Line Toolsが設定されているか確認します。

3.JDKインストール(android準備)

React NativeでAndoridアプリを開発するために、JDK(Java Development Kit)をインストールします。
下記コマンドを実行してJDKをインストールします。

$ brew tap AdoptOpenJDK/openjdk
$ brew cask install adoptopenjdk/openjdk/adoptopenjdk8

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

$ java -version
openjdk version "11.0.11" 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

JDKをインストールするとJavaのコンパイラーもインストールされます。
下記のコマンドでJavaのコンパイラーもインストールされたか確認します。

$ javac -version

下記のようにJavaのコンパイラーのバージョンが確認できます。

$ javac 11.0.11

4.Android Studioインストール(android準備)

下記リンクから Android Studio をダウンロード後、インストールします。
Android Studio
React Native アプリケーションを Android エミュレータで動作させるには、ADV（Android Virtual Device）をインストールする必要があります。
メニューの「Tools」 > 「AVD Manager」を開いて、任意の Android デバイス（ここでは「Pixel 2 API 30」）を追加してください。

「Actions」の「:再生ボタン:（起動ボタン）」を押して、Android エミュレータを起動します。
Android SDK を PATH に追加するために、~/.zshrc(bashをお使いの方はbash_profile)を開いて、次の記述を追加してください。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

設定の変更を反映。

$ source ~/.zshrc

5.実機にExpo Clientをインストール

後ほど自分で作成したコードを実機で確認するためにアプリをインストールします。
ios
https://apps.apple.com/jp/app/expo-client/id982107779
android
https://play.google.com/store/apps/details?id=host.exp.exponent

6.Expo CLI をインストール

Expo CLIをインストールします。

$ npm install -g expo-cli

$ expo --version
4.12.1

7.Expoプロジェクトの作成

$ expo init <任意のプロジェクト名>

workflowについては、今回はTypeScriptを使用したかったためblank (TypeScript)を選択しました。(workflowについての公式ドキュメント)

8.Expo Developer Toolsを起動する

$ expo start

上記コマンドでExpo Developer Toolsがブラウザで立ち上がります。

繋がらない場合は、CONNECTIONをTunnelに変更してみてください。
画面左下のQRコードをExpoClientのQRリーダーで読み込むと、実機で動作確認ができます。
また実機のExpoClientでExpoのアカウントにログインしておくと、QRコード読み込まなくても開発中のアプリケーションが一覧に同期されます。
それぞれRun on iOS simulator,Run on Android device/emulatorを選択するとシミュレータが起動します。(IOS simulatorと違って、Androidでチェックしたい時は毎回Android Studioからエミュレータを起動して、expoからRunしないとダメなよう)
コードを編集して保存すると実機でもシミュレータでも即時反映されるかと思います。

参考にさせていただいた記事

ExpoでAndroidエミュレータが起動しない場合
 ゼロから始める React Native + Expo 入門
 Expo✕React Nativeの環境構築を行う【React Native入門】