Svelte入門：リファレンス $app/navigation -Vol.4-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
$app/navigation
1. onNavigate
  1. 解説
  2. 使用例
2. preloadCode
  1. 解説
  2. 使用例
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

$app/navigation

import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData,
	pushState,
	replaceState
} from '$app/navigation';

$app/navigation モジュールは SvelteKit アプリケーションでクライアントサイドのナビゲーションを制御するための関数を提供します。主な機能は以下の通りです：

afterNavigate – ナビゲーション完了後に実行されるコールバック関数を設定します。ページ遷移後の処理に使用します。
beforeNavigate – ナビゲーション開始前に実行されるコールバック関数を設定します。ページ遷移前の処理に使用します。
disableScrollHandling – SvelteKit のデフォルトのスクロール処理を無効化します。カスタムのスクロール動作を実装したい場合に使用します。
goto – プログラムによるナビゲーションを実行します。指定されたURLに移動します。
invalidate – 特定のデータの依存関係を無効化し、ページのデータを再読み込みします。
invalidateAll – すべてのデータの依存関係を無効化し、ページ全体のデータを再読み込みします。
onNavigate – ナビゲーション中に実行されるコールバック関数を設定します。
preloadCode – 指定されたページのコードを事前に読み込みます。パフォーマンス向上のために使用します。
preloadData – 指定されたページのデータを事前に読み込みます。パフォーマンス向上のために使用します。
pushState – ブラウザの履歴に新しいエントリを追加します。新しいURLにナビゲーションする際に使用します。
replaceState – 現在のブラウザ履歴エントリを置き換えます。現在のURLを別のURLに置き換える際に使用します。

これらの関数を使用することで、SvelteKit アプリケーション内でのナビゲーション体験をカスタマイズし、よりスムーズで効率的なユーザー体験を提供することができます。

onNavigate

フルページナビゲーション以外の場合に、新しいURLにナビゲーションする直前に指定された callback を実行するライフサイクル関数です。 Promise を返す場合、SvelteKit はナビゲーションを完了する前にその解決を待ちます。これにより、例えば document.startViewTransition を使用することができます。ナビゲーションがユーザーに停滞して見えるため、解決に時間がかかる Promise は避けてください。コールバックから関数（または関数に解決する Promise）が返された場合、DOM の更新後にその関数が呼び出されます。 onNavigate はコンポーネントの初期化中に呼び出す必要があります。コンポーネントがマウントされている限り、この関数はアクティブな状態を維持します。

function onNavigate(
	callback: (
		navigation: import('@sveltejs/kit').OnNavigate
	) => MaybePromise<(() => void) | void>
): void;

解説

onNavigate は SvelteKit のナビゲーション機能で、以下のような特徴があります：

タイミング – ナビゲーションが実際に開始される直前に実行されます。
フルページナビゲーションの例外 – フルページリロードを伴うナビゲーション（通常のリンクによるページ遷移など）では実行されません。
Promise のサポート – コールバックが Promise を返す場合、その解決を待ってからナビゲーションが完了します。
DOM更新後のコールバック – コールバックが関数を返すか、関数に解決する Promise を返す場合、DOM 更新後にその関数が実行されます。
ライフサイクル – コンポーネントの初期化時に設定し、コンポーネントがマウントされている間アクティブです。

使用例

<script>
  import { onNavigate } from '$app/navigation';
  
  // View Transitions API を使用したナビゲーション遷移
  onNavigate(async (navigation) => {
    // View Transitions API が利用可能かチェック
    if (!document.startViewTransition) {
      // 未サポートの場合は何もせずナビゲーションを続行
      return;
    }
    
    // View Transition を開始
    const transition = document.startViewTransition();
    
    // この Promise の解決を待ってからナビゲーションが完了する
    return () => {
      // DOM更新後に実行されるコード
      console.log('DOM が更新されました');
      
      // 必要に応じて追加のアニメーションを適用するなどの処理が可能
    };
  });
  
  // ナビゲーション前のデータ保存
  onNavigate((navigation) => {
    // フォームデータの一時保存などを行う
    saveFormDataToLocalStorage();
    
    console.log(`ナビゲーション先: ${navigation.to.url.pathname}`);
    console.log(`ナビゲーション元: ${navigation.from.url.pathname}`);
  });
