久しぶりにPC環境を一新したので、ゼロから環境構築を行います。
尚、XCodeはインストール済みとします。
使用OS
macOS Monterey v12.5
１、Homebrewのインストール
何はともあれHomebrewがないと始まらないです。
公式ドキュメントに則ってインストールしましょう。
# ターミナルで下記コマンドをたたく
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
２、Node.jsのインストール
ReactNativeはNode.jsで動いてるので、これも必須です。
また、僕はバージョン管理ツールとしてfnmを使用してますが、ここは個人の好きなやつで問題ないです。
# 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を使う方はここスキップして良いです。
brew install yarn --ignore-dependencies
４、watchmanのインストール
次はReactNative公式にもあるように、watchmanをインストールします。
brew install watchman
５、Rubyのインストール
systemのRubyを使う方はスキップで良いです。
僕は最新版を使います。
また、rbenvでバージョン管理を行います。これも好みなので好きなの使ってください。
# 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もインストールしましょう。
僕の記憶が正しければこれも必要だったはず
gem install bundler
７、cocoapodsのインストール
これは必要です。インストールしましょう。
インストールが済んだら一度ターミナルを再起動した方が良いです。
brew install cocoapods
８、Android Studioのダウンロード
iosはxcodeとコマンドラインツールがあれば起動できますが、AndroidはAndroid Stdioが必要です。
android developers公式からダウンロードしましょう。
-
ダウンロードしたら一度Android Studuioを開き初期設定を行いましょう。
初めて開いたらsetting configファイルはどこ？みたいなことを聞かれますが、最初だとそんなの無いので、do not ~を選んで進みましょう。 -
次は環境設定の画面が出ると思うので、全て同意し、必要なライブラリを全てインストールしてください。
-
More Actions -> SDK Manager を開き、show Package Detailsをオンにします。
-
Android 12 (S)をONにします。
-
Intel x86 Atom_64 System ImageをONにします。(Apple M1の方はGoogle APIs ARM 64 v8a System ImageをONにする)
-
インストールしてください。
一旦これでOKです。
９、Java Development Kitのインストール
公式ドキュメントを参考にしながら、下記コマンドを叩きましょう。
brew tap homebrew/cask-versions
brew install --cask zulu11
１０、ANDROID_SDK_ROOT 環境変数を構成する
.zshrcに下記の環境変数を設定してください。
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公式にあるnpx react-native init AwesomeProjectコマンドを好きなディレクトリでたたきましょう。
これでReactNativeプロジェクトが生成されるはずです。
また、途中でreact-nativeのCLIをインストールするように勧められるので、yを押下してインストールしましょう。
# JavaScriptが良い方
npx react-native init AwesomeProject
# TypeScriptが良い方
npx react-native init AwesomeTSProject --template react-native-template-typescript
たまに下記エラーが出る時があります。
cocoapodsのパスが通ってないか、xcodeコマンドラインツールが設定されたないかの二択だと思います。
僕の場合は後者だったので、Xcode -> Preferences -> Locations のCommandLineToolsが設定して解決しました。
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シュミレータが起動し、下記画面が表示されたら成功です！
androidでの起動
androidを起動させるには、先ず初めにandroidエミュレーターを起動しておく必要があります。
- Android Studioの起動 -> More Actions -> VirtualDeviceManagerを押下すると、まだ何のデバイスもないと思うので、Crate Deviceで作成しましょう。
作成するデバイスは何でも良いです。僕はPixel5にしました。 - Pixed5を選択してNextを選択すると、System Imageのインストールを求められるので、指示に従いインストールしましょう。
- あとはFinish -> Next -> Finishで追加されるはずです。
- 追加されたPixel5を三角ボタンを押下して起動します。
yarn startを実行、別ターミナルでyarn androidを実行し、下記画面が表示されたら成功です！
終わり
おめでとうございます🎉
あとは自分が作りたいことをコードを書いて実現するだけです！
ライブラリも豊富にあるので、色々ググって色んなことを試してみてください！
それではまた👋