[個人メモ]MacでReact Nativeの環境構築

概要
Brewのアップデート
nodebrewで推奨のNode.jsを設定
Watchmanのインストール
CocoaPodsインストール
React Native CLIのインストール
Xcodeのインストール
React Nativeプロジェクトの作成

概要

Ventura 13.2.1の環境でIOSアプリ開発のためにReact Native環境を構築した際の個人メモです。
私はC++を使ったPCのアプリケーションの開発をしたことはありますが、IOSアプリの開発経験はありません。
そんな私が環境構築でつまづいたところについて個人的にまとめた資料になります。
これからReact Nativeの環境構築をしようとしている方の参考になればと思います。
（brewやnodebrew, Xcodeなど中途半端な環境構築をしたPCで構築した話になるので、足りない部分は他のサイトを参考に補完してください）

Brewのアップデート

いつかも覚えてないですが１年以上前にbrewをインストールしていたので、正しく動くかTerminalを使って確認したところ、エラーが出ました。

% brew -version

Traceback (most recent call last):
	11: from /usr/local/Homebrew/Library/Homebrew/brew.rb:31:in `<main>'
	10: from /usr/local/Homebrew/Library/Homebrew/brew.rb:31:in `require_relative'
	 9: from /usr/local/Homebrew/Library/Homebrew/global.rb:79:in `<top (required)>'
	 8: from /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/2.6.3_2/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
	 7: from /usr/local/Homebrew/Library/Homebrew/vendor/portable-ruby/2.6.3_2/lib/ruby/2.6.0/rubygems/core_ext/kernel_require.rb:54:in `require'
	 6: from /usr/local/Homebrew/Library/Homebrew/os.rb:7:in `<top (required)>'
	 5: from /usr/local/Homebrew/Library/Homebrew/os.rb:43:in `<module:OS>'
	 4: from /usr/local/Homebrew/Library/Homebrew/os/mac.rb:65:in `prerelease?'
	 3: from /usr/local/Homebrew/Library/Homebrew/os/mac.rb:28:in `version'
	 2: from /usr/local/Homebrew/Library/Homebrew/os/mac/version.rb:32:in `from_symbol'
	 1: from /usr/local/Homebrew/Library/Homebrew/os/mac/version.rb:32:in `fetch'
