システム開発

【Mac編】ReactNativeを使って環境構築をする方法は?【JavaScriptのコードのみでアプリ開発】

React NativeはJavaScriptのコードのみでiOSとAndroid両方のアプリを開発することができます。
JavaScriptの経験はあるが、アプリ開発の経験は無いというエンジニアにはとても便利なツールと言われています

この記事ではこれからReact Nativeを使ってアプリを開発したい方を対象に、その環境構築の手順を紹介していきます。

  • アプリ開発を行いたい方
  • JavaScriptは勉強している方
  • React Nativeの使い方を知りたい方

これらに当てはまる方におすすめの記事となっています。これを読めばReact Nativeの環境構築の方法がまるわかりですよ。

Homebrewインストール

HomebrewはMacのパッケージ管理ツールです。Homebrewを使うことでMacに簡単に必要なパッケージをインストールすることができます。

下記のコマンドを実行して最新版のHomebrewをインストールします。

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

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

brew –version

インストールが出来たら、下記のようにHomebrewのバージョンが確認できます。
Homebrew 2.2.0
Homebrew/homebrew-core (git revision 43ad0; last commit 2019-11-30)

Node.jsインストール

React NativeはJavaScriptなのでランタイムとなるNode.jsが必要です。

Node.jsは頻繁にバージョンアップが行われるため、バージョン管理ツールであるnodebrewを利用します。

まず下記コマンドを実行してインストール可能なバージョンを確認します。

nodebrew ls-remote

現時点(2021年7月24日)ではv14.17.3が推奨のバージョンなので、下記コマンドでNode.jsをインストールします。

nodebrew install-binary v14.17.3

Node.jsが問題なくインストールされたら、下記のようにして現在のバージョンを変更します。

nodebrew use 14.17.3

変更が完了したら、下記コマンドでバージョンを確認します。

node -v

最新版であるv14.17.3がインストールされていることが確認できます。

v13.2.0

Node.jsをインストールすると、Node.jsのパッケージ管理ツールであるnpmも一緒にインストールされます。

npmもインストールされたか確認するため下記コマンドを実行します。

npm –version

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

6.13.1

Watchmanインストール

React Nativeではファイルの変更時に自働で再ビルドを行いますが、そのファイル検知のためにWatchmanを利用しています。

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

brew install watchman

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

% watchman –version

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

React Native CLIインストール

React Native CLIはExpoを利用しないプロジェクトでは必須なので、グローバルにインストールします。

npm install -g 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 directory

Xcodeインストール

React NativeでiOSアプリを開発するためにはiOSの開発環境であるXcodeが必要になります。
下記のリンクからアプリストアでXcodeをダウンロードします。

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

CocoaPodsインストール

CocoaPodsはiOSアプリ用のパッケージ管理ツールです。

React Nativeが対応出来ていないネイティブの機能を使いたい時などに必要となります。
パーミッションエラーになるためsudo権限でインストールします。

sudo gem install cocoapods

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

pod –version

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

1.8.4

JDKインストール

React NativeでAndoridアプリを開発するためには、JDK(Java Development Kit)をインストールする必要があります。

下記コマンドを実行してJDKをインストールします。

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk/openjdk/adoptopenjdk8

インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。

java -version

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

java -version
openjdk version “1.8.0_232”
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_232-b09)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.232-b09, mixed mode)

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

javac -version

下記のようにJavaのコンパイラーのバージョンが確認できます。

javac 1.8.0_232

Android Studioインストール

React NativeでAndroidアプリを開発するためにはAndroidの開発環境であるAndroid Studioが必要になります。
下記のリンクからAndroid Studioをダウンロードします。

ダウンロードが完了したら、インストールファイルを実行してAndroid Studioを起動します。

初期設定

Android Studioを起動したら下記のような画面が確認できます。

Nextボタンを押して次の画面に移動します。
次の画面に移動したら下記のようにInstall Typeを設定する画面が表示されます。

Customを選択してNextボタンを押して次の画面に移動します。

