Expo Routerを使って、手続き的ナビゲーションと認証フローを構築しよう

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

　Expo RouterはExpoにおけるデファクトスタンダードな画面遷移ライブラリです。Expo Routerはモバイルアプリに必要な込み入った用途にも十分に耐えるインターフェースを備えています。今回は手続き的なナビゲーションや認証フローの構築などのアプリ内の実装に加えて、アプリ外でのURLアクセスに反応してアプリを起動するディープリンクの仕組みについても解説します。

対象読者

• モバイルアプリを作ってみたいReactエンジニア
• モバイルアプリのリリース作業を手軽に行いたい方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sequoia 15.5
• Node.js 24.4.1
• npm 11.4.2
• Expo 53.0.20
• React Native 0.79.5

プログラムによるナビゲーション

　今回はExpo Routerの応用的な機能について解説していきます。

　Linkコンポーネントによる宣言的な画面遷移に加え、Expo RouterではuseRouterフックを用いることで、ボタンのタップやフォーム送信といったイベントに応じた手続き的なナビゲーションを実装できます。

useRouterフックの基本

　useRouterフックは、プログラムによる画面遷移を行うためのメソッドを提供します。特に使用するメソッドは次の3つです。

• router.push(href)：新しい画面をスタックに追加します。router.push('/settings')のように使用します。
• router.replace(href)：現在の画面を新しい画面に置き換えます。ログイン後のリダイレクトのように、履歴を残したくない場合に使います。
• router.back()： スタック内の前の画面に戻ります。

　router.pushで新しい画面をスタックに追加し、router.backで前の画面に戻れます（リスト1）。

［リスト1］app/(tabs)/home.tsx

import { useRouter } from 'expo-router';
import { View, Button } from 'react-native';

export default function HomePage() {
  const router = useRouter();
  return (
    <View style={{ padding: 20 }}>
      <Button 
        title="プロフィール表示 (push)"
        onPress={() => router.push('/users/123')}
      />
      <Button
        title="戻る (back)"
        onPress={() => router.back()}
      />
    </View>
  );
}

　また、リスト2はフォーム送信のような非同期処理の完了後に画面遷移を行う実例です。

［リスト2］app/settings/profile.tsx

import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';
import { useRouter } from 'expo-router';

export default function ProfileEdit() {
  const [name, setName] = useState('');
  const router = useRouter();

  const handleSave = async () => {
    // APIでプロフィール更新（仮想）
    const isSuccess = true; // 本来はAPIレスポンスで判断
    if (isSuccess) {
      Alert.alert('成功', 'プロフィールを更新しました', [
        { text: 'OK', onPress: () => router.back() },
      ]);
    } else {
      Alert.alert('エラー', '更新に失敗しました');
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput placeholder="名前" value={name} onChangeText={setName} />
      <Button title="保存" onPress={handleSave} />
      <Button title="キャンセル" onPress={() => router.back()} color="#999" />
    </View>
  );
}

　useRouterフックにより、宣言的なLinkコンポーネントと手続き的なナビゲーションを適切に使い分け、洗練されたUIを構築できます。