sv での環境構築から、テンプレート構文・コンパイラの出力の読み方・$state と $derived・スニペットと bind・SvelteKit のルーティングと load・フォームアクション・TypeScript・テスト・アダプタとデプロイまで。全30レッスンで、「仮想 DOM を使わない」という選択が何を変えるのかを自分の言葉で説明し、React / Vue / Svelte のどれを選ぶかを判断できるところまで進みます。コンパイル結果もビルドサイズもテストの出力も、すべて Svelte 5.57.1・SvelteKit 2.70.3 で実際に動かした実測値です。
全30レッスンを6つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ .svelte ファイルはブラウザ内で実行できないため、第2回で作るプロジェクトで試してください。考え方だけを確かめる回は、素の JavaScript で実行できるようにしてあります。前提は JavaScript の基本で、TypeScript と React または Vue を知っていると、最終回の比較がより効きます。
Svelte が「ライブラリ」ではなくコンパイラであることを、実際の出力を見て確かめます。環境を作り、テンプレート構文とスコープ付き CSS まで押さえます。
$state・$derived・$effect・$props の 4 つで、値が変わると画面が変わる仕組みを組み立てます。最後は Svelte 4 の $: と export let を「読めるように」しておきます。
イベント・bind・$bindable・スニペットで、部品を組み合わせる道具をそろえます。リストの key とトランジションまで進みます。
フォルダの形がそのまま URL になるルーティングと、load・フォームアクション・API を扱います。最後は SSR・CSR・プリレンダリングの切り替えまで進みます。
TypeScript・状態の共有・テストという、仕事で必ず出てくる 3 つを押さえます。最後は Vitest と Testing Library で振る舞いを確かめられるようになります。
アダプタを選んでビルドし、公開できる形にします。最後は React / Vue / Svelte の三つを並べて、どれを選ぶかを自分で説明できるようにします。
全30レッスンを終えたら、次はコンポーネントを型で守る TypeScript へ。React・Vue と読み比べると、最終回の対応表がそのまま使えます。メンバーシップで全コースが解放されます。