🫣

Web開発者のためのExpo入門ガイド

2025/10/09に公開

 Expoを一言で表すとExpoは、JavaScriptでiOSとAndroidのネイティブアプリを作れるようにするプラットフォームです。Web開発の知識をそのまま活かして、モバイルアプリ開発に挑戦できます。

 Web開発者の視点から見たExpo
 Expoが解決する課題モバイルアプリを作ろうとすると、通常は以下のような障壁があります。
iOSアプリにはSwift/Objective-C、AndroidにはKotlin/Javaという異なる言語が必要

2つのコードベースを別々に管理しなければならない
XcodeやAndroid Studioといった重いIDEの習得が必要
アプリのビルドにはMacが必須（iOS向けの場合）
Expoはこれらの問題を解決します。あなたがすでに知っているJavaScript/TypeScriptとReactの知識だけで、両プラットフォームのアプリを1つのコードベースから作れるのです。

 Expoの立ち位置Expoを理解するには、いくつかの技術の関係性を知る必要があります。
React Native（基盤技術）
    ↓
Expo（React Nativeをラップしたフレームワーク）
    ↓
あなたのアプリ
React Nativeは、JavaScriptでネイティブアプリを作るための基盤技術です。Facebookが開発しました。
Expoは、そのReact Nativeをさらに使いやすくしたフレームワークです。設定を自動化し、開発体験を改善し、便利なツールを提供します。
Webフレームワークで例えると？
React Native = React
Expo = Next.js や Create React App
みたいな感じですかね？

 なぜExpoが優れているのかReact Nativeを直接使うこともできますが、Expoを使うと以下のメリットがあります。
1. セットアップが簡単
npx create-expo-app my-app
cd my-app
npx expo start
たったこれだけで開発を始められます。複雑な設定ファイルは不要です。
2. クラウドビルド

通常、iOSアプリをビルドするにはMacとXcodeが必要ですが、Expoではクラウド上でビルドできます。WindowsやLinuxでもiOSアプリを作れます。
3. 即座にテスト可能

コードを書いたら、スマホのExpo Goアプリでスキャンするだけで実機テストができます。開発者メニューからチームメンバーにもすぐ共有できます。
4. 豊富なAPI

カメラ、位置情報、プッシュ通知など、よく使う機能がパッケージとして用意されています。複雑なネイティブコードを書く必要がありません。
5. OTA（Over-The-Air）アップデート

JavaScriptの変更なら、アプリストアの審査を待たずにユーザーに配信できます。

 Expoで作るアプリの仕組み
 コードの書き方Expoのコードは、Reactに似ています。ただし、HTMLタグの代わりにReact Nativeのコンポーネントを使います。
Webの場合：
function App() {
  return (
    <div className="container">
      <h1>こんにちは</h1>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
}
Expoの場合：
function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>こんにちは</Text>
      <Pressable onPress={handleClick}>
        <Text>クリック</Text>
      </Pressable>
    </View>
  );
}
見た目は似ていますが、<div>が<View>に、<h1>が<Text>になっています。

 スタイリングの違いWebではCSSを使いますが、ExpoではJavaScriptオブジェクトでスタイルを記述します：
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});
Flexboxは使えますが、CSS GridやFloatは使えません。基本的にはFlexboxだけでレイアウトを構築します。

 1つのコードで複数プラットフォームExpoの最大の魅力は、約95%のコードをiOSとAndroidで共有できることです。
残りの5%は、プラットフォーム固有の調整が必要な部分です。
import { Platform } from 'react-native';

const styles = {
  container: {
    // iOSとAndroidで影の表現方法が異なる
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
      },
      android: {
        elevation: 5,
      },
    })
  }
};
このように条件分岐を使えば、プラットフォームごとの違いに対応できます。

 Expoの2つの開発モードExpoには、開発の段階や要件に応じて2つのモードがあります。

 1. Expo Go（管理された環境）最も簡単な方法です。Expoが提供する「Expo Go」というアプリ内で、あなたのコードが動きます。
メリット：
セットアップが超簡単
QRコードをスキャンするだけでテストできる
初心者に最適
デメリット：
Expoが用意した機能しか使えない（事前にパッケージ化されたネイティブモジュールのみ）
カスタムのネイティブコードは追加できない
向いているケース：
プロトタイプ作成
学習段階
Expoの標準機能だけで十分なアプリ

 2. 開発ビルド（カスタマイズ可能）あなた専用のカスタマイズ版Expo Goを作ります。expo-dev-clientライブラリを含んだデバッグビルドです。
メリット：
任意のネイティブライブラリを追加できる
より高度なカスタマイズが可能
本番に近い環境でテストできる
デメリット：
ビルドに時間がかかる
セットアップがやや複雑
向いているケース：
本番リリース予定のアプリ
Expoにない機能が必要な場合
パフォーマンスの最適化が必要な場合

 アプリのライフサイクルExpoでアプリを作ってリリースするまでの流れを見てみましょう。

 開発段階
コードを書く：VS Codeなどのエディタで開発

