iOS、Android、それぞれの開発に必要なツールが知りたい。
このような疑問に答えます。
この記事では、MacOSでReact Nativeを開発するための環境構築と、iOSとAndroidのそれぞれの開発に必要なツールをまとめて紹介していきます。
※Appleシリコン（M1）を搭載したMacで、Rosetta 2を使用せず、環境構築ができる方法も紹介しています。
WindowsでReact Nativeの開発を行いたい場合はReact Nativeの環境構築の手順【Windows版】をご覧ください。
※この記事は、2021年５月時点、React Nativeの公式ホームページで推奨されている、MacOSでの開発環境の構築手順を参考にしています。
詳しくはReact Native公式ホームページのSetting up the development environmentをご覧ください。
◯この記事の内容
＜スポンサーリンク＞
1. 基本環境のセットアップ
基本環境のセットアップは管理者権限のあるアカウントで行ってください。
権限がない場合、インストールがうまくいかない場合があります。
Homebrewのインストール
Homebrewはパッケージ管理システムで、ソフトウェアの導入を単純にしてくれます。
Homebrewを用いて環境構築に必要なソフトウェアをインストールするので、まずはHomebrewをインストールします。
①ターミナルを開きます。
②Homebrewの公式ホームページに表示されているインストール用スクリプトをコピーし、ターミナルに貼って実行します。
Homebrewの公式ホームページはこちらから。
実行時、管理者アカウントのパスワードが要求される場合があるので、要求があれば入力してください。
③Homebrewのbrewコマンドが使えるように以下のコマンドをターミナルで実行し、環境パスを設定します。
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/ユーザー名/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"④ターミナルに以下のコマンドを実行し、バージョンが表示されることを確認します。
brew -vバージョンが表示されたら、Homebrewのインストール完了です。
Node.jsのインストール
Node.jsはサーバサイドのJavaScript実行環境です。
Node.jsのインストールはNode.jsのバージョン管理ツールであるnodebrewを用います。
Nodebrewは複数のバージョンのNode.jsをインストールしたり、切り替えができます。
①ターミナルで以下のコマンドを実行し、nodebrewをインストールします。
brew install nodebrewインストールが終わったら、nodebrew -vを実行し、バージョンが表示されることを確認します。
②安定版のNode.jsを以下のコマンドでインストールします。
nodebrew install-binary stableWarning: Failed to create the file とエラーが出てしまう場合は、mkdir -p ~/.nodebrew/srcを実行してからインストールします。③nodebrew lsで現在有効化されてるnodeを確認します。
current: noneとなっている場合は、以下のコマンドにバージョン情報を追加し実行してください。
nodebrew use [version]④nodeのコマンドが使えるように以下のコマンドで、環境パスを設定します。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile実行した後は、一度ターミナルを再起動します。
⑤以下のコマンドをターミナルで実行し、バージョンが表示されることを確認します。
node -vバージョンが確認できたら、Node.jsのインストール完了です。
watchmanのインストール
watchmanはFaceBookが推奨しているファイル変更管理ツールです。
公式ホームページはこちらから。
①以下のコマンドを実行し、watchmanをインストールします。
brew install watchman②以下のコマンドを実行し、バージョンが表示されることを確認します。
watchman –versionバージョンが確認できたら、watchmanのインストール完了です。
以上が基本環境のセットアップになります。
ここからは、iOS・Androidの開発にそれぞれ必要な環境の構築を行なっていきます。
2. iOS開発のための環境構築
CocoaPodsのインストール
CocoaPodsはiOS/Mac用のXcodeプロジェクトのパッケージ管理ツールです。
React NativeでのiOSアプリの開発には欠かせないので、インストールします。
①管理者でターミナルを起動します。
②以下のコマンドを実行し、CocoaPodsをインストールします。
・Appleシリコン（M1）:
sudo arch -x86_64 gem install ffi
arch -x86_64 sudo gem install cocoapods・Intel Core:
sudo gem install cocoapodsログインユーザーのパスワードが求められるので、入力してください。
③以下のコマンドを実行し、バージョンが表示されることを確認します。
pod --versionバージョンが確認できたら、CocoaPodsのインストール完了です。
Xcodeのインストール
XcodeはApple社が開発したMacやiOSのアプリケーション開発に特化したソフトウェアです。
iOS向けのアプリ開発に欠かせないツールとなります。
①App StoreからXcodeをインストールします。
XcodeのApp Storeページはこちらから。
すでにインストールしてある場合はバージョン10以降であることを確認してください。
②インストールが完了したら、Xcodeを起動します。
規約の同意が求められるので、確認し、同意してください。
③Xcodeが起動できたら、Command Line Toolsの設定を行います。
ツールバーのから「Xcode」→「Preferences」を選択します。
「Location」タブで最新のCommand Line Toolsを選択し設定します。
以上でiOSの開発環境の構築終了です。
3. Android開発のための環境構築
JDKのインストール
Androidアプリの開発にはJDK(Java Development Kit)が必要となります。
JDKはバージョン８以降のものをインストールしましょう。
ここでは、以下のコマンドでバージョン11をインストールします。
brew install --cask adoptopenjdk/openjdk/adoptopenjdk11以下のコマンドでインストールの確認を行いましょう。
java -version
javac -versionバージョンが表示されたらJDKのインストール完了です。
Android Studioのセットアップ
Android StudioはGoogle公式のAndroidアプリの開発ツールです。
Androidアプリの開発に欠かせないので、インストールとセットアップを行います。
Android Studioのインストール
①Android Studioの公式ホームページからインストーラをダウンロードします。
②インストーラを実行します。
表示されたウィンドウのAndroid StudioをApplicationsにドラッグ&ドロップすれば、インストールできます。
③インストール完了後、Android Studioを起動し、Android Studioの初期設定を行います。
特にAndroid Studioの設定ファイルがない場合はDo not import settingsを選びます。
インストールタイプは「Custom」を選択します。
SDK Components Setup以外は基本デフォルトのままで大丈夫です。
SDK Components Setupでは、以下のようにチェックを入れてることを確認しましょう。
初期設定が終わり、以下の画面が表示されたらインストール完了です。
Android SDKのインストール
①Android Studioのホーム画面から、右下の「Configure」→「SDK Manager」と進みます。
②SDK Platformsを設定します・
右下の「Show Package Details」にチェックを入れ、Android11（R）を展開します。
Android SDK Platform 30とGoogle APIs Intel x86 Atom System Imageがチェックされてることを確認します。
③SDK Toolsを設定します。
「SDK Tools」タブに行き、右下の「Show Package Details」にチェックを入れます。
「Android SDK Build-Tools」で30.0.3にチェックが入ってることを確認します。
また、Android SDK Command-line Tools (latest)にチェックを入れます。
④「Apply」を選択してSDKをインストールし、設定を反映させましょう。
環境変数の設定
React NativeはAndroid Studioの環境変数を利用するので、その設定を行います。
$HOME/.zprofileファイルに以下の環境変数を追加します。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools.zprofileは隠しファイルなので、FinderでShift+command+.で表示できます。
追加後、以下のコマンドで環境変数を適用させます。
source $HOME/.zprofile以上でAndroidの開発環境の構築の終了です。
初期プロジェクトの作成と起動確認
初期プロジェクトの作成
開発環境が整ったので、React Nativeの初期プロジェクトを作成しましょう。
①ターミナルで、初期プロジェクトを作成したいパスへ移動します。
②以下のコードを実行して、プロジェクトを作成します。
npx react-native init [プロジェクト名]react-native-cliパッケージのインストールを行っている記事が多く存在しますが、公式はnpxの使用をおすすめしています。
npxを使う場合、react-native-cliパッケージは不具合の原因となるので、インストールしてたら事前に削除しておきましょう。
Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.上記のエラーが発生した場合、”cd ./[プロジェクト名]/ios”でiosフォルダ配下に移動してください。
M1 プロセッサーを使用している場合は、
arch -x86_64 pod installを実行してください。そうでない場合は
pod installを実行してください。
プロジェクトの起動確認
iOS
iOSでプロジェクトの起動確認を行います。
①ターミナルでプロジェクト配下まで移動します。
②以下のコードを実行して、プロジェクトを起動します。
npx react-native run-iosld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
プロジェクトのiOSフォルダのPodfileを開き、以下のようにflipperの部分をコメントアウトしてください。
# use_flipper!()
# post_install do |installer|
# react_native_post_install(installer)
# end③以下のような画面が表示されたら起動完了です。
Android
Androidでプロジェクトの起動確認を行います。
Android StudioではAndroidの仮想デバイスを実行できるのですが、最新のAPIのものは現在M1ではサポートされていないので、実機を用いた確認法を紹介します。
Android Studioでの仮想デバイスの起動方法はこちらを参考にしてください。
①Android端末をMacに接続します。
端末のデバイス情報のビルド番号を７回タップし、開発者向けオプションを有効にします。
システムの開発者向けオプションからUSBデバッグをオンにします。
ターミナルでadb devicesを実行し、デバイスが表示されれば接続完了です。
②ターミナルでプロジェクト配下まで移動し、以下のコードを実行してプロジェクトを起動します。
npx react-native run-android③以下のような画面が表示されたら起動確認完了です。
＜スポンサーリンク＞
最後に
以上がMacOSでReact Nativeの環境構築の手順となります。
2021年5月時点では、M1にまだ対応されていない機能もあるので、最新情報もチェックしていただけると幸いです。
また、バージョンのアップデートなどで将来やり方が変わる可能性があるのでご注意ください。
