PR：この記事にはアフィリエイトリンクが含まれます。
TypeScript、SSR、form actions。SvelteKitで覚える機能は少なくありません。画面表示、入力、保存、認証の順に追えば、それぞれがどこで働くか見えてきます。
サーバーでデータを読み込み、最初のHTMLを返し、フォームから内容を更新する。SvelteKitなら、こうした処理を一つのルーティング設計にまとめられます。フルスタックWeb開発で使う魅力ですね。
書籍に載るのは刊行当時のSvelteKitです。TypeScriptの型設計まで学びたい場合は、コードを動かすだけで終わらせず、現在の環境に合わせて型やAPIを読み替える力も身につけたいところです。
まず全体像
4冊は得意分野が異なります。日本語で学ぶ基礎、フォームのテスト、Python製APIとの連携など、扱うテーマも範囲もさまざまです。取り組んでいる課題に近い一冊なら、学んだことをコードで試しやすくなります。
| 書籍 | 内容の軸 | 読み進めた先 |
|---|---|---|
 実践 Svelte入門 | 日本語の基礎、form actions、MongoDB、Auth0 | ECアプリの実装 |
 SvelteKit Up and Running | 英語、SvelteKit 1.0、ルーティングとフォーム | 認証を含むアプリ |
 Svelte with Test-Driven Development | 入力検証とテスト駆動 | Vitest、Playwrightなどのテスト |
 実践SvelteKit × FastAPI | FastAPI、MongoDB Atlas、デプロイ | Cloud RunとVercelへの公開 |
