マック(Mac)にreact nativeの開発環境を構築する方法

2019-10-21

react-nativeでアプリを開発するためマック(Mac)に開発環境を構築して見て、react-nativeのプロジェクトがうまく起動できるか確認して見ます。

概要

react-nativeでアプリを開発するため、マック(Mac)に開発環境を設定する方法について説明します。ウィンドウ(Windows)に開発環境を設定する方法については下記のブログを参考してください。

マック(Mac)でreact-nativeアプリを開発する方法はExpo CLIReact Native CLIがあります。

Expo CLIはreact-nativeでアプリを開発する時よく使うネイティブ機能(位置情報、カメラなど)をパッケージで提供してます。初めてreact-nativeで開発する時は楽かもしれないですが、使ってないネイティブ機能のモジュールのせいでファイルサイズが大きくなる問題とExpoが提供してないネイティブ機能を入れる時不便さなのがあって、このブログではExpoを使うことはお勧めしません。

このブログポストではReact Native CLIを使ってアプリを開発するため開発環境を設定する方法を説明します。また、インストールしたReact Native CLIを使ってプロジェクトを生成して見て、うまく起動するかも確認して見ます。

react-nativeでアプリを開発するためにはnodejs, Watchman, Xcodeなどをインストールする必要があります。各段階を一つ一つ詳しく見て見ます。

Homebrewインストール

Homebrewはマック(Mac)に必要なパッケージをインストールや管理をする時使うパッケージ管理者です。Homebrewを使うとマック(Mac)に簡単に必要なパッケージをインストールすることが出来ます。

まず、下記のコマンドを使ってマック(Mac)にHomebrewがインストールされたか確認します。

brew --verion

もし、Homebrewがインストールされたら下記のようにHomebrewのバージョンが確認出来ます。

homebrew 2.1.7
homebrew/homebrew-core (git revision f487; last commit 2019-07-20)

Homebrewのバージョンが表示されない時は、下記のコマンドを実行してHomebrewをインストールします。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールが終わったら、下記のコマンドを実行してインストールが出来たか確認します。

brew --verion

インストールが出来たら、下記のようにHomebrewのバージョンが確認出来ます。

homebrew 2.1.7
homebrew/homebrew-core (git revision f487; last commit 2019-07-20)

Nodejsインストール

react-nativeはJavascriptなのでJavascriptのRuntimeであるNodejsが必要です。

下記のHomebrewコマンドでNodejsをインストールします。

brew install node

インストールが終わったら、下記のコマンドでNodejsがうまくインストールされたか確認します。

node -–version

Nodejsが問題なくインストールされたら、下記のようにNodejsバージョンが確認できます。

v12.6.0

Nodejsをインストールすると、基本的Nodejsのパッケージマネージャーであるnpm(Node Package Manater)も一緒にインストールされます。npmもインストールされたか確認するため下記のコマンドを実行して見ます。

npm --versrion

npmも問題なくインストールされたら、下記のようにnpmのバージョンが確認できます。

6.9.0

Watchmanインストール

Watchmanは特定フォルダやファイルを監視して変化があったら、特定なアクションを実行するように設定する役割をします。react-nativeはソースコードの追加、変更が発生したら、再ビルドするためWatchmanを使っています。

Watchmanをインストールするため下記のHomebrewコマンドを実行します。

brew install watchman

インストールが完了されたら、下記のコマンドを実行してWatchmanがうあくインストールされたか確認します。

watchman –version

Watchmanが問題なくインストールされたら、下記のようにWatchmanのバージョンを確認することできます。

4.9.0

React Native CLIインストール

react-nativeでアプリを開発するため必要なReact Native CLIをインストールして見ましょう。下記のnpmのコマンドを使ってReact Native CLIをインストールします。

npm install -g react-native-cli

インストールが終わったら、下記のコマンドを実行してReact Native CLIがうまくインストールされたか確認します。

react-native --version

問題なくインストールしたら、下記のようにReact Native CLIのバージョンが確認できます。

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

Xcodeインストール

react-nativeでiOSアプリを開発するためにはiOSの開発ツールであるXcodeをインストールする必要があります。下記のリンクを押してアプリストアでXcodeをダウンロードします。

Xcodeをインストールしたら、Command Line Toolsを設定する必要があります。Xcodeを実行して上部のメニューでXcode > Preferences... > Locationsを押してCommand Line Toolsが設定されたか確認します。

react-nativeの開発環境設定 - Command Line Tools設定

もし上のように設定されてないときは、dropdownメニューを選択して一番最新のCommand Line Toolを選択して設定します。

Cocoapodsインストール

CocoapodsはiOSの開発で使える依存性管理者です。

react-nativeでiOSアプリを開発する時、必ず必要なので下記のコマンドでCocoapodsをインストールします。

sudo gem install cocoapods

インストールが終わったら、下記のコマンドでCocoapodsがうまくインストールされたか確認します。

pod --version

問題なくインストールされたら、下記のようにCocoapodsのバージョンが確認できます。

1.7.5

JDKインストール

react-nativeでアンドロイドアプリを開発するためにはJDK(Java Development Kit)をインストールする必要があります。下記のHomebrewコマンドを実行してJDKをインストールします。

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

インストールが完了されたら、下記のコマンドでJavaがインストールされたか確認します。

java -version

JDKでJavaがインストールされたら、下記のようにJavaのバージョンが確認できます。

openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)

JDKをインストールするとJavaのコンパイラーもインストールされます。下記のコマンドでJavaのコンパイラーもインストールされたか確認します。

javac -version

