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エージェントの導入を進め、多くの現場で業務の質とスピードの両立を実現することができました。 この記事では、実際に弊社が取り組んだAIエージェントの活用事例を紹介しながら、AI導入によるメリットとその可能性についてご紹介いたします。 AIエージェントが気になる方 AIエージェントの事例が知りたい方 社内の人材不足にお悩みの方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの成功事例が丸わかりですよ。 (more…)
近年、業務効率化や顧客対応の高度化を目的として、企業や自治体、教育機関など多くの組織で「AIエージェント」の導入が進んでいます。 AIエージェントとは、人工知能を活用して自動的に応答や処理を行うシステムの総称で、チャットボットやバーチャルアシスタント、RPA（Robotic Process Automation）などが含まれます。 しかしながら、AIエージェントの導入には多くの期待が寄せられる一方で、現場ではさまざまな課題に直面するケースも少なくありません。 この記事では、AIエージェント導入によくある課題とその解決方法について、具体的に解説していきます。 AIエージェントに興味がある方 AIエージェントの導入に不安がある方 社内の人材不足にお悩みの方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの特徴がわかるのはもちろん、うまく活用するための方法もわかりますよ。 (more…)
近年、AI技術の進化により、私たちの生活やビジネスのあらゆる場面で人工知能（AI）が活用されるようになっています。 その中でも注目されているのが「AIエージェント」です。音声アシスタント、チャットボット、カスタマーサポートなど、さまざまな場面で導入が進むAIエージェントは、業務効率化やユーザー体験の向上に大きな可能性を秘めています。 この記事では、AIエージェントの基本的な定義から、その特徴、導入メリット、さらに活用事例や今後の展望までを網羅的に解説します。 AIエージェントが気になる方 社内の人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAIエージェントの特徴や具体的な活用メリットがわかりますよ。 (more…)
AI（人工知能）は、世界各国の経済成長を支える基盤技術として注目されています。 とりわけベトナムでは、政府が国家戦略としてAIの導入を明確に位置づけ、経済、教育、公共行政、スタートアップ育成まで多岐にわたる分野で取り組みを強化しています。 この記事では、「ベトナムAI経済2025年」レポートをもとに、マクロ経済との接続性、国家戦略、セクター別の導入状況、スタートアップ・投資動向、そして将来の展望について解説します。 ベトナムのAIが気になる方 最新のベトナムの経済動向が気になる方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAIがもたらすベトナム経済の進化と、その背景にある政策と市場構造を総合的に理解することができます。 (more…)
近年、開発現場では「品質」「スピード」「セキュリティ」のすべてを高次元で実現することが求められています。 特に、高度な専門性や情報セキュリティが重要視される分野では、国内同様の品質と体制が前提となります。 そんな中、「No-BrSEオフショア開発」をご紹介します。 これは従来のオフショア開発におけるブリッジSE（BrSE）を介さず、日本語で直接やり取りができる完全日本語対応のラボ型開発チームを導入するモデルです。 この記事ではそんなNo-BrSE開発の特徴、メリット、適した活用シーンまでを詳しく解説します。 No-BrSEオフショア開発が気になる方 社内のIT人材が不足している方 開発の品質を高めたい方 これらに当てはまる方におすすめの記事となっています。これを読めばNo-BrSEオフショア開発のメリットや活用方法が丸わかりですよ。 (more…)
近年、開発コスト削減やリソース確保を目的として「オフショア開発」を導入する企業が増えています。 その中でも開発スタイルとして注目されているのが「請負型（受託型）」の契約形態です。 この記事では、請負型の基本的な概要から、メリット・デメリット、向いているプロジェクトの特徴、活用シーンまでを徹底解説します。 オフショア開発が気になる方 請負型について気になる方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発の請負型について メリットデメリットがわかるだけでなく活用できるシーンまで丸わかりですよ。 (more…)