[React Native] MacでReactNativeプロジェクトの環境設定 (iOS&Android)

はじめに

アプリを開発するために必ずSwiftやKotlinを学ぶ必要はありません。Dart言語のFlutterフレームワークもあるし、JS基盤のReact Native(今から略でRNで書きます。)フレームワークでもiOSやAndroidのアプリ開発ができます。

それで、今回の記事はMacでRNプロジェクトの環境を構成する方法についてお話しします。

Mac(OSX)でiOS開発の環境設定

Mac環境でXcodeを使用してiOSアプリをビルドする方法を説明します。

パッケージ設置

Homebrew 設置

＃設置しているか確認
$ brew --version
- zsh: command not found: brew
$ /usr/bin/ruby -e "$(curl -fsSL 

# 設置コマンド実行
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

＃設置完了確認
$ brew --version
Homebrew 3.3.9
Homebrew/homebrew-core (git revision c4b0b515cbd; last commit 2021-12-20)
Homebrew/homebrew-cask (git revision ada9a2ed53; last commit 2021-12-20)

Node.js 設置

＃設置しているか確認
$ node --version
- zsh: command not found: node

# 設置コマンド実行
$ brew install node

＃設置完了確認
$ node --version
Homebrew 3.3.9
v17.2.0
$ npm --version
8.1.4

Watchman 設置

＃設置しているか確認
$ watchman --version
- zsh: command not found: watchman

# 設置コマンド実行
$ brew install watchman

＃設置完了確認
$ watchman --version
2021.12.13.00

RN CLI 設置

＃設置しているか確認
$ react-native --version
- zsh: command not found: react-native

# 設置コマンド実行
$ npm install -g react-native-cli

＃設置完了確認
$ react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

Cocoapods 設置

＃設置しているか確認
$ pod --version
- zsh: command not found: pod

# 設置コマンド実行
$ sudo gem install cocoapods

＃設置完了確認
$ pod --version
1.11.2

Yarn 設置

＃設置しているか確認
$ yarn --version
- zsh: command not found: yarn

# 設置コマンド実行
$ brew install yarn

＃設置完了確認
$ yarn --version
1.22.17

Xcode 設置

https://developer.apple.com/download/all/
上のサイトからXcodeをインストールします。
できる限りバージョンは11以上を設置した方がいいです。

iOS Projectの設定

# projectのpathに移動
$ cd {PROJECT_PATH}

# パッケージ設置
$ yarn install

# ios フォルドに移動
$ cd ios

# pod 設置
$ pod install

# .xcworkspaceファイルを実行
$ open [ファイル名].xcworkspace/

# Signing & CapabilitiesからAutomatically manage signingのチェックボックスを解除 

$ react-native run-ios

Mac(OSX)でAndroid開発の環境設定

Mac環境でAndroidStudioを使用してAndroidアプリをビルドする方法を説明します。

パッケージ設置

node, watchman設置(iOSの方で設置されたらskip)

$ brew install node
$ brew install watchman

AndroidStudio設置

Android file transfer設置

ADB設定及びデバイス連動

.bash_profileや.zshrcファイルを開いてADB環境変数を作成

#環境変数の設定しているかどうか
$ adb --version
- zsh: command not found: adb

#設定ファイルを開く
$ open -e .zshrc

# Android ADB
export ANDROID_HOME= "#Android sdk path入力"
(ex: "/Users/[userName]/Library/Android/sdk")
PATH="${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools"
export PATH

＃設置完了確認
$ adb --version
Android Debug Bridge version 1.0.41
Version 31.0.3-7562133
Installed as /Users/[userName]/Library/Android/sdk/platform-tools/adb

アプリビルド

デバイス連結

• 実機でビルド：デバイスの開発者モード及びUSB Debuggingモードが活性化された状態でケーブルで連結
• Emulatorでビルド：AndroidStudioからAVD imageを生成

#projectのpathに移動
$ cd {PROJECT_PATH}

#Android ビルド
$ react-native run-android

iOS/Androidビルド結果

​おわりに

この記事は本当に簡単な環境設定だけ説明しているのでネイティブアプリ開発となんの違いがあるかまだわからないです。少しずつ勉強しながら、分かったことがあればまた記載します！