Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

handle に渡される event オブジェクトは、+server.js ファイルの API routes+page.server.js ファイルの form actions+page.server.js+layout.server.jsload 関数に渡されるものと同じオブジェクトで、RequestEvent のインスタンスです。

便利なプロパティやメソッドを数多く持っており、いくつかはすでに見たことがあるでしょう:

  • cookiescookies API
  • fetch — 標準の Fetch API と同等ですが、いくつかの機能が追加されています
  • getClientAddress() — クライアントの IP アドレスを取得する関数
  • isDataRequest — クライアントサイドナビゲーション中にブラウザがデータをリクエストしていると true、ページやルート(route)が直接リクエストされていると false
  • locals — 任意のデータを置く場所
  • params — ルート(route)のパラメータ
  • requestRequest オブジェクト
  • route — マッチしたルート(route)を表す id プロパティを持つオブジェクト
  • setHeaders(...) — レスポンスに HTTP ヘッダーを設定する関数
  • url — 現在のリクエストを表す URL オブジェクト

便利なパターンとしては、handleevent.locals にデータを追加して、後続の load 関数でそれを使用できるようにすることです:

src/hooks.server
export async function handle({ event, resolve }) {
	event.locals.answer = 42;
	return await resolve(event);
}
src/routes/+page.server
export function load(event) {
	return {
		message: `the answer is ${event.locals.answer}`
	};
}

Edit this page on GitHub

previous next
1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>