JDKのインストールでJavaのコンパイラーもインストールされたら、下記のようにJavaのコンパイラーのバージョンが確認されます。

javac 1.8.0_222

アンドロイドスタジオインストール

react-nativeでアンドロイドアプリを開発するため、アンドロイドスタジオをインストールする必要があります。下記のリンクを押してアンドロイドスタジオのサイトに移動して、インストールファイルをダウンロードします。

ダウンロードが完了されたら、インストールファイルを実行してアンドロイドスタジオを実行します。

アンドロイドスタジオ設定

アンドロイドスタジオを実行したら下記のような画面が確認できます。

react-nativeの開発環境設定 - アンドロイドスタジオ設定

Nextボタンを押して次の画面に移動します。次の画面に移動したら下記のようにInstall Typeを設定する画面が出ます。Customを洗濯してNextボタンを押して次の画面に移動します。

react-nativeの開発環境設定 - アンドロイドスタジオインストールタイプ設定

次の画面に移動したら、下記のようにSelect UI Theme画面が確認できます。自分が好きなテーマを選択してNextボタンを押して次に進めます。

react-nativeの開発環境設定 - アンドロイドスタジオテーマ設定

次の画面に移動したら、下記のようにSDK Components Setup画面が表示されます。Performance (Intel ® HAXM)Android Virtual Deviceを選択してNextボタンを押してインストールを進めます。

react-nativeの開発環境設定 - アンドロイドスタジオSDK設定

次の画面に移動したら、下記のようにEmulator Settings画面が見えます。特に修正することなくNextボタンを押して次の画面に進めます。

react-nativeの開発環境設定 - アンドロイドスタジオエミュレータ設定

次の画面からは一般的なプログラムをインストールする方法と同じなので説明を省略します。Finishボタンを押して進めるとアンドロイドスタジオの設定が終わります。

アンドロイドスタジオのインストールが終わったら下記のようにアンドロイドスタジオが実行されることが確認できます。

react-nativeの開発環境設定 - アンドロイドスタジオの実行

アンドロイドスタジオSDK設定

右下のConfigure > SDK Mangerを選択してアンドロイドSDK設定画面に移動します。

react-nativeの開発環境設定 - アンドロイドスタジオSDK設定

上のような画面が見えたら、右下のShow Pacakge Detailsを選択します。そしてリストで下記の内容を探して選択します。

  • Android SDK Platform 28
  • Intel x86 Atom System Image
  • Google APIs Intel x86 Atom System Image
  • Google APIs Intel x86 Atom_64 System Image

全て選択したら右下のOKボタンを押して選択した内容をインストールします。

アンドロイドスタジオ環境変数設定

これでアンドロイドスタジオのインストールと設定が終わりました。次はアンドロイドスタジオを環境変数に登録します。環境変数を追加するため~/.bash_profileファイルまたは、~/.zshrcファイルを開いて下記の内容を追加します。

export ANDROID_HOME=自分のアンドロイドSDKのディレクトリ/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

上のコードで自分のアンドロイドSDKのディレクトリを自分の環境に合わせて修正します。自分のアンドロイドSDKのディレクトリが分からない場合、アンドロイドスタジオSDKを設定する画面に移動します。

react-nativeの開発環境設定 - アンドロイドスタジオSDK設定

アンドロイドスタジオSDKを設定する画面の一番上部を見るとAndroid SDK Locationの項目で自分のアンドロイドSDKのディレクトリが確認できます。

このように環境変数を設定したら、ターミナルを再起動して下記のコマンドを実行して見ます。

adb

環境変数にアンドロイドSDKがうまく設定されたら、下記のような結果が確認できます。

Android Debug Bridge version 1.0.41
Version 29.0.1-5644136
Installed as /自分のアンドロイドSDKのディレクトリ/platform-tools/adb

react-nativeプロジェクト生成や確認

react-nativeはバージョンにによって、うまく起動出来たアプリが急に起動出来なくなったり、ビルドする時エラーが出たりしたりなど、色んな問題が発生する可能性が高いです。したがって、react-nativeでアプリを開発する時は、下記のようにnpmコマンドでバージョンを固定して使うことをお勧めします。

npm config set save-exact=true

次は下記のReact Native CLIコマンドでreact-nativeプロジェクトを生成します。

react-native init SampleApp

iOSで確認

生成が完了されたら、下記のコマンドでreact-nativeアプリをiOSで起動させて見ます。

cd SampleApp
# react-native run-ios
npm run ios

うまく実行出来ない場合、ios/SampleApp.xcworkspaceファイルを実行して左上のシミュレータを設定するメニューでシミュレータを設定して矢印ボタンを押してシミュレータを実行します。

うまく実行されたら、下記のような画面が見えます。

react-nativeの開発環境設定 - iOSで実行

アンドロイドで確認

アンドロイドの場合、開発モードがアクティブされたデバイスをUSBで繋げた状態または、アンドロイドスタジオを実行してエミュレータを実行した状態で下記のコマンドを実行します。

# react-native run-android
npm run android

問題なく実行されたら、下記のような画面が確認出来ます。

react-nativeの開発環境設定 - アンドロイドで実行

完了

これでマック(Mac)でreact-nativeでアプリを開発するため開発環境を設定する方法を見て見ました。また、開発環境の設定がうまく出来たか確認するため、React Native CLIを使ってアプリを生成して実行して見ました。

react-nativeでアプリを開発する準備が終わりました。react-nativeでアプリを開発する世界にどっぷり浸かってみましょう!

Buy me a coffeeBuy me a coffee
Posts