はじめに
M1 Macの環境構築で苦労したので、うまくいった方法をまとめたいと思います。
これから始める方にも分かりやすくしようと思うので、分かるところは飛ばしながら読んでください。
細かい説明は省いているので、随時気になるところは調べてください。
参考にさせていただいた記事
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を使用して開くにチェックを入れて閉じます。
一度ターミナルを終了し再度起動します。
以下コマンドを実行すると現在の状態が確認できます。
・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」が実行されて変更した文字列が表記されれば成功です。