価格の目安も押さえておきましょう。『実践 Svelte入門』は税込3,740円、『実践SvelteKit × FastAPI』は税込2,200円です。どちらも公式の希望小売価格で、実売価格は時期や販売店によって変わります。
TypeScriptの役割
TypeScriptを使うと、ページが受け取るデータやフォーム処理の戻り値を、コードを書いている途中で確認できます。画面とサーバーの境界も追いやすくなり、慣れない時期の修正を減らせるでしょう。
SvelteKitではルートごとに型が生成され、$typesからPageServerLoadやActionsなどを利用できます。ページのデータと送信処理の形をルートの近くで定義できるので、関連するコードを見つけやすくなります。
型が正しくても、ブラウザーから届く値の正しさまでは保証されません。入力値をサーバー側で検証し、欠落や形式違いを処理してから保存や更新へ進みます。
本のJavaScript例をTypeScriptに書き換えるのも練習になります。入力値、検証後のデータ、エラー時の戻り値、それぞれの型を考えるとフォーム処理の役割が整理できます。
SSRの設計感
SSRでは、サーバーがページを組み立て、初回表示に使うHTMLを返します。利用者はデータの入った画面を受け取り、その後はブラウザー側のJavaScriptが操作に応じて更新します。
SvelteKitのサーバー側loadを使えば、データベースへの問い合わせや秘密情報を使う処理をサーバーに置けます。秘密鍵をブラウザーへ送らず、画面に必要な値だけを渡す。この線引きが基本です。
すべてのページをリクエストごとに生成する必要はありません。内容が固定されたページはプリレンダリングし、利用者ごとに変わる画面はリクエスト時に生成するなど、ルートの性質に合わせて使い分けます。
SSRは検索エンジン対策にも使われますが、初回表示とデータ取得の流れを整える役割もあります。サーバーで処理する内容とブラウザーに渡す値を説明できれば、設計の軸が定まります。
actionsの流れ
form actionsは、ページ上のフォームから送られた値をサーバーで処理する仕組みです。+page.server.tsに処理を置けば、保存や更新のコードとフォーム画面を同じルートで管理できます。
送信された値は、まずサーバー側で検証します。問題があればエラーを返して入力画面に表示し、問題がなければ保存へ進む。この順番なら、入力ミスにも落ち着いて対応できます。
use:enhanceを加えると、JavaScriptを使って送信後の画面を更新できます。通常のHTMLフォームとしても送信できる形にすれば、プログレッシブエンハンスメントに沿って段階的に機能を加えられます。
成功時の表示に加えて、必須項目の不足、認証切れ、保存失敗も考えておきましょう。form actionsは入力から結果表示までを担う場所ですね。
実践 Svelte入門
『実践 Svelte入門』は、Svelteの基礎からSvelteKitのルーティング、ページとレイアウト、サーバールートまでを扱う日本語書籍です。著者はKyohei Hamaguchi（tnzk）さんと小関泰裕さん。技術評論社刊、2023年4月発売の320ページです。
form actionsでは、ECアプリにカート追加機能を実装します。プログレッシブエンハンスメントも扱い、MongoDBによるデータ管理やAuth0のパスワードレスログイン、セッション管理へと進みます。画面からサーバー側の処理まで追える構成です。
SSRとCSRの切り替え、プリレンダリングも扱い、基本機能をひと通り結び付けられます。型の習得は現行の資料や自分のコードで補いながら読み進めるとよいでしょう。
SvelteKit総合本
『SvelteKit Up and Running』は、Packt Publishingから2023年7月に刊行された英語の初版です。全166ページ。SvelteKit 1.0登場時の機能を扱い、動的ページ、サーバーページ、load、レイアウトを順に学べます。
クライアント側やレイアウトでデータを読み込む例に続き、form actions、データベース、ログイン、パスワードの安全性を取り上げます。ルーティングから認証付きフォームまで、英語で一続きに学べる構成です。
コード例はJavaScript中心です。SvelteKitの処理のつながりを英語の技術書で確かめたい人に向いています。現行環境で試すなら、1.0時代の記述との差分も確認しましょう。
テスト駆動の本
『Svelte with Test-Driven Development』はPackt Publishing刊、Daniel Irvineさん著の英語書です。2023年6月発行で全250ページ。セットアップ章はSvelteKit 1.0向けで、テスト駆動開発を始められます。
form actionsに加え、入力検証や編集処理もテストを書きながら実装します。Vitest、Playwright、Cucumber.jsを扱い、ルートのデータ読み込み、認証、Svelte stores、service workersのテストにも範囲を広げます。
実装とテストの対応を学びたい人に役立つ一冊です。コード例はJavaScriptで、セットアップも1.0時代の内容。TypeScriptへの置き換えや現行版との差分を確かめながら読むのが現実的です。
FastAPIとの連携
『実践SvelteKit × FastAPI 誰でも簡単Web開発！フルスタックエンジニアになる！』は、SvelteKitとPythonのFastAPIを組み合わせるオンデマンド書籍です。2022年12月発行、カラーのB5判で本文86ページ。短い構成で一通りの流れを追えます。
バックエンドではFastAPI、MongoDB Atlas、Beanie、バリデーションを扱います。SvelteKit側ではルーティング、API呼び出し、storeやイベント処理を学習。フロントエンドとPython APIの役割を分けた構成が見えてきます。
Cloud RunとVercelへの公開手順も含まれます。紙版の希望小売価格は税込2,200円で、実売価格は時期や店によって変わります。API接続からデプロイまで試したい人に合う本です。
結論
SvelteKitを日本語で基礎からform actions、SSR、認証まで学ぶ主教材には、『実践 Svelte入門』が堅実です。TypeScriptを最優先するなら、型付きの実装練習も並行しましょう。
form actionsの検証とテストを重点的に学びたい人には『Svelte with Test-Driven Development』をすすめます。英語でSvelteKit 1.0時代の機能を追うなら『SvelteKit Up and Running』、FastAPIとの連携から公開まで試すなら『実践SvelteKit × FastAPI』です。
目的がまだ定まっていなければ、まず『実践 Svelte入門』を手元に置くのがよいでしょう。学んだ処理を現在のSvelteKitとTypeScriptで書き直せば、基礎、フォーム、サーバー処理を実務のコードに結び付けられます。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
