Expo✕React Nativeの環境構築を行う【React Native入門】

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

この記事ではReact Nativeを使ってアプリ開発を行っていく方向けに、Expoを利用した環境構築の仕方を紹介していきます。

Expoを利用することで簡単にReact Nativeの環境開発が可能ですよ。

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

  • React Nativeでの開発に興味がある方
  • JavaScriptを勉強していた方
  • React Nativeの環境構築を知りたい方

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

Expoとは

ExpoはReact Nativeのビルドや開発を支援してくれるサービスです。

React NativeではXcodeやAndroid StudioといったiOS/Androidの開発環境を使って、自身でビルドを行う必要がありました。

Expoは公式に「you don’t need Xcode or Android Studio to get your app into people’s hands」と書かれているように、ビルドを担当してくれるので、XcodeやAndroid Studioを触ることがほぼ無くなります。

後述するシミュレーターを起動するためにXcode, Android Studioの構築は必要ですが、最初の構築さえしてしまえば、その後はほとんど意識しないで済むでしょう。

これは開発スピードを確保するために非常に重要な点なので、今からReact Nativeで開発を行う際はExpoを使うのが一般的になっています。

動作環境の用意

  • node v14.13.1
  • expo-cli 3.28.1

本記事は上記環境で動作させています。

nodeは偶数がLTS (Long Term Support)で、執筆時点では14系が最新です。
利用しているバージョン管理ツール (nodenv, nodebrew等)でインストールしておきましょう。

npm install -g expo-cli

nodeが用意できたら、上記コマンドでexpo-cliを入れておきます。

Expoプロジェクトの作成

それではまず次のコマンドでプロジェクトを作成します。

expo init sample-app

コマンドを実行すると以下のような表示になります。

補完が効いたり、typoを防げるのでblank (TypeScript)を選択して、TypeScriptを導入しましょう。
公式サポートしてくれているので非常に楽ですね。

上記のような表示がされれば完了です。これだけで、アプリ開発を始めることができます!

React NativeはiOS/Android両方のアプリを作ることが出来るのが強みですので、
次はそれぞれの仮想端末での実行を試します。

Expo Developer Toolsを起動する

まず以下のコマンドを実行します。

expo start

コマンドを実行すると上記のような画面のExpo Developer Toolsが19002ポートで立ち上がります。

Expo Developer Toolsが担当している役割は以下の通りです。

● Metroを実行してJSファイルをバンドルする (複数のJSファイルを1つにまとめる、JSXを素のJSに変換する等)
● バンドルしたJSファイルを取得し、シミュレーター内のExpo Clientで実行する

また http://localhost:19000/ へアクセスすると、
アイコンやスプラッシュ画面、バンドルしたJSのURL等のExpoアプリの情報を確認することができます。

Expo Client (iOSシミュレーター)で実行する

本記事では「【Mac編】ReactNativeを使って環境構築をする方法は?【JavaScriptのコードのみでアプリ開発】」で構築したXcodeとAndroid Studioの環境があるため、iOSシミュレーターやAndroidエミュレーターが既に用意できている前提になっています。

まだ構築していない方はこちら記事をご覧頂くか、Expoの公式サイトを参考にしてみてください。

次に上記画面の「Run on iOS simulator」をクリックすると、バンドルしたJSファイルが読み込まれ、iOSシミュレーター内のExpo Clientで実行されます。

App.tsxを編集したら以下のようにHello World!がHot Reloadされることを確認しておきましょう。

Expo Client (Androidエミュレーター)で実行する

次は上記画面で「Run on Android device/emulator」を押してみましょう。
バンドルしたJSファイルが読み込まれ、Android Emulator内のExpo Clientで実行されます。

こちらもHot Reloadが動くことを確認しておきましょう。

おわりに

Expoを使わないReact Nativeに比べると、非常に簡単に環境構築できてしまいました。

ネイティブのコードを触ることができないという制約もありますが、大抵の機能は実現できるようにExpoやReact Native公式のコンポーネントが用意されています。

ネイティブを触らない要件に合わせてアプリを作るのがReact Native開発を高速化するコツということですね。


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

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

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


Mai Tran

Recent Posts

【保存版・発注者向け】アプリ開発の方法についてゼロから解説

