[MacOS][React Native][Expo Go][Node.js]環境構築からプロジェクト作成まで備忘録

前提条件：アプリ検証するためのスマホにExpo Goアプリがインストールされていること
（インストール先URL：https://expo.dev/client ）

手順は大きく5つです
[1.Node.jsのインストール](#nodejsのインストール)
[2.yarnのインストール](#yarnのインストール)
[2.5.yarnのインストールがうまくいかない時（権限エラー）](#yarnのインストールがうまくいかない時権限エラー)
[3.プロジェクトを作成する](#プロジェクトを作成する)
[4.開発サーバを起動する](#開発サーバを起動する)
[5.Expo Goアプリで確認する](#expogoアプリで確認する)
[EX.まとめ](#まとめ)


***
### Node.jsのインストール
MacにNode.jsをインストールします。
いろんなインストール方法があると思いますが私は今回公式サイトのインストーラから取り込みました。
公式サイト：https://nodejs.org/ja/download/
　
***
### yarnのインストール
Macにyarnをインストールします。
yarnとは何？については私は↓を参考にしました。
・https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
・https://newsite-make.com/node-npx-npx-yarn/

・yarnインストールコマンド
```sh
% npm install -g yarn 
```

・インストール成功時のログ
```sh
added 1 package in 1s
```
　
***
### yarnのインストールがうまくいかない時（権限エラー）
インストーラを使うとローカルの権限を持つディレクトリにnpmがインストールされるためにパッケージをグローバルに実行すると権限エラーが発生することがあるそうです。

・権限エラーログ
```sh
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' 
```

そういう場合はnpmのデフォルトディレクトリを手動で変更してあげるといいみたいです。
下記コマンドを順次打っていきます。

・ホームディレクトリにグローバルインストール用のディレクトリを作成
```sh
% mkdir ~/.npm-global
```

・新しいディレクトリパスを使用するようにnpmを構成
```sh
% npm config set prefix '~/.npm-global'
```

・任意のテキストエディタで、~/.profileファイルを開くか作成して、次の行を追加
```sh
% export PATH=~/.npm-global/bin:$PATH
```

・更新
```sh
% source ~/.profile
```
　
***
### プロジェクトを作成する
材料が揃ったのでプロジェクトを作成します

・プロジェクト作成コマンド
```sh
"プロジェクトを作成したいディレクトリ" % npx create-expo-app "プロジェクト名"
```
・処理を続行するか聞かれるので了承する（"y"押下）
```sh
[ create-expo-app@1.3.2
Ok to proceed? (y) y
```

・処理実行成功ログ
私は色々ワーニング出たものの一応成功ログ出ました。
```sh
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.

- cd sampleTodo
- npm run android
- npm run ios
- npm run web
```
　
***
### 開発サーバを起動する
作成したプロジェクトのサーバを起動します。

・サーバー起動コマンド
```sh
"作成したプロジェクトのディレクトリ" % yarn expo start 
```

・成功ログ
```sh
yarn run v1.22.19
$ "作成したプロジェクトのディレクトリ"/node_modules/.bin/expo start
Starting project at "作成したプロジェクトのディレクトリ"
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █ ██▀▀▄▀▄██ ▄▄▄▄▄ █
█ █   █ █  ▀█ ▀██▀█ █   █ █
█ █▄▄▄█ █▀  █▄█▀▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ ▀▄█▄▀ █▄▄▄▄▄▄▄█
█ ▄██▄ ▄█▀█▄█▄▀▄▀▄██ ▀▄▄ ▄█
█ ▄█  ▄▄   ▄█▀█▀ ▀▀ █▄  ▀██
█ ▀ ▄█▄█"QRコード"█▄▀▀▀▄ ▀██
███▀  ▄▄ ███ ▄█▀▄▄▄█▄▀ ▀███
█▄▄▄█▄▄▄▄▀█ █▄▀▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀▀▀█▀██▀ █▄█ ▀▀▀██
█ █   █ █▄ ▀▄ ▀▄█▄▄ ▄▄▀ ▀▀█
█ █▄▄▄█ █▀   ███▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄▄▄███▄████▄▄▄▄▄▄█

› Metro waiting on exp://"ポート番号"
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› 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 ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
```
　　
***
### Expo Goアプリで確認する
Expo Goアプリでサーバ起動したプロジェクトを確認します。

・スマホカメラでターミナルに表示されたQRコードを読み取る
・表示されたURLをExpo Goアプリで開く
成功するとスマホの画面に↓の状態が表示されます。
まだ何も実装していないのでこの表示で問題ないです。
![IMG_B119A6BFA6FD-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/853343a2-de00-9f96-80f4-69dd379d1ac0.jpeg)

また、Expo Goアプリでのビルドが成功するとターミナルに以下のログが増えてると思います。
・Expo Goアプリでビルド成功後のログ
```sh
iOS Bundling complete 11366ms
```

あとはExpo Goに表示された通りApp.jsファイルなどで色々実装すると、変更保存するたびにExpo Go側の画面が更新されていきます。
（今回は「Open up App.js to start working on your app!」を「Hello world!」に書き換えてみた）
![IMG_AD793377A46B-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/c5742f1e-7430-3a77-7070-3cae4e1fc200.jpeg)

***
### まとめ
以上がM1 MacでReact Native開発するためのExpo Goを用いた環境構築手順です。
公式が初心者に推奨している通り、CLIを用いたりするよりも難易度低いのかなと思います。
（比較していないのでわからないですが、、）
今までスマホアプリ開発はAndroidStudioでもXcodeでも実機で検証する際には有線で接続していたので
QRコードからワイヤレスで検証できるのは個人的に少し感動しました。

終わり。

***
参考：https://zenn.dev/ikeo/articles/8d0c88dcedf256b09f73