Svelte入門：リファレンス @sveltejs/kit/hooks

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

背景

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

@sveltejs/kit/hooks

import { sequence } from '@sveltejs/kit/hooks';

これは SvelteKit アプリケーションでサーバーサイドフックを扱う際に使用するモジュールです。

sequence

複数の handle 呼び出しをミドルウェアのような方法でシーケンス化するためのヘルパー関数です。handle オプションの動作は以下の通りです：

• transformPageChunk は逆順に適用され、マージされます
• preload は順方向に適用され、最初のオプションが「勝ち」、その後の preload オプションは呼び出されません
• filterSerializedResponseHeaders は preload と同じ動作をします

src/hooks.server

import { sequence } from '@sveltejs/kit/hooks';
import type { Handle } from '@sveltejs/kit';

const first: Handle = async ({ event, resolve }) => {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
			return true;
		}
	});
	console.log('first post-processing');
	return result;
};

const second: Handle = async ({ event, resolve }) => {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
			return true;
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
			return true;
		}
	});
	console.log('second post-processing');
	return result;
};

export const handle = sequence(first, second);

上記の例では、以下のように出力されます：

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing

function sequence(
	...handlers: import('@sveltejs/kit').Handle[]
): import('@sveltejs/kit').Handle;

解説

この関数は SvelteKit において複数のハンドラ関数を連鎖させるためのユーティリティです。sequence を使うと、複数の handle 関数を順番に実行し、それぞれの処理を組み合わせることができます。

各オプションの挙動の特徴：

1. transformPageChunk – HTML変換は「逆順」に適用されます（最後のハンドラが最初に変換処理を行う）
2. preload – 「最初の」定義が優先され、そのあとの preload は実行されません
3. filterSerializedResponseHeaders – preload と同様に最初の定義が優先されます

この例では、実行順序がコンソールログで示されており、ミドルウェアの「入れ子」構造がよくわかります。前処理は外から内へ、変換は内から外へ、後処理は内から外へと実行されています。

おわりに

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