Expo Routerとは？
前述の通り、React Nativeには画面遷移（ナビゲーション）機能が標準で備わっていません。そこでExpoエコシステムが提供する「Expo Router」が、画面遷移の実装を大幅に簡素化する強力なライブラリとして注目されています。
Expo Routerの最大の特徴は、ファイルベースルーティングを採用していることです。これは、ファイルシステムの構造がそのままアプリの画面構造になるという直感的な仕組みです。
例えば、appディレクトリ内にhome.jsというファイルを作成すると、自動的に/homeというパスでアクセスできる画面が定義されます。複雑なルーティング設定を記述する必要がなく、ファイル配置だけで画面構造を表現できるのです。
Expo Routerは以下のような特徴を備えています：
- 宣言的なAPI：コードの可読性が高く、画面遷移のロジックが理解しやすい
- 自動的なアニメーション：標準的な画面遷移アニメーションが自動的に適用される
- ネイティブスタック対応：iOSとAndroidそれぞれのネイティブなスタックナビゲーションを利用
- 型安全なナビゲーション：TypeScriptと組み合わせることで型安全な画面遷移が可能
- Web互換性：モバイルアプリだけでなく、Webアプリケーションとしても動作する
特にWebフレームワーク（Next.jsなど）の開発経験を持つエンジニアにとっては、馴染みやすい設計となっており、React NativeアプリのUI/UX構築をよりシンプルかつ効率的にします。
Expo Routerのセットアップ
Expo Routerをプロジェクトに導入する方法は、新規プロジェクト作成時と既存プロジェクトへの追加時で異なります。
新規プロジェクトの場合
新しいExpoプロジェクトを作成する際に、--templateオプションでdefaultを指定するのが最も簡単です（リスト1）。
$ npx create-expo-app@latest --template default my-router-app $ cd my-router-app
このコマンドを実行すると、Expo Routerが最初から組み込まれたプロジェクトテンプレートが生成されます。必要な設定ファイルや基本的なディレクトリ構造（appディレクトリなど）が自動的に用意されるため、すぐに開発を始められます。
プロジェクトが作成されると、図1のようなディレクトリ構造が生成されます。
この後のサンプルでは不要になるため、今のうちに次のディレクトリは削除しておいてください。
-
app/ -
components/ -
constants/ -
hooks/
appディレクトリはExpo Routerの必須ディレクトリですが、後でまた作るので、今は削除しても構いません。
既存プロジェクトへの導入
すでに存在するExpoプロジェクトにExpo Routerを追加する場合は、以下の手順を実行します。
- 必要なパッケージをインストールする
-
package.jsonのmainエントリポイントを変更する -
app.json（またはapp.config.js）にschemeを設定する
まず、必要なパッケージをインストールします。リスト2のコマンドを実行してください。
$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
次に、リスト3のようにpackage.jsonのmainエントリポイントを変更します。これにより、アプリの起動時にExpo Routerが読み込まれるようになります。
{
// ... 他の設定 ...
"main": "expo-router/entry"
}
これにより、アプリの起動時にExpo Routerが読み込まれるようになります。
続いて、リスト4のようにapp.json（またはapp.config.js）にschemeを設定します。
{
"expo": {
// ... 他の設定 ...
"scheme": "my-app-scheme" // 任意のスキーム名を設定
}
}
schemeは、ディープリンク（アプリ内の特定の画面に直接遷移する機能）などでmy-app-scheme://のようにリンクの先頭で使用されます。任意の文字列を指定できますが、他のアプリと重複しないユニークなものが推奨されます。
これらの手順により、既存のプロジェクトでもExpo Routerを利用する準備が整います。既存プロジェクトへの導入手順や必要な追加パッケージについては、Expo側のバージョンアップによって変更される可能性があるため、最新のドキュメントを確認してください。
