ReactNativeの環境構築をしてみた

:::note
カスタマイズ性が高い`Developer Build`を諦めて`Expo Go`で環境構築をしています。
詳しくは「Expo Goで開発することにした経緯」をご覧ください。
:::

# React Nativeとは
ネイティブアプリのユーザインターフェイスを作る為のJavaScriptライブラリです。

# Expoとは
React Nativeのフレームワークです。
ファイルベースのルーティング、高品質のユニバーサルライブラリ、ネイティブファイルを管理することなくネイティブコードを変更するプラグインを記述する機能などの機能を提供します。

# 環境構築

:::note
Nodeをダウンロードされていない方はこちらから
https://nodejs.org/en
特にこだわりがなければLTSをダウンロードして下さい。
`node -v`でバージョンが表示されたら成功です。
```terminal
node -v
v18.18.0
```
:::

## プロジェクトの作成

https://reactnative.dev/docs/environment-setup

以下を実行します。
```terminal
npx create-expo-app@latest
```

以下のような表示がされます。
```terminal
expo-template $ npx create-expo-app@latest
Need to install the following packages:
create-expo-app@2.3.5
Ok to proceed? (y) y
✔ What is your app named? … .
✔ Downloaded and extracted project files.
> npm install

~~~~
~~~~
~~~~
✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- npm run android
- npm run ios
- npm run web
```

以下のような構成になってます。

```terminal
expo-template(main) $ tree -L 1
.
├── README.md
├── app
├── app.json
├── assets
├── babel.config.js
├── components
├── constants
├── expo-env.d.ts
├── hooks
├── node_modules
├── package-lock.json
├── package.json
├── scripts
└── tsconfig.json

8 directories, 7 files
```

## Expo GoをiPhone,Androidでinstall

https://apps.apple.com/us/app/expo-go/id982107779

この時にexpoのアカウントを作るように言われますので作成して下さい。

https://expo.dev/login

## `npm run start`を実行
```terminal
npm run start
```

## QRコードを読み取る
```terminal
npm run start

> expo-template@1.0.0 start
> expo start

Starting project at /Users/yamanetaisei/Desktop/github.com/yamatai12/expo-template
Starting Metro Bundler
Unable to run simctl:
Error: xcrun simctl help exited with non-zero code: 72

QRコードがここに表示されますので読み取って下さい。

› Metro waiting on exp://192.168.3.4:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
```

## Expo Go アプリで　「Expo Go」 をクリック

![IMG_4920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/f3d5c2c0-1704-1ae8-5dfd-4054cb219af3.png)

以下のように表示されたら完了です！！

![IMG_4919.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/e2f6bed3-4a4a-25e1-0811-278705c437d8.png)

今回環境構築したリポジトリはこちらです。
https://github.com/yamatai12/expo-template

# Expo Goで開発することにした経緯

https://docs.expo.dev/get-started/set-up-your-environment/?platform=ios&device=physical&mode=development-build&buildEnv=local

Where would you like to develop?は`iOS device`

How would you like to develop?は`Development build`を選択してます。

開発したアプリを自分のデバイスにインストールしてテストするのが今回の目的の為、EASではなく、Xcodeで開発を進めます。
アプリをリリースする場合は「Apple Developer Program」に加入し、年会費を支払う必要があるそうです。

### Xcodeをインストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/f9f3c765-d199-220d-95db-9d5789338c73.png)

:::note
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/db718fb4-b226-efae-ee0b-9498e2f0602d.png)

macOSのバージョンアップをしないといけないです。

https://support.apple.com/ja-jp/108382
:::


### Install expo-dev-client
```terminal
npx expo install expo-dev-client
```

### Plug in your device via USB
```terminal
npx expo run:ios --device

📝  iOS Bundle Identifier Learn more

? What would you like your iOS bundle identifier to be? › com.anonymous.expo-template
~~~~
~~~~
CommandError: No iOS devices available in Simulator.app
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405182/b824fcff-49d1-98d8-c9a3-3a0378a06a33.png)

### iPhoneで開発者モードを有効にする手順
- iPhoneのホーム画面から「設定」アプリを開きます
- 「設定」メニューから「プライバシーとセキュリティ」を選択します
- 下にスクロールして「開発者モード」を見つけ、これをタップします
- 開発者モードを有効にすると、デバイスの再起動が必要になります。再起動後、確認のポップアップが表示されるので、これを承認してください

```terminal
$ DEBUG=expo:start:platforms:ios* npx expo run:ios --device
  expo:start:platforms:ios:xcrun Running: xcrun devicectl list devices --json-output /private/var/folders/tp/qhw4c4ps0v3fpzz880ln57c00000gn/T/c0a62db98a07e79efb59b5a041d2055b --timeout 5 +0ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +15ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +1s
  expo:start:platforms:ios:getBestSimulator No booted simulator matching requirements (osType: iOS). +0ms
  expo:start:platforms:ios:getBestSimulator Default simulator ID: null +9ms
  expo:start:platforms:ios:xcrun Running: xcrun simctl list devices --json  +95ms
CommandError: No iOS devices available in Simulator.app
```

https://github.com/expo/expo/issues/27316

Simulatorではなく、実機で検証したいのにSimulatorがないというエラーになってしまいます。。
この為、`Developer Build`を諦めて`Expo Go`に変更しました。

# 最後に
- `Development Build`でできればしたいので引き続きトライします
- 個人開発の過程をQiitaで投稿していきますのでよろしくお願いします！！

本記事を読んで頂き、ありがとうございました。
いいねいただけると記事執筆の励みになりますので、参考になったと思われた方は是非よろしくお願い致します🙏