アプリ開発を検討する企業や個人にとって、最初に直面する課題は「どのようにアプリを作るか」です。 そこで本記事ではアプリ開発について、どのような工程があるのかゼロから徹底解説していきたいと思います。 アプリ開発をしたい方 アプリ開発初心者の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばアプリ開発の効率の良い方法が丸わかりですよ。 アプリ開発に関わるすべての工程や手法を理解することで、発注者としてより良い判断ができ、プロジェクトを円滑に進めることが可能になります。 アプリを開発する4つの方法 スクラッチ開発とは スクラッチ開発とは、既存のテンプレートやツールを使わずに、プログラムのコードをゼロから書いてアプリやシステムを作る開発方法です。 完全に自由な設計ができるため、自社の業務や目的にぴったり合った機能やデザインを実現できます。 たとえば、高度な処理能力が必要なシステムや、他にはない独自の機能を持たせたい場合に最適です。 主なメリット・機能やデザインを自由に設計できる(カスタマイズ性が高い)・処理速度や操作性などのパフォーマンスを最適化しやすい・他社にはない独自機能を実装しやすい 主なデメリット・開発に時間と費用がかかる・高度な技術や専門知識が必要 スクラッチ開発は、「こだわりたいポイントが多い」「長期的に使い続けたい」システムに向いています。反対に、早く・安く始めたい場合は、別の開発手法を検討するのがよいでしょう。…

8 hours ago

チャイナプラスワンとは?製造業だけではなく、IT業界も注目

近年、製造業を中心に広がってきた「チャイナプラスワン(China Plus One、中国+1)」戦略が、IT業界でも注目され始めています。 中国に依存しすぎない経営体制を構築するためのこの動きは、製造業の枠を越え、ソフトウェア開発やITインフラといったデジタル領域にも拡大しています。 この記事では、チャイナプラスワンの概要から背景、IT業界における注目理由、そしてオフショア開発との関係性や活用事例までを詳しく解説します。 チャイナプラスワンについて知りたい方 オフショア開発に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばチャイナプラスワンの概要がわかるだけでなく、今後の展望も分かりますよ。 (more…)

1 day ago

【2025年版】スマホ(iPhone/Android)OS端末シェアランキング(世界と日本市場)

スマートフォン市場におけるOS(オペレーティングシステム)は、ユーザー体験の根幹を担う要素のひとつです。 特に「Android」と「iOS」の二大OSは、長年にわたって競争を続けており、地域によってその勢力図は大きく異なります。 この記事では、2025年4月時点における世界および日本のスマホOSシェアを、StatCounterの最新データをもとに詳しく解説します。 OS端末シェアについて知りたい方 スマホOS別に広告出稿の戦略を立てたい人 国や地域ごとのユーザー属性やシェア構造を把握したい人 これらに当てはまる方におすすめの記事となっています。これを読めば世界と日本のOSシェアの特徴や違いが丸わかりですよ。 (more…)

6 days ago

【2025年版】ハイブリッドアプリ開発のおすすめフレームワークランキング5選

スマートフォンアプリ開発において、iOSとAndroidの両方に対応するハイブリッドアプリは、開発コストや工数を抑えられる点で多くの企業や開発者に選ばれています。 2025年現在、技術の進化によりハイブリッドアプリ開発フレームワークも多様化・高機能化が進み、それぞれの強みを活かす選定が重要になってきました。 この記事ではそんな2025年におすすめのハイブリッドアプリ開発フレームワークをランキング形式で5つご紹介します。 ハイブリットアプリに興味がある方 最新のハイブリットアプリについて知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばハイブリットアプリの最新情報が丸わかりですよ。 (more…)

1 week ago

要件定義とは?オフショア開発で進め方や成功のコツ

システム開発やアプリ開発において、プロジェクトの成功を左右する「要件定義」。 特にオフショア開発では、言語や文化の違いから誤解が生まれやすく、要件定義の質が成果に直結します。 この記事では、要件定義の基本から、オフショア開発での進め方、成功のコツまでを解説します。 オフショア開発に興味がある方 要件定義の仕方について知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発をうまく進めるための要件定義の方法が丸わかりですよ。 (more…)

2 weeks ago

BAとは?オフショア開発での役割、BrSE & ITコミュニケーターとの違いをご紹介

BA(ビジネスアナリスト)とはオフショア開発プロセスにおいて重要な役割を果たします。 彼らは、クライアントと開発チームの間で情報のやり取りを担当し、ビジネスの視点からソフトウェア開発プロジェクトを導きます。 本日はそんなBA(ビジネスアナリスト)について具体的にどう言った特徴があるのかや、BrSE(ブリッジSE)& ITコミュニケーターとの違いについて解説していきます。 BA(ビジネスアナリスト)に興味がある方 オフショア開発に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばBA(ビジネスアナリスト)の具体的な役割が丸わかりですよ。 (more…)

2 weeks ago