Expo Routerで画面遷移を実装しよう――ファイルベースルーティングの基礎

ExpoとEASで始める快適モバイルアプリ開発 第5回

基本的なルーティング

　前述したファイルベースルーティングを実際に体験してみましょう。

　Expo Routerでは、appディレクトリに配置したファイルが自動的に画面として認識され、そのファイル名がURLパスになります。この仕組みを利用すれば、複雑な設定ファイルを作成することなく、直感的に画面構造を設計できます。

　例えば、以下のディレクトリ構造を考えてみましょう：

my-router-app/
├── app/
│   ├── index.js    // ホーム画面 (/)
│   ├── settings.js // 設定画面 (/settings)
│   └── profile/    // プロフィール関連の画面
│       ├── index.js // プロフィール画面 (/profile)
│       └── edit.js  // プロフィール編集画面 (/profile/edit)
└── package.json
（他のファイルは省略）

　こういったファイル構造を作成すると、それぞれのファイルが自動的に以下のURLパスに対応します：

• / → app/index.js （アプリを起動した際に最初に表示されるホーム画面）
• /settings → app/settings.js （設定画面）
• /profile → app/profile/index.js （プロフィール画面）
• /profile/edit → app/profile/edit.js （プロフィール編集画面）

　各ファイルはReactコンポーネントをデフォルトエクスポートすることで、その画面の内容を定義します。それでは、簡単な例として、ホーム画面から設定画面へ遷移するアプリを作ってみましょう。

　まずは、ホーム画面（app/index.js）を作成します（リスト5）。

［リスト5］app/index.js（ホーム画面）

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Link } from 'expo-router';

// (1)
export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>ホーム画面</Text>
      <Text style={styles.subtitle}>
        ようこそ、Expo Routerを使ったアプリへ！
      </Text>
      {/* (2) */}
      <Link href="/settings" style={styles.link}>
        設定画面へ
      </Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    marginBottom: 30,
    color: '#666',
  },
  link: {
    marginTop: 15,
    paddingVertical: 15,
    color: 'blue',
    fontSize: 16,
  },
});

　（1）でデフォルトエクスポートしたコンポーネントが、Expo Routerによって自動的に画面として認識されます。（2）では、後述するLinkコンポーネントを使って、設定画面へのリンクを作成しています。

　続いて、設定画面（app/settings.js）を作成します（リスト6）。

［リスト6］app/settings.js（設定画面）

import React from 'react';
import { View, Text, StyleSheet, Switch } from 'react-native';
import { Link } from 'expo-router';

export default function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>設定画面</Text>
      
      <View style={styles.settingItem}>
        <Text style={styles.settingLabel}>ダークモード</Text>
        <Switch />
      </View>
      
      <View style={styles.settingItem}>
        <Text style={styles.settingLabel}>通知</Text>
        <Switch />
      </View>
      
      <Link href="/" style={styles.link}>ホームに戻る</Link>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
    textAlign: 'center',
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  settingLabel: {
    fontSize: 16,
  },
  link: {
    marginTop: 30,
    paddingVertical: 15,
    color: 'blue',
    fontSize: 16,
    textAlign: 'center',
  },
});

　これらのコードを実装して実行すると、図2のアプリが動作します。

図2：Expo Routerの基本的な画面遷移（左：ホーム画面、右：設定画面）

　ホーム画面（index.js）にはタイトルとサブタイトル、そして「設定画面へ」のリンクが表示されます。このリンクをタップすると、設定画面（settings.js）に遷移し、設定項目と「ホームに戻る」リンクが表示されます。「ホームに戻る」をタップすれば、再びホーム画面に戻ります。

　この例からわかるように、Expo Routerではファイル作成とコンポーネントの実装だけで、画面構造と遷移フローを簡単に定義できます。ファイル名がURLパスになるという直感的な法則に従うだけで、複雑なルーティング設定が不要になるのです。

　また、次回に解説するStack Navigatorなどのナビゲーション支援コンポーネントを組み込むことで、画面遷移時に自動的にスライドアニメーションが適用され、ネイティブアプリらしい体験を提供してくれます。

画面遷移の基本となるLinkコンポーネント

　先ほどの例（リスト5、リスト6）でホーム画面と設定画面の相互移動に使用したのが、Expo Routerにおける画面遷移の基本となるLinkコンポーネントです。これはWeb開発における <a> 要素のように機能し、ユーザーがタップすることでhrefプロパティに指定されたルートへ遷移させます。

　Linkコンポーネントの最も重要なプロパティはhrefで、ここに遷移先のパスを指定します。パスはappディレクトリの構造に対応した文字列（例: "/settings"や "/profile/edit"）で指定するのが基本です。また、次回に解説する動的ルートなどでは、パス名とパラメータをオブジェクト形式で渡すことも可能です（リスト7）。

［リスト7］Linkコンポーネントの基本的な使い方

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function SomeScreen() {
  return (
    <View>
      {/* 文字列でパスを指定 */}
      <Link href="/settings">
        <Text>設定画面へ</Text>
      </Link>

      {/* ディレクトリ内のindex.jsへ */}
      <Link href="/profile">
        <Text>プロフィール画面へ</Text>
      </Link>

      {/* オブジェクト形式での指定（動的ルート用） */}
      <Link href={{ pathname: '/user/[id]', params: { id: '123' } }}>
        <Text>ユーザー123のプロフィールへ</Text>
      </Link>
    </View>
  );
}

　リスト5やリスト6で見たように、このLinkコンポーネントを画面内に配置することで、ユーザーは他の画面へ簡単に移動できるようになります。

　Linkコンポーネントは、子要素としてテキストや他のコンポーネントを受け取ることができます。デフォルトでは内部的にreact-nativeのTextコンポーネントが使われるため、styleプロパティで見た目をカスタマイズすることも可能です。より複雑な見た目のリンクを作成したい場合は、LinkコンポーネントでViewやPressableなどをラップし、asChildプロパティを使用します（これについては次回以降に解説します）。

まとめ

　本記事では、Expo Routerの基本的な概念と使い方について解説しました。ファイルベースルーティングを採用することで、appディレクトリの構造がそのままナビゲーションルートとなり、直感的に画面を管理できることをご理解いただけたかと思います。また、Linkコンポーネントを使うことで、宣言的に画面間の遷移を実装できることも学びました。

　今回はExpo Routerの導入と最も基本的な機能に焦点を当てましたが、Expo Routerはさらに多くの強力な機能を持っています。

　次回は、複数の画面で共通のUI（ヘッダーやタブバーなど）を定義する「レイアウトルート」や、URLの一部をパラメータとして受け取る「動的ルート」など、より複雑なナビゲーションを構築するための機能について詳しく解説します。お楽しみに。