React NativeはJavaScriptのコードのみでiOSとAndroid両方のアプリを開発することができます。
JavaScriptの経験はあるが、アプリ開発の経験は無いというエンジニアにはとても便利なツールと言われています。
この記事ではこれからReact Nativeを使ってアプリを開発したい方を対象に、その環境構築の手順を紹介していきます。
これらに当てはまる方におすすめの記事となっています。これを読めばReact Nativeの環境構築の方法がまるわかりですよ。
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)
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
React Nativeではファイルの変更時に自働で再ビルドを行いますが、そのファイル検知のためにWatchmanを利用しています。
brewでWatchmanをインストールするためのコマンドを実行します。
brew install watchman
インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。
% watchman –version
インストールが出来たら、下記のようにWatchmanのバージョンが確認できます。
4.9.0
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
React NativeでiOSアプリを開発するためにはiOSの開発環境であるXcodeが必要になります。
下記のリンクからアプリストアでXcodeをダウンロードします。
XcodeをインストールしたらCommand Line Toolsを設定する必要があります。
Xcodeを実行して上部のメニューでXcode > Preferences > Locationsを押して、
Command Line Toolsが設定されているか確認します。
CocoaPodsはiOSアプリ用のパッケージ管理ツールです。
React Nativeが対応出来ていないネイティブの機能を使いたい時などに必要となります。
パーミッションエラーになるためsudo権限でインストールします。
sudo gem install cocoapods
インストールが完了したら下記コマンドを実行してインストールが出来たか確認します。
pod –version
問題なくインストールが出来たら、下記のようにCocoaPodsのバージョンが確認できます。
1.8.4
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
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が実行されることが確認できます。
右下のConfigure > SDK Managerを選択してSDK設定画面に移動します。
上記のような画面が表示されたら、
右下のShow Pacakge Detailsを選択します。そしてリストの中から下記の内容を探して選択します。
全て選択したら右下の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 init SampleApp
以下のような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の場合はエミュレータを先に起動する必要があります。
右下の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ソリューションへの簡単見積もりの依頼はこちら
製造業を取り巻く環境は、グローバル競争の激化、サプライチェーンの複雑化、そしてデジタル化の加速により大きく変化しています。 その中でERP（統合基幹業務システム）は、単なる業務管理ツールではなく、経営の意思決定を支える中核システムへと進化しています。 特に2026年においては、「クラウド化」「AI活用」「グローバル対応」「生産現場との連携」が重要な選定ポイントとなっています。 ERPは企業の成長戦略そのものに直結するため、自社の規模・業種・将来展望に適したシステム選びが不可欠です。 この記事では、製造業向けの代表的なグローバルERPを10製品厳選し、それぞれの特徴を解説します。 グローバルERPシステムが気になる方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば主要なグローバルERPシステムが丸わかりですよ。 IFS ERP（IFS Cloud） IFS Cloudは、製造業に加えて設備管理やサービス業務まで一体的に管理できる統合ERPです。 特に「アセット集約型製造業」や「プロジェクト型製造」に強みを持っています。…
ソフトウェア開発において品質の確保は単なる技術的課題ではなく、企業の信頼性や顧客満足度に直結する重要な要素です。 その中核を担うのがSQA（Software Quality Assurance：ソフトウェア品質保証）です。 SQAとは、開発プロセス全体を通じて品質を計画的に作り込み、維持・向上させるための活動を指します。 この記事ではそんなSQA（ソフトウェア品質保証）について、その概要や役割などを紹介していきます。 SQA（ソフトウェア品質保証）が気になる方 品質管理に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばSQA（ソフトウェア品質保証）の特徴がわかるだけでなく、その重要性が丸わかりですよ。 SQA（ソフトウェア品質保証）とは SQA（ソフトウェア品質保証）とは、ソフトウェア開発において品質を計画的かつ継続的に確保するための活動全般を指します。 単に完成した製品の不具合を検出するテスト工程だけでなく、開発プロセス全体に関与し、品質を作り込む仕組みを整えることが重要な役割です。 具体的には、開発標準の策定や遵守状況の確認、レビューや監査の実施、品質指標の設定と分析、リスクの早期発見と対策などが含まれます。 これにより、開発の初期段階から問題の発生を未然に防ぎ、手戻りやコスト増大を抑えることが可能になります。…
概要 IFS Cloud におけるMigration Job（マイグレーションジョーブ）は、カットオーバーフェーズにおける最重要ボトルネックである。本稿では、実プロジェクトから抽出した知見をもとに、ステージングアーキテクチャ・トランザクション管理・冪等性設計・大容量データ処理・自動アラートの5領域にわたる実践的設計手法とトラブルシューティング戦略を体系的に解説する。適切に設計されたマイグレーションは単なるデータ移送を超え、監査可能性と再現性を備えた運用基盤となる。 (more…)
近年、システム開発や製造業、さらにはサービス業においても「品質」の重要性がますます高まっています。 その中で注目されているのが「PQA（プロセス品質保証）」という考え方です。 従来の品質管理が「成果物の品質」を中心にしていたのに対し、PQAは「プロセスそのものの品質」を保証することに重点を置きます。 この記事では、PQAの基本概念と、プロジェクト成功にどのように寄与するのか、さらに導入のメリットについて解説します。 PQA（プロセス品質保証）について知りたい方 製造業やシステム開発をしたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばPQA（プロセス品質保証）の概要やメリットなども丸わかりですよ。 (more…)
生成AIチャットボット市場は、近年のAI技術の進化とともに急速な成長を遂げており、日本においても例外ではありません。 特に、企業のDXの進展と、顧客対応の高度化・効率化ニーズの高まりを背景に、導入が加速しています。 本日はそんな生成AIチャットボットの日本市場規模について、現状とこれからの予測についてお伝えしていきたいと思います。 生成AIチャットボットが気になる方 生成AIチャットボットの市場規模を知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AIチャットボットの日本市場規模がわかるのはもちろん、その要因もわかりますよ。 (more…)
近年、企業のDXが加速する中で、生成AIチャットボットの導入は急速に広がりを見せています。 顧客対応の自動化や業務効率化、さらには新たなユーザー体験の創出といった観点から、多くの企業がその活用に注目しています。 しかし、いざ導入を検討する段階になると、多くの企業が直面するのが「どのような形態で導入すべきか」という課題です。 この記事では、まず生成AIチャットボットの基本構造と進化の背景を整理した上で、クラウド型とオンプレミス型それぞれの特徴やメリット・デメリットを詳しく解説します。 AIチャットボットに興味がある方 クラウド型とオンプレミス型の生成AIチャットボットについて知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばクラウド型とオンプレミス型の生成AIチャットボットの違いがわかるのはもちろん、企業がどのような観点で最適な方式を選択すべきか、さらに今後の技術動向もわかりますよ。 (more…)