次の画面に移動したら、
下記のようにSelect UI Theme画面が表示されます。

自分が好きなテーマを選択してNextボタンを押して次の画面に移動します。

次の画面に移動したら、
下記のようにSDK Components Setup画面が表示されます。

Performance(Intel® HAXM)とAndroid Virtual Deviceを選択してNextボタンを押してインストールを進めます。

次の画面に移動したら、
下記のようにEmulator Settings画面が表示されます。
特に変更はせずにそのままNextボタンを押して次の画面に移動します。

後は画面の案内通りに進め、Finishボタンを押すとAndroid Studioの初期設定が完了します。

Android Studioのインストールが終わったら、
下記のようにAndroid Studioが実行されることが確認できます。

SDK設定

右下のConfigure > SDK Managerを選択して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ボタンを押して次の画面に移動します。

次の画面に移動したら、
上記のようにLicense Agreement画面が表示されます。

全てのLicenseに対してAcceptを選択してFinishボタンを押すと、SDKの設定が完了します。

環境変数設定

次はAndroid Studioの環境変数を設定します。

環境変数を追加するため、ご自身の環境に応じて ~/.zshrc等を開いて下記の内容を追加します。

export ANDROID_HOME=自分のAndroid 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

自分のAndroid SDKのディレクトリの場所がわからない場合は、
Android SDKの設定画面の一番上部の項目で確認できます。

環境変数が設定できたらターミナルを再起動して、
下記コマンドを実行します。

adb

問題なく設定が出来たら、下記のような結果が確認できます。

Android Debug Bridge version 1.0.41
Version 29.0.5-5949299
Installed as /自分のAndroid SDKのディレクトリ/platform-tools/adb

React Nativeアプリの起動を確認

次に下記コマンドでサンプルプロジェクトを作成します。

react-native init SampleApp

iOSの場合

以下のようなnpmコマンドがpackage.jsonに記載されているため、
npm run ios, npm run androidで起動することが出来ます。

“scripts”: {
“android”: “react-native run-android”,
“ios”: “react-native run-ios”,
“start”: “react-native start”,
“test”: “jest”,
“lint”: “eslint .”
},

以下コマンドを実行してiOSシミュレータを起動します。

cd SampleApp
npm run ios

問題なく起動できた場合、下記のような画面が表示されます。

Androidの場合

Androidの場合はエミュレータを先に起動する必要があります。
右下のConfigure > AVD Managerを選択してVirtual Devices画面に移動します。

Create Virtual Device…を押して次の画面に移動します。

初期状態ではPixel2が選択された状態になっていますが、
変更せずそのままNextを押して次の画面に移動します。

Androidのバージョンを選択する画面が表示されるので、
最新のAndroid10をダウンロードします。

ダウンロードが完了したらNextを押して次の画面に移動します。

デバイスの確認画面が表示されます。
特に変更せずそのままFinishを押して完了します。

作成したデバイスの一覧画面が表示されるので、
右側のスタートボタンを押してエミュレータを起動します。

エミュレータが起動できたら下記コマンドを実行します。

npm run android

問題なく実行できた場合、下記のような画面が表示されます。

おわりに

これでReact Nativeの開発環境が整いました。

普通にiOSとAndroidのネイティブアプリの開発を行うと、XcodeとAndroid Studioの設定でまず時間がかかりますが、
React Nativeだとほとんど設定不要で起動まで出来てしまいましたね。

こちらの記事ではReact NativeにTypeScriptを導入して型定義が出来る手順について紹介しています。


ReactNativeでのアプリ開発を外注してみるのはいかがでしょうか。 dehaソリューションズではオフショア開発によって低コストで迅速な開発をサポートしています。

ReactNativeに関して詳しくお話を聞きたい方、開発相談や無料お見積りをしたい方はこちらからご気軽にお問い合わせください。

▼ dehaソリューションへの簡単見積もりの依頼はこちら

Mai Tran

Recent Posts

【2034年まで】生成AIチャットボットの日本市場規模は3,300億円超へ予測

