Svelte on じるラボ

SvelteKitでi18n（多言語対応）を実装した話

Sat, 30 May 2026 02:00:00 +0900

SvelteKitでi18n（国際化・多言語対応）を実装しました。まずシンプルな実装で概念を理解し、本番向けのアプローチも紹介します。

Svelte 5のSvelteMap・SvelteSetでリアクティブなデータ構造を使った話

Fri, 29 May 2026 00:00:00 +0900

Svelte 5では $state でオブジェクトや配列をリアクティブにできますが、Map や Set は .set() や .add() などの操作では画面が更新されません。これを解決するのが svelte/reactivity のクラスです。

Svelte 5の$inspectでリアクティブ値をデバッグした話

Thu, 28 May 2026 01:00:00 +0900

Svelte 5の $inspect を使うと、リアクティブな値（$state や $derived）が変化するたびに自動でコンソールにログを出力できます。console.log を手動で仕込む必要がなくなります。

SvelteKit × Resendでメール送信を実装した話

Thu, 28 May 2026 00:00:00 +0900

ResendはシンプルなAPIでメール送信できるサービスです。無料枠で月3,000通まで送れます。SvelteKit + Cloudflare Workersとの組み合わせでお問い合わせフォームを実装しました。

SvelteKitでSEOとOGPのメタタグを設定した話

Wed, 27 May 2026 01:00:00 +0900

SvelteKitでは <svelte:head> タグの中にメタタグを書くだけでSEOやOGPの設定ができます。

SvelteKitのhandleFetchフックでサーバー側fetchをカスタマイズした話

Wed, 27 May 2026 00:00:00 +0900

SvelteKitの handleFetch フックを使うと、load 関数内で実行されるサーバー側の fetch をインターセプトしてリクエストを変更できます。

SvelteKitのsnapshotでページ離脱時の入力内容を復元した話

Mon, 25 May 2026 01:00:00 +0900

SvelteKitの snapshot を使うと、ページを離れるときに状態を保存し、ブラウザの「戻る」で戻ったときに復元できます。フォームに入力中に誤って別ページに遷移してしまっても、戻ったときに入力内容が残ります。

SvelteKitの$app/navigationでプログラムからナビゲーションを制御した話

Sat, 23 May 2026 02:00:00 +0900

SvelteKitでは $app/navigation から関数をインポートすることで、JavaScriptからナビゲーションを制御できます。<a> タグでは対応できない条件付き遷移や離脱確認などに使います。

SvelteKitの$app/stateでページ情報にアクセスした話

Sat, 23 May 2026 01:00:00 +0900

SvelteKitでは $app/state から page オブジェクトをインポートすることで、コンポーネントのどこからでも現在のURL・パラメータ・ルート情報にアクセスできます。

SvelteKitのストリーミング（遅延ロード）を試した話

Sat, 23 May 2026 00:00:00 +0900

SvelteKitでは、load 関数から Promise をそのまま返すことで、データの一部を後から流し込むストリーミングが実現できます。重いクエリが完了するまでページ全体を待たせずに、段階的に表示できるのがメリットです。

SvelteKitの名前付きアクション（Named Actions）でフォームを整理した話

Thu, 21 May 2026 03:00:00 +0900

SvelteKitでは、1つのページに複数のフォームアクションを定義できます。これを Named Actions（名前付きアクション） と呼びます。TODOアプリの「追加・完了・削除・ログアウト」を例に整理します。

SvelteKitの高度なルーティング（オプショナルパラメータ・レストパラメータ・マッチャー）を整理した話

Thu, 21 May 2026 02:00:00 +0900

SvelteKitの応用的なルーティングパターンを整理します。ページネーションや可変長パスなど、実務でよく必要になる場面で使います。

SvelteKitのページオプション（prerender・ssr・csr）を整理した話

Thu, 21 May 2026 00:00:00 +0900

SvelteKitはページごとにレンダリング方式を切り替えられます。実務でパフォーマンスやSEOの要件に応じて使い分けます。

SvelteKitのフォームバリデーションにZodを導入した話

Wed, 20 May 2026 00:00:00 +0900

フォームのバリデーションをif文で手書きすると項目が増えるたびにコードが複雑になります。Zodを使うとスキーマで宣言的に書けます。

SvelteKitにPlaywrightでE2Eテストを導入した話

Tue, 19 May 2026 04:00:00 +0900

