React Native と Expo は、JavaScript または TypeScript を使って iOS と Android のモバイルアプリを開発するうえで、最速かつ実用的な手段のひとつだ。クロスプラットフォームアプリを、複雑なネイティブのビルドチェーンと格闘することなく公開したい場合、このスタックは開発スピードを加速しつつ、必要に応じて高度なワークフローへ拡張する余地も残してくれる。

本ガイドでは、これらの技術の概要、重要性、セットアップ方法、ビルド、テスト、デプロイまでのプロセスを整理する。

React Native とは何か

React Native は、React の概念を使ってネイティブモバイルアプリを構築するためのフレームワークだ。JSX でコンポーネントを書き、状態管理を行い、宣言的 UI モデルを採用する点は同じだが、最終的にレンダリングされるのは HTML ではなくネイティブコンポーネントとなる。

主な特徴:

• クロスプラットフォーム対応：1つのコードで iOS と Android をカバー
• ネイティブパフォーマンス：UI コンポーネントが WebView ではなくネイティブ要素に対応
• 豊富なエコシステム：強力なコミュニティとサードパーティライブラリ

Expo の役割

Expo は React Native の上に構築されたツール群とサービス群で、複雑なネイティブ設定を抽象化し、開発とリリースに集中できるようにする。

Expo が便利な理由:

• ネイティブ環境セットアップ不要：基本開発では Xcode や Android Studio 不要
• Expo Go：実機に即時ロード可能
• 管理ワークフロー：一般的な機能を網羅した“バッテリー同梱”の開発体験
• OTA アップデート：ストア審査なしで更新を配信
• ビルドサービス：iOS / Android バイナリをクラウドで生成

必要になれば、Expo は “EAS + prebuild” によるネイティブコードへの段階的移行にも対応する。

必要条件

事前に以下を準備しておく:

• Node.js（LTS）
• npm または yarn
• Expo Go アプリ（iOS App Store / Google Play）
• 基本的な React の知識

Step 1: Expo CLI のインストール

Expo CLI はプロジェクトの開発、実行、バンドル、ビルドを管理する。

npm install -g expo-cli

Step 2: 新規プロジェクトの作成

以下を実行してプロジェクトを生成:

expo init my-mobile-app

テンプレート（TypeScript 版または JavaScript 版）を選択する。即動作可能な React Native アプリが生成される。

移動:

cd my-mobile-app

Step 3: 開発サーバーの起動

ローカルでアプリを実行:

npm start

Expo Dev Tools がブラウザで開く。Expo Go で QR コードを読み込めば実機に即時ロードされる。

Step 4: プロジェクト構造の理解

一般的な Expo プロジェクトは以下のようになる:

my-mobile-app/
├── App.js             # ルートコンポーネント
├── package.json
├── app.json           # Expo 設定
└── assets/            # 画像、フォント、アイコン

App.js にすべてを書くこともできるし、規模に応じてファイルを分割できる。

Step 5: 最初の画面を作る

シンプルなコンポーネント例:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Hello, React Native + Expo</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  header: {
    fontSize: 24,
    fontWeight: '600'
  }
});

React Native は Flexbox レイアウトを採用し、StyleSheet オブジェクトを使える。View、Text、Image、TouchableOpacity など多くのコンポーネントが標準搭載されている。

Step 6: ナビゲーションの追加

業界標準の React Navigation を使用する。

インストール:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

スタックナビゲーション:

npm install @react-navigation/native-stack

基本例:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Step 7: Expo API を使ったデバイス機能利用

Expo は以下のような高レベル API を提供する:

• カメラ
• センサー
• ファイルシステム
• プッシュ通知
• 位置情報
• 画像選択

例：画像選択

npm install expo-image-picker

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync();
  if (!result.canceled) {
    console.log(result.assets[0].uri);
  }
};

Step 8: 本番用のビルド

Expo Application Services (EAS) でバイナリを生成する。

npm install -g eas-cli
eas login
eas build --platform android
eas build --platform ios

Expo はクラウドでビルドを行い、.aab や .ipa ファイルを生成する。これらは Google Play や App Store に提出可能。

Step 9: OTA アップデートの配信

ストア審査なしで更新を適用できる:

expo publish

ユーザーは次回起動時に更新を受け取る。

Bare ワークフローを使うべきタイミング

Expo の managed workflow でほとんどのケースは対応可能だが、カスタムネイティブモジュールが必要な場合は bare workflow に移行できる。

expo prebuild

これで iOS / Android フォルダが生成され、ネイティブコードの変更が可能になる。

React Native と Expo は、モバイルアプリ開発において強力かつ拡張性の高い基盤を提供する。Expo の managed workflow は開発を加速し、テストを簡略化し、ネイティブの複雑さを大幅に削減し、デプロイまでのプロセスを短縮する。スピードと将来の柔軟性の両方を求める個人開発者やチームにとって、このスタックは最有力の選択肢のひとつだ。

アプリが必要ですか？

プロジェクトにアプリが必要ですか? 私たちに作成させてください!

お問い合わせ