生成AIチャットボット市場は、近年のAI技術の進化とともに急速な成長を遂げており、日本においても例外ではありません。 特に、企業のデジタルトランスフォーメーション(DX)の進展と、顧客対応の高度化・効率化ニーズの高まりを背景に、導入が加速しています。 本日はそんな生成AIチャットボットの日本市場規模について、現状とこれからの予測についてお伝えしていきたいと思います。 生成AIチャットボットが気になる方 生成AIチャットボットの市場規模を知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AIチャットボットの日本市場規模がわかるのはもちろん、その要因もわかりますよ。 ​​日本における生成AIチャットボット市場の現状と将来予測 日本のチャットボット市場全体の規模を見ると、2025年時点で約4億9,430万米ドル(約700億円規模)とされており、これが2034年には22億6,370万米ドル(約3,300億円超)に達すると予測されています。 これは年平均成長率(CAGR)17.90%という非常に高い成長率であり、今後10年弱で約4〜5倍に拡大する計算です。 この市場成長の背景には、単なるチャットボットから「生成AIチャットボット」への進化があります。 従来のルールベース型チャットボットは、あらかじめ設定されたシナリオに基づいて応答するものでありましたが、生成AIの導入により、より自然で柔軟な対話が可能となりました。 これにより、顧客満足度の向上だけでなく、問い合わせ対応の自動化率の向上、さらには人件費削減といった経済的メリットも期待されています。 また、日本の生成AI市場全体も急速に拡大しており、2025年に約59億ドル規模であった市場は、2034年には約578億9,000万ドルに達すると予測されています。 このような大きな成長トレンドの中で、生成AIチャットボットは中核的なユースケースの一つとして位置付けられています。 グローバル市場の動向も日本市場に強く影響を与えています。…

3 hours ago

クラウド型とオンプレミス型の生成AIチャットボットの違い

近年、企業のDXが加速する中で、生成AIチャットボットの導入は急速に広がりを見せています。 顧客対応の自動化や業務効率化、さらには新たなユーザー体験の創出といった観点から、多くの企業がその活用に注目しています。 しかし、いざ導入を検討する段階になると、多くの企業が直面するのが「どのような形態で導入すべきか」という課題です。 この記事では、まず生成AIチャットボットの基本構造と進化の背景を整理した上で、クラウド型とオンプレミス型それぞれの特徴やメリット・デメリットを詳しく解説します。 AIチャットボットに興味がある方 クラウド型とオンプレミス型の生成AIチャットボットについて知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばクラウド型とオンプレミス型の生成AIチャットボットの違いがわかるのはもちろん、企業がどのような観点で最適な方式を選択すべきか、さらに今後の技術動向もわかりますよ。 (more…)

1 week ago

【2025-2026最新】オフショア市場の変化と契約形態の新たなスタンダード

近年、IT業界における開発体制は大きな転換期を迎えています。 特にオフショア開発は、かつての「コスト削減のための外注」という位置づけから、企業の開発戦略を支える重要な仕組みへと進化しているのです。 2025年の市場動向を見ると、オフショア開発の目的や契約形態、案件規模、発注先国など、さまざまな要素に変化が見られます。 この記事では、2024年と2025年の調査データをもとに、オフショア開発市場の変化を整理しながら、2026年以降のオフショア開発の新たなスタンダードについて解説します。 オフショア開発が興味がある方 開発効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば、企業がこれからオフショア開発を導入・拡大していくうえで、どのようなポイントを押さえるべきかを明らかになりますよ。 (more…)

2 weeks ago

コストと品質のベストバランスはどこか?今、最も「安定」しているオフショア拠点