/usr/local/Homebrew/Library/Homebrew/os/mac/version.rb:32:in `block in from_symbol': unknown or unsupported macOS version: :dunno (MacOSVersionError)

細かく追いませんが、ローカルに保存されているmacOSのバージョンが不一致になっているようです。
brew upgradeや、インストールコマンドも効かないので下記コマンドで解消します。

% brew update-reset

大体10分ほどかかります。下記のようなメッセージが出ればOK。

From https://github.com/Homebrew/homebrew-core
   b16073c763..ae30584ecf  master     -> origin/master

==> Resetting /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core...
Updating files: 100% (7159/7159), done.
Branch 'master' set up to track remote branch 'master' from 'origin'.
Reset branch 'master'
Your branch is up to date with 'origin/master'.

brew updateしようとするとさらに怒られます。

Error: 
  homebrew-core is a shallow clone.
  homebrew-cask is a shallow clone.
To `brew update`, first run:
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
  git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow
These commands may take a few minutes to run due to the large size of the repositories.
This restriction has been made on GitHub's request because updating shallow
clones is an extremely expensive operation due to the tree layout and traffic of
Homebrew/homebrew-core and Homebrew/homebrew-cask. We don't do this for you
automatically to avoid repeatedly performing an expensive unshallow operation in
CI systems (which should instead be fixed to not use shallow clones). Sorry for
the inconvenience!

エラーメッセージ中にある下記コマンド２つをそれぞれ実行します。
リポジトリの容量が大きいのか5分程度かかります。

 % git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
 % git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask fetch --unshallow

再度、brew updateを実施します。

==> Homebrew collects anonymous analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics have been recorded yet (nor will be during this `brew` run).

Installing from the API is now the default behaviour!
You can save space and time by running:
  brew untap homebrew/core
  brew untap homebrew/cask
Already up-to-date.

Installがうまく行ったようですが、brew使用時の動作が変わったようで、過去は一時ファイルをダウンロードしてから解答・インストールしていたようですが、最新のアップデートで直接パッケージのインストールが可能となったようです。
必須の作業ではないですが、下記のコマンドを実行することで、外部リポジトリの登録解除ができ容量の削減ができるようなので、実行しておきます。（筆者環境で900MBの削減）

% brew untap homebrew/core
% brew untap homebrew/cask

下記コマンドで正常にbrewが動作するか確認します。バージョン情報が出ればOK。

% brew --version

Homebrew 4.1.2-30-gc346a5c

nodebrewで推奨のNode.jsを設定

私は過去にnodebrewをインストールしたことがあるので、下記コマンドを使って最新の推奨バージョンのNode.jsをインストールします。実行できない場合は、brew install nodebrewを実施してください。

% nodebrew install-binary stable

nodebrew lsでインストールされているバージョンを確認します。

% nodebrew ls
v13.9.0
v20.5.0

v13.9.0は私が過去にインストールしていたバージョンなので、先ほどインストールされたv20.5.0を使用します。

% nodebrew use v20.5.0

続いて、node.jsのPathを通していない方は、node.jsのPathを通す必要があります。
nodebrew setupコマンドを実行します。

% nodebrew setup

Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================

続いて~/.zshrcの一番下の行に下記を追記します。(bashをお使いの方は~/.bashrcなどお使いのシェル環境に合わせてください）

export PATH=$HOME/.nodebrew/current/bin:$PATH

新しいTerminalを開くか、下記コマンドで設定をリロードします。

% source ~/.zshrc

nodeの実行ができるか、インストールされているバージョンのものが読み込まれているかを確認するために、コマンドを使用して確認します。

% node -v

v20.5.0

先ほどインストールしたv20.5.0が表示されれば正常に設定が完了しています。

Watchmanのインストール

React Nativeではファイル変更時に自動ビルドしますが、その変更検知のためにWatchmanをインストールします。

% brew install watchman

下記コマンドでバージョンを確認することができれば、正常にインストールが完了しています。

% watchman --version

2023.07.24.00

CocoaPodsインストール

IOSアプリ用のパッケージ管理ツールです。下記コマンドでインストールしてください。

% sudo gem install cocoapods

gemコマンド初めて使ったのですが、Rubyのパッケージ管理システムのようです。
しかし、私の環境が古かったのかErrorが発生してしまいました。

ERROR:  Error installing cocoapods:
	The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.4. Try installing it with `gem install activesupport -v 6.1.7.4` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

エラーコマンド中にある下記コマンドを実行してもよいのですが、ruby環境が古いことに不安があるので、ruby自体のアップデートをします。
システムのものをアップデートするとどのような不具合に見舞われるかわからないため、rbenvを使って環境を整えます。
まずはbrewを使ってrbenvのインストールを行います。

% brew install rbenv

続いて下記のコマンドをファイルエディターを使って.zshrcに追記します。

eval "$(rbenv init -)"

zshの設定ファイルを読み込み直し、下記コマンドでrbenvのバージョンが確認できればrbenvがインストールされています。

% source ~/.zshrc

% rbenv -v
rbenv 1.2.0

インストール可能なrubyのバージョンを確認します。

% rbenv install --list

3.0.6
3.1.4
3.2.2
jruby-9.4.3.0
mruby-3.2.0
picoruby-3.0.0
truffleruby-23.0.0
truffleruby+graalvm-23.0.0

3.2.2が最新のようなので、3.2.2をインストールします。

% rbenv install 3.2.2

インストールが完了したら、使用したいバージョンをグローバルに設定します。

% rbenv global 3.2.2

zshの設定ファイルをリロードして、rubyのバージョンが切り替わっていることを確認します。

% source ~/.zshrc
% ruby -v

ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin22]

無事に切り替わっていることを確認して、再度CocoaPodsのインストールを行います。

% sudo gem install cocoapods

バージョンを確認して情報が表示されればインストール成功です。

% pod --version
1.12.1

React Native CLIのインストール

React Native CLIをインストールします。

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

バージョンを確認して、情報が表示されればインストール成功です。

% react-native -version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

Xcodeのインストール

IOSアプリを開発するためにXcodeが必要なので、AppstoreでXcodeをインストールします。

React Nativeプロジェクトの作成

任意のディレクトリでReact Nativeプロジェクトを作成します。

% npx react-native init YourProjectName

たまにcurlなどのエラーが出てしまうことがありますが、その場合は作成したフォルダを削除してもう一度実行してください。

無事に作成が完了したらアプリケーションを実行してみます。

% cd YourProjectName
% npx react-native run-ios

buildに20分ほど（古いMacなので・・・）待ち、このようにiphoneのシミュレーションが起動すれば環境構築完了です！

次回はこちらの環境を使ってアプリの開発を進めていきたいと思います！