ディープリンク
ディープリンクは、アプリ外からの特定のURLをタップした際に、アプリの特定の画面を直接開く仕組みです。Expo Routerは、ファイルベースルーティングの恩恵により、複雑な設定なしにディープリンク機能を利用できます。
ただし、ここでお伝えしておきたいことがあります。このディープリンクの動作を実際に手元で確認するには、本連載の後半で詳しく解説する「EAS Build」を用いて「開発クライアント」（Dev Client）という特別なアプリをビルドする必要があるのです。
そこで今回は、まずディープリンクがどのような仕組みで動いているのか、概念的な理解を深め、Expo Routerでどのように設定するのかという実践的なコードに焦点を当てて解説を進めます。実際に手元で動かすのは、後の回でのお楽しみとしましょう！
カスタムURLスキームの設定
ディープリンクを実現するには、まずapp.jsonでアプリ固有のURLスキームを定義します（リスト6）。
{
"expo": {
"name": "MyRouterApp",
"slug": "my-router-app",
"scheme": "myapp", # (1) URLスキームのプロトコル部分になる文字列
"version": "1.0.0"
}
}
（1）のように設定すると、 myapp://というリンクをアプリが受け入れる下地が整います。
リンクの受信と処理
次に、アプリでディープリンクを受信した際の処理について、expo-linkingライブラリを使用して実装します（リスト7）。
import * as Linking from 'expo-linking';
import { useEffect } from 'react';
import { useRouter } from 'expo-router';
import { Stack } from 'expo-router';
export default function RootLayout() { // SessionProvider等は省略
const router = useRouter();
useEffect(() => {
const handleDeepLink = (url) => {
const { path } = Linking.parse(url); // (2)
if (path) router.push(path); // (3)
};
Linking.getInitialURL().then(url => url && handleDeepLink(url)); // (1)
const subscription = Linking.addEventListener('url', e => handleDeepLink(e.url));
return () => subscription.remove();
}, []);
// ... 認証フローと統合したレイアウトを返す
return <Stack />;
}
（1）ではアプリ起動の由来となったmyapp://products/123のようなURLが取り出せるので、それを（2）で処理して products/123の形にし、（3）でapp/products/[id].tsxへの画面遷移を行います。こういった処理をする際に都合がいいように、リンクのパスと画面のパスを揃えておくと便利になるでしょう。
受け取り側の画面では、第6回で解説したようにuseLocalSearchParams()を利用してidを取り出し、画面の初期化に利用します。
ディープリンクのテスト
開発クライアントを利用している場合、以下のコマンドでディープリンクの動作を確認できます。
# iOS / Android npx uri-scheme open myapp://products/123 --ios npx uri-scheme open myapp://products/123 --android # **【重要】** # このコマンドは、後の回で作成する「開発クライアント（Dev Client）」で動作をテストするためのものです。現在のExpo Go環境で実行するとエラーになるため、今は「このようなコマンドでテストするのだな」と覚えておくだけで問題ありません。
Universal Links（iOS）やApp Links（Android）を設定すれば、 https://スキームでもアプリを起動でき、よりシームレスな体験を提供できます。
まとめ
本記事では、Expo Routerの高度な機能として、プログラムによるナビゲーション、認証フロー、ディープリンクの3つのトピックを解説しました。
useRouterフックによる手続き的な画面遷移は、ユーザーの操作に応じた柔軟なナビゲーションを実現します。push、replace、backを使い分けることで、アプリのUXを向上させることができます。認証フローでは、Reactコンテキストとexpo-secure-storeを組み合わせ、ログイン状態に応じた堅牢な画面制御を実装しました。ルートレイアウトでの動的な画面切り替えが、このアーキテクチャの鍵となります。
ディープリンクでは、Expo Routerの自動対応機能を活かし、アプリ外からの直接アクセスを容易に実現する方法を学びました。今回は設定方法の解説に留まりましたが、今後のEAS Buildの解説を経て、この設定が実際に機能する瞬間をぜひ体験してください。カスタムURLスキームの設定から、Universal Links/App Linksといった高度な機能まで、ユーザーエンゲージメント向上に繋がる技術です。
これらの機能をマスターすることで、ネイティブアプリならではの操作感と、Webアプリの柔軟性を両立した、洗練されたモバイルアプリ開発が可能になります。ファイルベースルーティングというExpo Routerの直感的なアプローチが、複雑な機能の実装を容易にしている点も大きな魅力です。
次回からは、Expoのもう一つの重要な機能であるWebビルドについて解説予定です。同一のコードベースからモバイルアプリとWebアプリの両方を生成する方法や、プラットフォーム固有の最適化手法などを学んでいきます。ご期待ください。
