【React Native】生成したreact-nativeプロジェクトがiOSで起動できなかった件

# はじめに
React Nativeを試してみようとインストールしてみたものの、生成したreact-nativeプロジェクトがiOSで正しく動かなかったので、その対処メモ。

# 実行環境
- Xcode 12.1
- Android Sudio 3.2.1
- macOS Catalina（10.15.7）

#React Nativeのインストール
環境設定は、記事に日付も新しいので[こちらのサイト](https://dev-yakuza.github.io/react-native/install-on-mac/)を参考にしながら行いました。

※私の環境には、Homebrew、Nodejs、Xcode、Cocoapods、Android Studioは導入済みなのでインストールしていません。

1.Watchmanのインストール

```Swift:
brew install watchman
```

2.React Native CLIのインストール

```Swift:
npm install -g react-native-cli
```

3.JDK(Java Development Kit)のインストール

```Swift:
brew tap AdoptOpenJDK/openjdk
```

```Swift:
brew cask install adoptopenjdk8
```


#iOSシミュレーターで正しくアプリが起動しない
セットアップが終わったので、iOSアプリを起動してみます。

```Swift:
cd SampleApp
npm run ios
```

simulatorが起動し、アプリがロードされて。。。
と、参考サイトとは違い、[こちらのサイト](http://matagotch.hatenablog.com/entry/2016/05/16/222101#Could-not-connect-to-development-serverエラー対策)のような赤い画面にエラーが。メッセージはURL以降は違っててこんな感じ。

![Simulator Screen Shot - iPhone 11 - 2020-11-08 at 12.24.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106624/ebc38b50-9cde-581a-ae97-878496414d9e.png)

で、アプリ起動時のコンソールを見てみると、watchmanで以下のようなメッセージが出てました。

```Swift:
020-11-01T21:54:49,874: [0x11ce00dc0] while computing sockname: failed to create /usr/local/var/run/watchman/c_geru-state: No such file or directory

Watchman:  watchman --no-pretty get-sockname returned with exit code=1, signal=null, stderr= 2020-11-01T21:54:49,874: [0x11ce00dc0] while computing sockname: failed to create /usr/local/var/run/watchman/c_geru-state: No such file or directory
```

色々調べてみると、[こちらのサイト](https://alphacast.jp/mac/mac-high-sierra-から-usr-local-を権限変更できなくなった/)によれば、<font color="Red">High Sierraから/usr/local の権限変更が出来なくなった</font>らしい。試してみると、確かにターミナルでも、Finderでも権限がないと怒られて変更できない。

遡ってインストール時のログを確認すると、Watchmanのインストール時に同じ「No such file or directory」のログが表示されていました。おそらくWatchmanインストール／起動時に必要なディレクトリが生成できず、アプリが正常に起動できなかったようです。

[同じサイト](https://alphacast.jp/mac/mac-high-sierra-から-usr-local-を権限変更できなくなった/)によれば<font color="Red" size="bold">「/usrl/local/以下のディレクトリでは権限変更、作成が出来る」</font>と書かれていたので、/usr/local/var/ のadminの権限を<font color="Red" size="bold">読み/書き</font>に変更しました。

![スクリーンショット 2020-11-08 12.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106624/92091643-eb14-85ee-4898-a3c446d76366.png)

無事プロジェクトが表示されました！

![Simulator Screen Shot - iPhone 11 - 2020-11-08 at 12.23.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106624/019e451d-77de-8c94-9279-f7ca1c0317ef.png)

# Androidでの起動
Androidは、事前にシミュレーターを起動する必要があるとのことで、「Android Studioの起動画面右下の「Configure」＞「AVD Manager」を選択して...」と書かれているんだけど、AVD Managerが見当たらない。

![スクリーンショット 2020-11-08 12.14.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106624/d09e5906-9f5a-8f76-e5e5-cf9491975438.png)
![スクリーンショット 2020-11-08 12.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106624/7a6a1cfd-176d-2067-1262-e9cbbe11a6e4.png)

いろいろ調べてみたけど、なぜ表示されていないのかわからず...。

起動画面の「Start a new Android Studio project」 から新規プロジェクトを生成してみると、AVD Manager自体はインストールされていたので、ここから起動してシミュレーターを立ち上げてから

```Swift:
npm run android
```
で無事起動しました。

# まとめ
/usr/local の権限は意外な落とし穴でした。同じようなトラブルが出てる方の参考になれば。

以下、参考リンクです。

- [マック(Mac)にreact nativeの開発環境を構築する方法](https://dev-yakuza.github.io/react-native/install-on-mac/)
- [React Nativeのアプリ開発環境の構築 (Mac編)](https://deha.co.jp/magazine/react-native1/)
- [「React Native」入門](http://matagotch.hatenablog.com/entry/2016/05/16/222101)
- [React Nativeを環境構築してみたら詰まった話](http://smot93516.hatenablog.jp/entry/2018/03/09/113518)
- [Mac High Sierra から/usr/local/を権限変更できなくなった](https://alphacast.jp/mac/mac-high-sierra-から-usr-local-を権限変更できなくなった/)
- [Watchman が原因で Jest でテストを実行しても動かない場合の対応方法](https://bake0937.hatenablog.com/entry/2019/12/01/150241)
- [[Android] エミュレータ AVD Manager の設定](https://akira-watson.com/android/avd-manager.html)