即座にテスト：Expo Goアプリでリアルタイムに確認

デバッグ：Chrome DevToolsのような開発者ツールを使用

 テスト配布段階チームメンバーやテスターに配布する方法は以下。

Expo Go経由：QRコードを共有するだけ

テストビルド：TestFlightやGoogle Play内部テストで配布

 リリース段階
ビルド：Expoのクラウドでビルド（Macは不要）

ストア提出：App StoreとGoogle Playに提出

審査待ち：両ストアの審査を通過

リリース：ユーザーがダウンロード可能に

 リリース後
OTAアップデート：JavaScriptの変更は即座に配信

ストアアップデート：ネイティブコードの変更時のみ必要
この「OTAアップデート」は、Webアプリのように即座にバグ修正や機能追加ができる画期的な仕組みです。

 ExpoとWebの違い：技術的な観点
 環境の違い

項目
Web
Expo


実行環境
ブラウザ
ネイティブアプリ

レイアウト
CSS（Grid, Flexbox）
Flexbox のみ

ナビゲーション
URL ベース
スタックベース

ストレージ
localStorage
AsyncStorage

ネットワーク
fetch（同じ）
fetch（同じ）


 できることの違いWebでできて、Expoでできないこと：
DOM操作
CSS Gridレイアウト
ブラウザ固有のAPI
Expoでできて、Webでできないこと：
デバイスのカメラへの直接アクセス
プッシュ通知（PWAは可能だが制限あり）
ネイティブなパフォーマンス
App Store/Google Playでの配信
オフライン時の完全な機能性

 パフォーマンスの違いExpoで作ったアプリはネイティブコンポーネントを使用します。つまり、JavaScriptで書いたコードが、最終的にはiOSやAndroidのネイティブUIコンポーネントとして描画されます。
これは、Webアプリのように「ブラウザ上で動くJavaScript」とは根本的に異なります。結果として、ネイティブアプリと同等のパフォーマンスとユーザー体験を提供できます。

 Expoが向いているケース・向いていないケース
 Expoが向いているスタートアップのMVP開発
両プラットフォーム対応が必須
開発スピードを重視
チームにモバイル開発の専門家がいない
Webアプリをモバイル化したい
小〜中規模のアプリ

 Expoが向いていない非常に高度なネイティブ機能が必要
既存のネイティブコードベースとの統合
極限までパフォーマンスを追求する必要がある
Expoがサポートしていない特殊なライブラリが必須
ただし、「向いていない」ケースでも、Expoの開発ビルドを使えば多くの場合は対応可能なようです。

 まとめ：Expoとは何かExpoは、Web開発者がモバイルアプリを作るための最短ルートです。
JavaScriptの知識だけで始められる
1つのコードでiOSとAndroidに対応
複雑な環境構築は不要
クラウドで簡単にビルドできる
Web開発のような即座のフィードバック
本格的なネイティブアプリが作れる
もしあなたがReactを使えるなら、今日からExpoでモバイルアプリ開発を始められます。まずは気軽にExpo Goで試して、必要に応じてより高度な機能に進んでいけばいいのです。
Expoは、モバイルアプリ開発のハードルを大きく下げ、Web開発者にとってのモバイルの世界への架け橋となる、そんな存在なのです。

 参考URLExpo公式ドキュメント: https://docs.expo.dev/
Expo公式サイト: https://expo.dev/
React Native公式ドキュメント: https://reactnative.dev/
Expo Go vs Development Builds: https://expo.dev/blog/expo-go-vs-development-builds
Development Builds Introduction: https://docs.expo.dev/develop/development-builds/introduction/
Create your first app: https://docs.expo.dev/tutorial/introduction/
EAS Tutorial: https://docs.expo.dev/tutorial/eas/introduction/
React Navigation Documentation: https://reactnavigation.org/
Expo Discord: https://chat.expo.dev/
Expo Forums: https://forums.expo.dev/
Expo Changelog: https://expo.dev/changelog

項目	Web	Expo
実行環境	ブラウザ	ネイティブアプリ
レイアウト	CSS（Grid, Flexbox）	Flexbox のみ
ナビゲーション	URL ベース	スタックベース
ストレージ	localStorage	AsyncStorage
ネットワーク	fetch（同じ）	fetch（同じ）

Expoを一言で表すと

Web開発者の視点から見たExpo

Expoが解決する課題

Expoの立ち位置

なぜExpoが優れているのか

Expoで作るアプリの仕組み

コードの書き方

スタイリングの違い

1つのコードで複数プラットフォーム

Expoの2つの開発モード

1. Expo Go（管理された環境）

2. 開発ビルド（カスタマイズ可能）

アプリのライフサイクル

開発段階

テスト配布段階

リリース段階

リリース後

ExpoとWebの違い：技術的な観点

環境の違い

できることの違い

パフォーマンスの違い

Expoが向いているケース・向いていないケース

Expoが向いている

Expoが向いていない

まとめ：Expoとは何か

参考URL

Discussion