【ReactNative】 環境構築手順

久しぶりにPC環境を一新したので、ゼロから環境構築を行います。
尚、XCodeはインストール済みとします。

# 使用OS
macOS Monterey v12.5

# １、Homebrewのインストール
何はともあれHomebrewがないと始まらないです。
[公式ドキュメント](https://brew.sh/index_ja)に則ってインストールしましょう。

```zsh
# ターミナルで下記コマンドをたたく
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

# ２、Node.jsのインストール
ReactNativeはNode.jsで動いてるので、これも必須です。
また、僕はバージョン管理ツールとして[fnm](https://github.com/Schniz/fnm)を使用してますが、ここは個人の好きなやつで問題ないです。

```zsh
# fnmをインストール
curl -fsSL https://fnm.vercel.app/install | bash
# .zshrcに下記を追記
eval "$(fnm env --use-on-cd)"
# 2022/8/6時点で安定版の16.16.0のNode.jsをインストール
fnm install 16.16.0
# 16.16.0を使うように設定
fnm use 16.16.0

# nodeのバージョン確認
node -v
v16.16.0
```

# 3、yarnのインストール
好みですが、僕はyarnを使用します。
npmを使う方はここスキップして良いです。

```zsh
brew install yarn --ignore-dependencies
```

# ４、watchmanのインストール
次は[ReactNative公式](https://reactnative.dev/docs/environment-setup#node--watchman)にもあるように、watchmanをインストールします。

```zsh
brew install watchman
```

# ５、Rubyのインストール
systemのRubyを使う方はスキップで良いです。
僕は最新版を使います。
また、[rbenv](https://github.com/rbenv/rbenv)でバージョン管理を行います。これも好みなので好きなの使ってください。
```zsh
# rbenvのインストール
brew install rbenv
# 公式の手順に乗っ取り初期化
rbenv init
# .zshrcに下記を追記しろと言われるので、追記する。
eval "$(rbenv init - zsh)"
# rbenv-doctorをたたいて、問題ないことを確認する。
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash
# インストール出来るRubyのバージョン一覧を確認。
rbenv install -l
# 2022/8/6時点で3.1.2が最新っぽいのでインストールする。
rbenv install 3.1.2
# 3.1.2を設定する
rbenv global 3.1.2
# ターミナルを再起動してRubyのバージョン確認
ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-darwin21]
```

# ６、bundlreもインストールする
rubyの設定が済んだらbundlreもインストールしましょう。
僕の記憶が正しければこれも必要だったはず:no_mouth:

```zsh
gem install bundler
```

# ７、cocoapodsのインストール
これは必要です。インストールしましょう。
インストールが済んだら一度ターミナルを再起動した方が良いです。
```zsh
brew install cocoapods
```

# ８、Android Studioのダウンロード
iosはxcodeとコマンドラインツールがあれば起動できますが、AndroidはAndroid Stdioが必要です。
[android developers](https://developer.android.com/studio?hl=ja&gclid=Cj0KCQjworiXBhDJARIsAMuzAuzmkSTBcYIp6wA3uYzMUPxvIvUpurfLQy6Z2x6HX3sV72IhMV1oFf8aAmDeEALw_wcB&gclsrc=aw.ds)公式からダウンロードしましょう。

1. ダウンロードしたら一度Android Studuioを開き初期設定を行いましょう。
初めて開いたらsetting configファイルはどこ？みたいなことを聞かれますが、最初だとそんなの無いので、do not ~を選んで進みましょう。

2. 次は環境設定の画面が出ると思うので、全て同意し、必要なライブラリを全てインストールしてください。

3. More Actions -> SDK Manager を開き、show Package Detailsをオンにします。
4. Android 12 (S)をONにします。
5. Intel x86 Atom_64 System ImageをONにします。(Apple M1の方はGoogle APIs ARM 64 v8a System ImageをONにする)
6. インストールしてください。  
一旦これでOKです。

# ９、Java Development Kitのインストール
[公式ドキュメント](https://reactnative.dev/docs/environment-setup#installing-dependencies)を参考にしながら、下記コマンドを叩きましょう。

```zsh
brew tap homebrew/cask-versions
brew install --cask zulu11
```

# １０、ANDROID_SDK_ROOT 環境変数を構成する
.zshrcに下記の環境変数を設定してください。
```zsh
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
```

# 11、準備は整った
まずは今まで設定したツールのPATHを読み込むために、念の為ターミナルを再起動しましょう。
それでは[ReactNative公式](https://reactnative.dev/docs/environment-setup#creating-a-new-application)にある`npx react-native init AwesomeProject`コマンドを好きなディレクトリでたたきましょう。
これでReactNativeプロジェクトが生成されるはずです。

また、途中でreact-nativeのCLIをインストールするように勧められるので、yを押下してインストールしましょう。

```zsh
# JavaScriptが良い方
npx react-native init AwesomeProject

# TypeScriptが良い方
npx react-native init AwesomeTSProject --template react-native-template-typescript
```

## たまに下記エラーが出る時があります。
cocoapodsのパスが通ってないか、xcodeコマンドラインツールが設定されたないかの二択だと思います。
僕の場合は後者だったので、Xcode -> Preferences -> Locations のCommandLineToolsが設定して解決しました。

```zsh
error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./AwesomeTSProject/ios && pod install".
```

# iosでの起動確認
無事にプロジェクトが生成されたら、`yarn ios`でiPhoneシュミレータが起動し、下記画面が表示されたら成功です！
![スクリーンショット 2022-08-06 23.03.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344650/3ec1647b-89e4-a2fd-e3f3-3c85ced0589f.png)

# androidでの起動
androidを起動させるには、先ず初めにandroidエミュレーターを起動しておく必要があります。
1. Android Studioの起動 -> More Actions -> VirtualDeviceManagerを押下すると、まだ何のデバイスもないと思うので、Crate Deviceで作成しましょう。
作成するデバイスは何でも良いです。僕はPixel5にしました。
2. Pixed5を選択してNextを選択すると、System Imageのインストールを求められるので、指示に従いインストールしましょう。
3. あとはFinish -> Next ->  Finishで追加されるはずです。
4. 追加されたPixel5を三角ボタンを押下して起動します。


`yarn start`を実行、別ターミナルで`yarn android`を実行し、下記画面が表示されたら成功です！
![スクリーンショット 2022-08-06 23.58.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344650/577e7518-254b-3840-9aee-85df1fae5b81.png)

# 終わり
おめでとうございます🎉
あとは自分が作りたいことをコードを書いて実現するだけです！
ライブラリも豊富にあるので、色々ググって色んなことを試してみてください！

それではまた👋