Svelte入門：SvelteKitでのスナップショット

今日は、SvelteKitでのスナップショットについて解説しています。

背景

SvelteKitでのスナップショットについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

スナップショット

一時的なDOMの状態（サイドバーのスクロール位置や<input>要素の内容など）は、あるページから別のページに移動する際に破棄されます。

例えば、ユーザーがフォームに入力途中で別のページに移動し、その後戻ってきた場合や、ページを更新した場合、入力した値は失われてしまいます。このような入力を保持しておくことが重要な場合、DOMの状態のスナップショットを取得し、ユーザーが戻ってきた時に復元することができます。

これを実現するには、+page.svelteまたは+layout.svelteからcaptureメソッドとrestoreメソッドを持つsnapshotオブジェクトをエクスポートします：

<script>
    let comment = $state('');

    /** @type {import('./$types').Snapshot<string>} */
    export const snapshot = {
        capture: () => comment,
        restore: (value) => comment = value
    };
</script>

<form method="POST">
    <label for="comment">コメント</label>
    <textarea id="comment" bind:value={comment} />
    <button>コメントを投稿</button>
</form>

このページから離れる際、ページが更新される直前にcapture関数が呼び出され、戻り値がブラウザの履歴スタックの現在のエントリに関連付けられます。戻ってきた場合、ページが更新された直後にrestore関数が保存された値とともに呼び出されます。

データはsessionStorageに保存できるようにJSONとしてシリアライズ可能である必要があります。これにより、ページがリロードされた時や、別のサイトから戻ってきた時でも状態を復元することができます。

captureから大きなオブジェクトを返すことは避けてください。一度キャプチャされたオブジェクトはセッション中メモリに保持され続け、極端な場合はsessionStorageに保存するには大きすぎる可能性があります。

解説

本記事はSvelteKitの「スナップショット」機能について説明しています。主なポイントは：

1. 目的：

• フォームの入力内容やスクロール位置などの一時的な状態を保持する
• ページ遷移や更新後もユーザーの入力を維持する

1. 仕組み：

• snapshotオブジェクトを使用
• capture：状態を保存する関数
• restore：保存した状態を復元する関数

1. 技術的な詳細：

• データはsessionStorageに保存
• JSONでシリアライズ可能である必要がある
• メモリ使用量に注意が必要

1. 使用例：

• フォーム入力の保持
• ユーザー入力の一時保存
• ページナビゲーション間での状態維持

この機能は特に、ユーザー体験を向上させたい場合や、入力フォームを含むアプリケーションで有用です。

おわりに

今日は、 SvelteKitでのスナップショットについて解説しました。