React Native

React Nativeの環境構築の手順【MacOS版/M1対応】

投稿日:

MacOSでReact Nativeの開発環境を構築する方法を知りたい。
iOS、Android、それぞれの開発に必要なツールが知りたい。

このような疑問に答えます。

この記事では、MacOSでReact Nativeを開発するための環境構築と、iOSとAndroidのそれぞれの開発に必要なツールをまとめて紹介していきます。
Appleシリコン(M1)を搭載したMacで、Rosetta 2を使用せず、環境構築ができる方法も紹介しています。

WindowsでReact Nativeの開発を行いたい場合はReact Nativeの環境構築の手順【Windows版】をご覧ください。

※この記事は、2021年5月時点、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 stable
Warning: 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はバージョン8以降のものをインストールしましょう。
ここでは、以下のコマンドでバージョン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 30Google 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-ios
※バージョンによりますが、ビルドで以下のエラーが発生した場合は、PodfileのFlipperを無効にすることで解決できます。

ld: 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に接続します。

端末のデバイス情報のビルド番号を7回タップし、開発者向けオプションを有効にします。
システムの開発者向けオプションからUSBデバッグをオンにします。

ターミナルでadb devicesを実行し、デバイスが表示されれば接続完了です。

ターミナルでプロジェクト配下まで移動し、以下のコードを実行してプロジェクトを起動します。

npx react-native run-android

以下のような画面が表示されたら起動確認完了です。

<スポンサーリンク>

最後に

以上がMacOSでReact Nativeの環境構築の手順となります。

2021年5月時点では、M1にまだ対応されていない機能もあるので、最新情報もチェックしていただけると幸いです。
また、バージョンのアップデートなどで将来やり方が変わる可能性があるのでご注意ください。

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る

React NativeとTypeScriptの開発におすすめな本

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る

react-native-calendarsの日本語化とカスタム方法

React Nativeでカレンダーを実装したい。 react-native-calendarsの使い方やカスタム方法が知りたい。 このような疑問に答えます。 〇この記事の内容 react-nativ…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

もっと見る

React Nativeでclassをfunctionに変換する10ステップ

React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

もっと見る


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>