SvelteKit概要
SvelteKitとは
SvelteKitは、Svelteをベースにしたフルスタックアプリケーションフレームワークです。
主な機能
1. ファイルベースルーティング
src/routes/
├── +page.svelte # /
├── about/+page.svelte # /about
└── blog/
├── +page.svelte # /blog
└── [slug]/
└── +page.svelte # /blog/[slug]null
2. サーバーサイドレンダリング（SSR）
// +page.server.ts
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async () => {
const posts = await fetchPosts();
return {
posts
};
};typescript
3. APIルート
// +server.ts
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async () => {
const data = await fetchData();
return new Response(JSON.stringify(data), {
headers: {
'Content-Type': 'application/json'
}
});
};typescript
4. フォーム処理
// +page.server.ts
import type { Actions } from './$types';
export const actions: Actions = {
default: async ({ request }) => {
const formData = await request.formData();
const email = formData.get('email');
// 処理...
return { success: true };
}
};typescript
レンダリングモード
- SSR - サーバーサイドレンダリング
- CSR - クライアントサイドレンダリング
- SSG - 静的サイト生成
- ISR - インクリメンタル静的再生成
学習内容
- ルーティング - ファイルベースルーティング
- Load関数 - データ読み込み
- サーバーサイド処理 - SSRとAPI
- フォーム処理 - Progressive Enhancement
- APIルート - RESTful API構築
- デプロイメント - 本番環境へのデプロイ
次のステップ
ルーティング から、SvelteKitの基本を学び始めましょう。