オフショア開発は、かつては「開発コストを下げるための手段」として利用されるケースが多く見られました。 国内エンジニアの人件費が高騰する中、海外のエンジニアリソースを活用することでコスト削減を実現するというシンプルな目的が中心だったのです。 しかし近年では、オフショア開発の位置づけは大きく変化しています。 この記事ではそんなオフショア開発の変化に着目し、オフショア開発のコストと品質のベストバランスについて紐解きます。 オフショア開発に興味がある方 オフショア拠点をお探しの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発のコストと品質について、どんなバランスが良いのかがわかるのはもちろん、安定したオフショア拠点が丸わかりですよ。 オフショア開発の現在地:コスト削減だけの時代は終わった 現在のオフショア開発は、単なるコスト削減ではなく「開発リソースの確保」や「開発スピードの向上」「グローバル開発体制の構築」など、より戦略的な目的で導入されるケースが増えています。 IT人材不足が深刻化する日本において、国内だけでエンジニアを確保することが難しくなっているため、海外人材の活用は企業にとって重要な選択肢となっています。 特に中小企業の間では、オフショア開発の活用が再び拡大しています。かつては大規模なシステム開発案件を中心に利用される傾向がありましたが、近年では中規模のプロジェクトやスモールスタート型の導入が増えています。 まずは小さな開発チームからスタートし、プロジェクトの進行に合わせてチームを拡張するという柔軟な運用が主流になりつつあります。 また、開発案件の内容も変化しています。業務系Webシステム開発は依然として主流ですが、近年はAI関連開発や高度な技術領域の案件も増えており、オフショア開発の技術レベルは着実に向上しています。 単純なコーディング作業だけでなく、設計や高度な開発工程を担うケースも珍しくなくなっています。…

3 weeks ago

【オフショア開発の価格高騰】各国の最新コスト動向と今後の展望

近年、IT開発の現場では「オフショア開発のコストが上昇している」という声が多く聞かれるようになりました。 かつてオフショア開発は「低コストで開発できる手段」として広く活用されてきましたが、現在ではその前提が変化しつつあります。 為替環境の変化、各国の人件費上昇、グローバル市場の競争激化などにより、オフショア開発の価格構造は大きく変わり始めています。 一方で、日本国内ではエンジニア不足が深刻化しており、企業は開発リソースを確保するために海外人材の活用を続けざるを得ない状況にあります。 つまり、オフショア開発は「安いから使う」ものから、「必要だから使う」ものへと役割が変化しているのです。 この記事では、オフショア開発の最新動向をもとに、各国のコスト動向、企業の発注傾向、案件内容の変化、契約形態の変化、そして今後の展望について詳しく解説します。 オフショア開発を検討している方 開発効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発のコスト面について最新の情報がわかるのはもちろん、今後の展望もわかりますよ。 (more…)

3 weeks ago

【不動産DX】不動産業界に最適なオークション形式とシステム選定のポイント

不動産業界は、これまで「対面営業」「紙契約」「属人的な価格交渉」といったアナログな手法が中心でした。 しかし近年、デジタル技術の進化と顧客行動の変化により、業界全体でDX(デジタルトランスフォーメーション)が加速しています。 この記事ではそんな不動産業界のDX化において、注目されている「オークション形式」についてどんな特徴があるのかや、システムを選定する際のポイントについて見ていきたいと思います。 DX化をすすめたい企業の方 不動産業界の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば不動産業界におけるオークション形式のポイントや注意点が丸わかりですよ。 不動産DXが求められる背景とオークションモデルの可能性 国土交通省の電子契約解禁やオンライン重要事項説明の普及により、売買・賃貸のプロセスは大きく変わりました。さらに、ポータルサイト依存型の集客モデルから脱却し、より収益性の高い販売手法を模索する動きが強まっています。 そこで注目されているのが「オークション形式」です。 従来の不動産取引は「売主が価格を提示し、買主が交渉する」という相対交渉モデルが一般的でした。 しかし、オークションモデルでは市場原理をより明確に反映させることが可能です。需要が集中するエリアや希少物件では価格が自然に上昇し、売主にとっては最大利益を得られる可能性があります。 また、オークション形式は透明性の向上にも寄与します。 価格決定のプロセスが明確になり、「なぜこの価格になったのか」という説明責任を果たしやすくなります。 これはコンプライアンス強化が求められる現代において大きな利点です。…

1 month ago