</script>

この関数は、以下のようなシナリオで特に役立ちます：

ページ遷移アニメーション – View Transitions API などを使用して、ページ間の滑らかな遷移アニメーションを実装する場合。
ナビゲーション前のデータ保存 – ユーザーがページを離れる前に一時的なデータを保存する場合。
ナビゲーション分析 – ユーザーのナビゲーション行動を追跡する場合。
複雑なナビゲーション状態の管理 – ナビゲーションの発生タイミングで特定の状態変更を行いたい場合。

onNavigate は SvelteKit のクライアントサイドナビゲーションを拡張するための強力なツールですが、パフォーマンスに影響を与える可能性があるため、コールバック内の処理は軽量かつ高速であることが望ましいです。

preloadCode

まだ取得されていないルートのコードをプログラムによって事前にインポートします。通常、これは後続のナビゲーションを高速化するために呼び出されます。 /about（src/routes/about/+page.svelte にマッチ）や /blog/*（src/routes/blog/[slug]/+page.svelte にマッチ）などの任意のマッチするパス名でルートを指定できます。 preloadData とは異なり、これは load 関数を呼び出しません。モジュールがインポートされたときに解決する Promise を返します。

function preloadCode(pathname: string): Promise<void>;

解説

preloadCode は SvelteKit のナビゲーション機能で、以下のような特徴があります：

コードの事前読み込み – まだ読み込まれていないルートのコードを事前にインポートします。
パフォーマンス最適化 – ユーザーが特定のリンクをクリックする前にコードを事前に読み込むことで、実際のナビゲーション時の待ち時間を短縮します。
パス指定 – 具体的なパス（/about）やワイルドカードを含むパターン（/blog/*）でルートを指定できます。
preloadData との違い – preloadCode はコンポーネントのコードのみを読み込み、load 関数は実行しません。データの事前読み込みが必要な場合は preloadData を使用します。

使用例

<script>
  import { preloadCode } from '$app/navigation';
  
  // マウス操作を追跡して、ホバーされたリンクのコードを事前に読み込む
  function handleMouseEnter(path) {
    preloadCode(path)
      .then(() => console.log(`${path} のコードが事前読み込みされました`))
      .catch(error => console.error(`事前読み込みエラー: ${error}`));
  }
  
  // 複数のページを一度に事前読み込み
  async function preloadCommonPages() {
    // よく訪問されるページのコードを事前に読み込む
    await Promise.all([
      preloadCode('/dashboard'),
      preloadCode('/settings'),
      preloadCode('/profile')
    ]);
    
    console.log('よく使用されるページのコードが読み込まれました');
  }
  
  // コンポーネントマウント時に実行
  import { onMount } from 'svelte';
  
  onMount(() => {
    // アイドル時にルートを事前読み込み
    if ('requestIdleCallback' in window) {
      window.requestIdleCallback(() => {
        preloadCommonPages();
      });
    } else {
      // requestIdleCallback がサポートされていない場合の代替
      setTimeout(preloadCommonPages, 1000);
    }
  });
</script>

<a 
  href="/dashboard" 
  on:mouseenter={() => handleMouseEnter('/dashboard')}
>
  ダッシュボード
</a>

<a 
  href="/blog/latest" 
  on:mouseenter={() => handleMouseEnter('/blog/*')}
>
  最新記事
</a>

この関数は、以下のようなシナリオで特に役立ちます：

ホバー時の事前読み込み – ユーザーがリンクにマウスを合わせたときにコードを事前に読み込み、クリック時の応答性を向上させる。
予測的事前読み込み – ユーザーが次に訪問する可能性が高いページを予測し、バックグラウンドで事前に読み込む。
アイドル時の最適化 – ブラウザのアイドル時に重要なルートのコードを事前に読み込み、全体的なアプリケーション体験を向上させる。

preloadCode はパフォーマンス最適化のための優れたツールですが、不必要なコードの読み込みを避けるため、ユーザーが実際に訪問する可能性が高いルートに限定して使用することをお勧めします。

おわりに

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)