📱
Expo ではじめる React Native アプリ開発

2025/04/15に公開
 はじめにこんにちは、クラウドエース株式会社の第 3 開発部所属の有馬です。
最近ネイティブアプリ開発に興味を持ち、React Native を利用してクロスプラットフォーム開発ができる Expo というフレームワークを使用してみました。

比較的簡単に開発が進められるので本記事にて紹介します。

 Expo とはExpoは、React Native ベースのクロスプラットフォームアプリ開発向けのフレームワークです。

 Expo の特徴
ネイティブ開発環境が不要
Managed Workflow を利用する場合、Android Studio や Xcode をインストールしなくても開発可能
スマホ実機にインストールした「Expo Go」アプリで動作確認でき、エミュレーターやシミュレーターが不要
マルチプラットフォーム対応
iOS / Android / Web を React Native のコードひとつで開発・管理 できる
ホットリロードによる素早い開発サイクル
コード変更のたびに、Expo Go 上でリアルタイムに更新内容を確認可能
OTA（Over-The-Air）アップデート
アプリストアの審査なしで、細かな修正やデザイン変更を即時にリリース可能（EAS Update）
豊富なネイティブ API パッケージ
カメラ、位置情報、プッシュ通知など、よく使われるネイティブ機能を標準ライブラリで簡単に扱える

 Expo を触ってみる
 事前準備

 1. Expo Go アプリをインストール
Expo Go を使用することで、お手持ちの Android、iOS 端末から QR コードを読み込むだけで簡単に動作確認ができます。
iOS 版

App Store - Expo Go
Android 版

Google Play - Expo Go

 環境構築

 1. Node.js のインストール
Expo は JavaScript で動作するため、Node.js をインストールします。

 2. Expo CLI のインストール
次に、Expo CLI をグローバルにインストールします。
$ npm install --global expo-cli
インストール後、以下のコマンドで確認します。
expo --version

 3. Expo プロジェクト作成
以下のコマンドを実行して、新しい Expo プロジェクトを作成します。
$ npx create-expo-app my-expo-app

 4. ローカル環境立ち上げ
作成したプロジェクトのディレクトリに移動し、開発サーバーを起動します。
$ cd my-expo-app
$ npx expo start

 デバイスで動作確認

 1. Expo Go アプリを開く
アプリを開いて、スタート画面から「Scan QR Code」を選択します。

 2. QR コードをスキャンする
Expo CLI が起動した開発サーバーから表示される QR コードをスキャンします。この QR コードは、Expo Go アプリを使ってアプリを直接ロードするためのものです。
QR コードをスキャンすると、アプリが自動的にロードされ、実際のデバイス上で動作を確認できます。これにより、実際の使用環境に近い形でアプリの動作テストが可能です。

 3. 変更を確認
初期状態では不要なファイルが含まれているため、コマンドで削除します。

以下のコマンドを実行すると、app ディレクトリ内の既存ファイルが app-example に移動され、新しく index.tsx が作成されます。
$ npm run reset-project
実行後、プロジェクトが整理され、シンプルな構成になります。

 4.動作確認
index.tsx を編集し、画面に表示されるテキストを変更します。
index.ts
import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
+ <Text>Hello World</Text>
- <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

Expo Go で確認すると、変更が反映されていることがわかります。

 Expo を使ってみてこの記事では、React Native を使ったクロスプラットフォーム開発を簡単に始められる Expo について紹介しました。

実際に Expo を使ってみると、「とにかく手軽に開発が始められる」ことを実感しました。

通常、ネイティブアプリを開発するには Android Studio や Xcode のセットアップ、エミュレーターの準備、ビルド環境の構築 などが必要ですが、Expo ではその手間が大幅に削減されます。
Expo を活用することで、ネイティブアプリ開発のハードルが下がり、より気軽にアプリ開発を楽しめることがわかりました。

これから私もさらに Expo を活用していきたいと思いますし、みなさんもぜひ Expo を使ってネイティブアプリ開発に挑戦してみてください！
Discussion

ログインするとコメントできます