こんにちは。よっしーです(^^)
今日は、SvelteKitでのShallow routingについて解説しています。
背景
SvelteKitでのShallow routingについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。
Shallow routing
SvelteKitアプリケーション内を移動すると、履歴エントリが作成されます。戻るボタンと進むボタンをクリックすると、このエントリのリストを移動し、必要に応じてload関数を再実行し、ページコンポーネントを置き換えます。
時には、実際のページ遷移なしに履歴エントリを作成することが有用な場合があります。例えば、ユーザーが戻るボタンで閉じることができるモーダルダイアログを表示したい場合などです。これは特にモバイルデバイスで重要で、UIを直接操作するよりもスワイプジェスチャーの方が自然な場合が多いためです。履歴エントリと関連付けられていないモーダルは、ユーザーが閉じようとして戻るスワイプをした際に、間違ったページに移動してしまうため、フラストレーションの原因となる可能性があります。
SvelteKitでは、pushStateとreplaceState関数を使用することで、ページ遷移なしに履歴エントリに状態を関連付けることができます。例えば、履歴駆動のモーダルを実装する場合：
<script>
import { pushState } from '$app/navigation';
import { page } from '$app/stores';
import Modal from './Modal.svelte';
function showModal() {
pushState('', {
showModal: true
});
}
</script>
{#if $page.state.showModal}
<Modal close={() => history.back()} />
{/if}このモーダルは、戻る操作で閉じることができ（$page.state.showModalを解除）、またはcloseコールバックを実行させる方法で操作することで、プログラム的に戻る操作を実行できます。
解説
この記事では、SvelteKitの履歴管理と状態管理に関する高度な機能について説明しています。主なポイントは：
- 履歴エントリの概念：
- 通常のナビゲーションで作成される履歴エントリ
pushState/replaceStateによる履歴エントリの作成- ページ遷移なしでの状態管理
- ユースケース：
- モーダルダイアログの実装
- モバイルでのスワイプナビゲーション対応
- ユーザー体験の向上
- 技術的実装：
$app/navigationからのpushStateの利用$app/storesのpageストアの活用- 履歴APIとの連携
- ユーザー体験の考慮：
- モバイルデバイスでの自然な操作
- 戻る/進む操作との整合性
- フラストレーション防止の工夫
この機能は特に、モダンなウェブアプリケーションでよく見られるモーダルダイアログやオーバーレイの実装に非常に有用です。ユーザーの期待する動作（特にモバイルでの戻るスワイプ）と整合性のある挙動を実現できます。
おわりに
今日は、 SvelteKitでのShallow routingについて解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント