セットアップと基本動作
ここまでの解説で、ExpoのWeb対応の基本的な仕組みが理解できたと思います。続いて、実際にWebアプリケーションとして動作させるためのセットアップ手順を確認しましょう。
まずは通常通りにアプリのセットアップを行います（リスト4）。
npx create-expo-app@latest expo-for-web cd expo-for-web
Expo SDK 53以降では、Web関連のパッケージが標準で含まれているため、追加のインストールは基本的に不要です。ただし、一部のプロジェクトでは以下のパッケージが必要な場合があります（リスト5）。
npm install react-dom react-native-web
react-domはReactコンポーネントをDOM要素にレンダリングするために必要で、react-native-webは前述のReact Nativeコンポーネントの代替実装を提供します。最新のExpo CLIで作成したプロジェクトでは、これらのパッケージは最初から含まれています。
Web開発サーバーの起動
Webアプリケーションとして動作確認を行うには、--webオプションを使用してExpo開発サーバーを起動します（リスト6）。
npx expo start --web
このコマンドを実行すると、Expo DevToolsが起動し、自動的にブラウザでWebアプリケーションが開きます。通常はhttp://localhost:8081でアクセスできます（図2）。
図2のように、React NativeコンポーネントがWeb上で正常に表示され、タブナビゲーションも含めて期待通りに動作します。
本番ビルドの実行
Web用の本番ビルドを作成する場合は、exportコマンドを使用します（リスト7）。
npx expo export --platform web
このコマンドを実行すると、dist/ディレクトリ内に静的なWebサイトファイルが生成されます。生成されたファイルは、静的サイトホスティングサービス（Netlify、Vercel、GitHub Pagesなど）で簡単にデプロイできます。
Fast Refreshによる開発体験
Expo WebでもFast Refresh機能が利用できるため、コードの変更が即座にブラウザに反映されます。React Nativeの開発と同様の快適な開発体験を、Web環境でも享受できるのが大きな利点です。特に、コンポーネントの見た目を調整しながら開発する場合、ブラウザの開発者ツールと組み合わせることで、より精密な調整が可能になります。
Expo RouterのWeb対応
さて、初期セットアップした状態のExpoプロジェクトがブラウザで動かせることはわかりましたが、今のところそれだけです。本連載の中でも繰り返しお伝えしてきたように、Expoの魅力は公式サポートされた豊富なモジュール群があってこそですよね。
ご安心ください。豊富とまでは言えないまでも、Expoで提供されているモジュールはWebサポートが進んでいます。例えば、前回までに解説したExpo Routerは、Webプラットフォームでも同様のファイルベースルーティング機能を提供します。これにより、モバイルアプリとWebアプリで一貫したナビゲーション体験を実現できます。
ファイルベースルーティングの共通性
Expo Routerのファイルベースルーティングは、Web環境でも全く同じように動作します。今回のサンプルプロジェクトを例に見てみましょう（リスト8）。
app/ ├── _layout.tsx # ルートレイアウト ├── (tabs)/ │ ├── _layout.tsx # タブレイアウト │ ├── index.tsx # ホームタブ (/) │ └── explore.tsx # 探索タブ (/explore) └── modal.tsx # モーダル画面 (/modal)
この構成は、モバイルアプリでもWebアプリでも同じように機能し、ブラウザのアドレスバーには対応するURLが表示されます。/exploreにアクセスすれば、app/(tabs)/explore.tsxコンポーネントが表示され、/modalにアクセスすれば、app/modal.tsxコンポーネントが表示されます。
Expo Routerは、Next.jsのようなWebフレームワークから着想を得た設計となっており、Web環境では元々の設計思想通りに動作します。特別なWeb対応を行っているのではなく、ファイルベースルーティングやReactコンポーネントによるページ構成が、そのままブラウザの標準的な動作として機能するのです。
静的エクスポートとSEO対応
Web向けの本番ビルドでは、静的なHTMLファイルが生成されるため、SEO（検索エンジン最適化）にも対応しやすくなります。先ほど実行したexpo export --platform webの結果、以下のようなファイル構成でdist/ディレクトリが生成されました（リスト9）。
dist/
├── index.html # ホームページ (/)
├── explore.html # 探索ページ (/explore)
├── modal.html # モーダルページ (/modal)
├── (tabs)/
│ ├── index.html # タブのホーム
│ └── explore.html # タブの探索
├── _sitemap.html # サイトマップ
├── +not-found.html # 404ページ
└── _expo/
└── static/
├── js/ # JavaScriptバンドル
└── css/ # CSSファイル
各ページに対応する個別のHTMLファイルが生成されており、検索エンジンがページを正しくインデックスできる構造になっています。また、Expo Routerの設定により、ページタイトルやメタデータも適切に設定され、ブラウザのタブやSEOに最適化された表示を実現できます。
