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ソリューションへの簡単見積もりの依頼はこちら
AIや生成AIの導入が急速に進んでいます。しかし、「AIを導入した企業が、そのまま企業価値を高められているか」という問いに対しては、まだ明確に「Yes」とはいえません。 独立行政法人情報処理推進機構（IPA）が2026年7月に公表した「DX動向2026」では、日本企業のAI導入・試験利用が58.0％に達したことが明らかになりました。AI活用そのものは、もはや一部の先進企業だけの取り組みではありません。 一方で、AIによって得られた成果を見ると、「業務が効率化したり迅速化した」が91.6％であるのに対し、「顧客満足度が向上した」は4.5％、「売上や利益が向上した」はわずか3.9％にとどまっています。 つまり、AI導入は進んでいるものの、その成果はまだ「社内の効率化」という内向きの領域に集中しているのです。 この状況を変えるために重要になるのが、AIツールを増やすことだけではありません。AIが企業の中核業務や顧客接点、データ活用まで入り込めるよう、既存システムそのものを見直すことが必要です。 この記事では「DX動向2026」のデータを読み解きながら、AI活用を企業価値創出につなげるために、なぜレガシーマイグレーションが重要なのか、そしてどのシステムから刷新すべきなのかを解説します。 レガシーマイグレーションについて知りたい方 AIを活用したい方 これらに当てはまる方におすすめの記事となっています。これを読めばレガシーマイグレーションの特徴が丸わかりですよ。 (more…)
「レガシーシステムを刷新したいが、コストや移行リスクが不安」「生成AIをシステム刷新に活用したい」と考える企業が増えています。 2026年は、生成AIを活用して既存システムの解析やコード変換、ドキュメント作成、テストなどを効率化する「モダナイゼーション×AI」が注目されています。 この記事では、AIを活用したモダナイゼーションのメリットや成功のための戦略、失敗を防ぐための注意点について詳しく解説します。 モダナイゼーションが気になる方 モダナイゼーションとAIをどう組み合わせればいいのかわからない方 業務にAIを活用していきたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションとAIの活用方法やポイントが丸わかりですよ。 (more…)
多くの企業では、長年にわたって利用してきた基幹システムや業務システムが、現在も重要な役割を担っています。 一方で、こうした「レガシーシステム」は、技術の老朽化や複雑化、保守人材の不足、外部サービスとの連携の難しさなど、さまざまな課題を抱えています。 こうした状況を受け、企業ではシステムを単純に新しくする「リプレース」だけではなく、クラウドやAPI、データ分析基盤などを活用して、IT環境そのものを現代のビジネスに適した形へ変える「モダナイゼーション」が進んでいます。 本日はそんなモダナイゼーションについて、具体的な手順や活用事例を踏まえて解説していきます。 モダナイゼーションが気になる方 社内のIT人材が不足している方 レガシーシステムの刷新をしたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、レガシーシステム刷新の具体的な手順まで丸わかりですよ。 (more…)
〜IPA『DX動向2026』から読み解く、日本企業のリアルな課題と本質〜 はじめに：69ページの報告書が突きつける問い 独立行政法人情報処理推進機構（IPA）が発表した最新の調査資料『DX動向2026』（有効回答数：1,799社）。本レポートを精読する中で、最も印象的かつ示唆に富んでいたのは、次の現実でした。 「コストを削減することは、新たな売上を生み出すことよりもはるかに容易である」 日本においてDXへの取り組み率は75.7%に達し、過去数年間にわたり高水準で推移しています。もはや「DXに取り組むべきか否か」という議論のフェーズは完全に過去のものとなりました。しかし、その取り組みの内実をデータで精査すると、多くの企業が直面している構造的な課題が浮かび上がってきます。 1. 「守りのDX」の成功と、「攻めのDX」の停滞 DXに取り組んでいる企業のうち、60.8%が「何らかの成果が出ている」と回答しています。しかし、その「成果」の内訳には顕著な偏りが見られます。 業務効率化・コスト削減の成果：70.9% 新規事業創出・売上拡大の成果：わずか17.9% ペーパーレス化や社内業務のデジタル化といった、既存プロセスの効率化（いわゆる「守りのDX」）は順調に進展しています。しかし、製品・サービスの変革やビジネスモデル自体の刷新といった、事業価値を拡張する「攻めのDX」で具体的な成果を上げている企業は2割にも満たないのが現状です。 効率化によるコスト削減はDXの重要な足がかりですが、それ自体がゴールではありません。真の変革は、効率化によって生み出された余力を「新たな事業機会の創出」へ再投資することで初めて達成されます。 2. 投資拡大の裏にある「投資対効果（ROI）の不可視性」 レポートが示すもう一つの注目すべきデータは、投資と効果測定のギャップです。…
企業の業務を支える基幹システムや業務システムは、長年にわたって使い続けることで、企業独自の業務ノウハウが蓄積される一方、システムの老朽化や複雑化が進みやすくなります。 「古いシステムを刷新したいが、業務を止めることはできない」「既存システムに詳しい担当者が退職し、保守が難しくなっている」「DXを推進したいものの、既存システムが足かせになっている」といった課題を抱える企業も少なくありません。 こうした問題を解決するための重要な取り組みが「モダナイゼーション」です。 モダナイゼーションは、単純に古いシステムを新しいものへ置き換えるだけではありません。既存システムが持つデータや業務ロジック、ノウハウを活かしながら、現在のビジネス環境に適したIT基盤へと刷新していく考え方です。 この記事では、モダナイゼーションの基本的な意味からDXとの違い、代表的な刷新手法、AIを活用した進め方、実施手順、成功させるためのポイントまで詳しく解説します。 モダナイゼーションについて知りたい方 古いシステムを刷新したい方 DX化をすすめたい方 これらに当てはまる方におすすめの記事となっています。これを読めばモダナイゼーションについてわかるのはもちろん、DX化との違いまで丸わかりですよ。 (more…)
「AIを業務に取り入れたいけれど、導入コストが気になる」「どのようなAIツールを選べばよいのかわからない」「補助金を使ってDXを進めたい」――このような悩みを抱える中小企業・小規模事業者は少なくありません。 そこで活用を検討したいのが、2026年度の「デジタル化・AI導入補助金」です。 従来の「IT導入補助金」から名称が変更され、2026年度はAI活用を含むデジタル化をより意識した制度となっています。 業務効率化や生産性向上につながるITツールの導入費用を支援することで、中小企業のDXを後押しする制度です。 この記事では、2026年度のデジタル化・AI導入補助金について、制度の概要から申請スケジュール、AI活用の具体例、申請時の注意点までをわかりやすく解説します。 AI導入を検討している方 IT導入補助金を申請したい方 これらに当てはまる方におすすめの記事となっています。これを読めば2026年度の「デジタル化・AI導入補助金」の詳細がわかるだけでなく、具体的な申請方法も丸わかりですよ。 (more…)