PlaywrightはE2Eテスト（End-to-End）のツールです。実際のブラウザを動かしてユーザー操作をシミュレートします。Vitestのユニットテストと組み合わせることで、ロジックから画面全体まで幅広くテストできます。

SvelteKitのパフォーマンス最適化（preloadData・preloadCode・goto）を整理した話

Tue, 19 May 2026 03:00:00 +0900

SvelteKitのリンク先読み機能（preload）を整理します。リンクにカーソルを乗せた瞬間にデータを先読みして、ページ遷移を体感的に速くします。

SvelteKitのhooksを深掘りした話（handle・handleError・handleFetch・sequence）

Tue, 19 May 2026 02:00:00 +0900

SvelteKitの hooks.server.ts に書く関数を整理します。認証以外の実用的なユースケースも含めて解説します。

Svelte 5のコンテキストAPI（setContext/getContext）を整理した話

Tue, 19 May 2026 01:00:00 +0900

Svelte 5のコンテキストAPI（setContext / getContext）を整理します。propsとstoreに続く3つ目の状態共有の方法で、コンポーネントツリー内だけで状態を共有したいときに使います。

SvelteKit + Svelte 5でVitestのテスト環境を構築した話

Tue, 19 May 2026 00:00:00 +0900

SvelteKit + Svelte 5 の環境に Vitest でテストを導入しました。セットアップ時にいくつか躓きポイントがあったのでまとめます。

SvelteKitの+server.tsでAPIエンドポイントを作った話

Mon, 18 May 2026 02:00:00 +0900

SvelteKitでは +server.ts を使うとREST APIのエンドポイントを作れます。load 関数や actions ではカバーできない場面で使います。

SvelteKitのload関数の詳細（depends・invalidate・parent）を整理した話

Mon, 18 May 2026 01:00:00 +0900

SvelteKitの load 関数を深掘りします。+page.ts と +page.server.ts の使い分け、parent() で親のデータを受け取る方法、depends と invalidate によるリロードなしのデータ再取得を整理します。

SvelteKitのuse:enhanceによるフォームの段階的強化を整理した話

Mon, 18 May 2026 00:00:00 +0900

SvelteKitのフォームはデフォルトでフルページリロードして送信されます。use:enhance を使うとリロードなしで送信できるようになります。仕組みと使い分けを整理します。

SvelteKitの+layout.svelteと+page.svelteの役割の切り分けを整理した話

Sat, 16 May 2026 03:00:00 +0900

SvelteKitで迷いやすい +layout.svelte と +page.svelte の役割の切り分けを整理します。

SvelteKitのレイアウト（+layout.svelte）を深掘りした話

Sat, 16 May 2026 02:00:00 +0900

SvelteKitの +layout.svelte の応用パターンを整理します。ネストしたレイアウト・レイアウトデータの取得・ルートグループ・レイアウト無効化を解説します。

SvelteKitのエラーハンドリング（+error.svelteとerror()）を整理した話

Sat, 16 May 2026 01:00:00 +0900

SvelteKitでエラーが起きたときの処理方法を整理します。+error.svelte でエラー画面を作り、error() ヘルパーでエラーを投げる方法と、コンポーネント内でのエラー処理の違いを解説します。

Svelte 5のスニペット（{#snippet}と{@render}）を整理した話

Sat, 16 May 2026 00:00:00 +0900

Svelte 5ではスロット（slot）が廃止され、代わりにスニペットという仕組みになりました。{#snippet} で定義して {@render} で呼び出します。

Svelte 5の$props()の型定義と$bindableを整理した話

Fri, 15 May 2026 11:00:00 +0900

Svelte 5で $props() にTypeScriptの型を付ける方法と、子コンポーネントから親の値を変更できる $bindable の使い方を整理します。

Svelte 5のコンポーネント間の状態共有（propsとstore）を整理した話

Fri, 15 May 2026 10:00:00 +0900

Svelte 5でコンポーネント間の状態を共有する方法は主に2つあります。 props（親から子へ渡す）と store（どこからでも参照できる共有ファイル）です。それぞれの実装方法と使い分けの判断基準を整理します。

Svelte 5のリアクティビティ（$state・$derived・$effect）を整理した話

Fri, 15 May 2026 09:00:00 +0900

Svelte 5からリアクティビティの仕組みが「ルーン（Rune）」という新しい方式に変わりました。 $state・$derived・$effect の3つを中心に、実際に動かしながら挙動を整理します。