M1搭載MacでReact Nativeの環境構築してみた

#はじめに
M1 Macの環境構築で苦労したので、うまくいった方法をまとめたいと思います。

これから始める方にも分かりやすくしようと思うので、分かるところは飛ばしながら読んでください。
細かい説明は省いているので、随時気になるところは調べてください。

#参考にさせていただいた記事
https://qiita.com/impl_s/items/cf4128982cc423e9113b#android-studio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

https://www.teamxeppet.com/macbook-m1-homebrew-install/

https://zenn.dev/ryuu/articles/brew-yarn-warning

#Homebrewのインストール
2021/2/5にAppleSilicon(M1)対応のHomebrew3.0.0がリリースされました。
今回はこちらをインストールしていきたいと思います。

以下サイトからインストールできます
https://brew.sh/

Install Homebrewと書かれているところの下のコードをコピーしてターミナルに貼り付けます。
パスワードを入力するとインストールが始まります。

```Press RETURN to continue or any other key to abort```
と表示されたら[Enter]を押します。

インストールが完了したらHomebrewのパスを追加する必要があるので、以下のコードを実行します。
**ユーザー名と書かれているところは自身のユーザー名に変更して下さい。**

```echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザ名/.zprofile```

以下のコマンドを実行し、正常に出力されれば成功です。

```brew help```

#Nodeenvのインストール

```brew install nodenv```
```touch .zshrc```

インストール出来たらパスを通します

```eval "$(nodenv init -)"```

#Nodeのインストール

**ターミナルをRosetta2に切り替えてインストールしてください。**

ファインダーのアプリケーションからターミナルを探し、右クリックで「情報を見る」を選択。
Rosettaを使用して開くにチェックを入れて閉じます。

![スクリーンショット 2021-05-07 16.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1456972/6f40ba3b-4c5c-abd8-c639-b12f92137dd6.png)

一度ターミナルを終了し再度起動します。
以下コマンドを実行すると現在の状態が確認できます。

・arm64: M1
・x86_64: Rosetta2

```uname -a```
```# Darwin Kernel Version 20.3.0... x86_64```

**以下コマンドでNodeをインストールしていきます**

```nodenv install 15.9.0```

インストール出来たらバージョンを確認しましょう

```nodenv -v```

#yarnのインストール

```brew install yarn```

インストール出来たらバージョンを確認しましょう

```yarn -v```

#Watchmanのインストール

```brew install watchman```

#JDKのインストール

```brew install --cask adoptopenjdk/openjdk/adoptopenjdk8```

#Cocoapodsのインストール

```brew install cocoapods```

#React Native CLIのinstall

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

npmはnodeと共にinstallされるので、すでに使用できる状態になっていると思います。
CLI（Command Line Interfaceの略）

#Xcodeのインストール

App Storeからインストールして起動 (結構時間がかかります)
Preferences > Locations > Command Line Tools を設定します

#Android Studioのインストール

以下サイトからインストール出来ます
https://developer.android.com/studio?hl=ja&gclid=Cj0KCQjwytOEBhD5ARIsANnRjVj-zR8PvuV40cHP5tnPfqo4sCn9VZigpAvyiMCFWqHrmlxFAZyg0_YaAhhCEALw_wcB&gclsrc=aw.ds

**初回起動時は「Custom」を選択してください**

・ Android SDK
・ Android SDK Platform
・ Android Virtual Device
の3つにチェックを入れ「Next」を押します。

#SDK Manager
①
・Configure > SDK Manager を選択
・"SDK Platforms" > "Show Package Details"にチェックを入れる
・以下にチェックを入れインストールする
Android SDK Platform 29
Intel x86 Atom_64 System Image

②
"SDK Tools" > "Show Package Details"にチェックを入れる
29.0.2 にチェックを入れインストールする

#AVD Manager

以下サイトの
```android-emulator-m1-preview.dmg```
をダウンロードする
https://github.com/741g/android-emulator-m1-preview/releases/tag/0.1

「アプリケーション」フォルダで右クリックして「開く」

これでAndroidエミュレータが起動できるようになりますので、起動した状態でAndroid Studioを再起動すればエミュレータが認識されます。

#プロジェクトの作成

以下公式サイトを参考にプロジェクトを作成していきます。
https://reactnative.dev/docs/environment-setup

npmを使用してExpoCLIコマンドラインユーティリティをインストールします
```npm install -g expo-cli```

次に「AwesomeProject」という新しいReactNativeプロジェクトを作成します。
```expo init AwesomeProject```
```cd AwesomeProject```
```npm start```

これで開発サーバーが起動します。

#動作確認
先ほど作った「AwesomeProject」の中に「App.js」というファイルがあるのでエディターで開いてみましょう。

```export default function App() ```

と書かれている中のTextの文字の中身を自由に変更し、ファイルを保存。
開発サーバーの中央左側にある

```Run on Android device/emulator```
```Run on iOS simulator```

をクリックしてください。

デバイスが起動し、「AwesomeProject」が実行されて変更した文字列が表記されれば成功です。