【2026年版】Svelteの始め方 — SvelteKit環境構築からコンポーネント作成まで完全ガイド

Svelteの最大の特徴は「コンパイラ型フレームワーク」という点だよ。ReactやVueはブラウザで仮想DOMという仕組みを動かすけど、Svelteはビルド時にコードを最適化されたバニラJavaScriptに変換するんだ。だから実行時のオーバーヘッドが少なく、バンドルサイズが小さくなるのが特徴だよ。コードの書き方もシンプルで、ReactのuseState/useEffectのような特殊な書き方が少ないから学習コストが低いとも言われているよ。

SvelteKitというフルスタックフレームワークで始めるのが今の標準だよ。「npm create svelte@latest my-app」でプロジェクトを作成できて、テンプレートは「Skeleton project」か「SvelteKit demo app」から選べるよ。「cd my-app」→「npm install」→「npm run dev」でlocalhostにアクセスできるようになるよ。TypeScriptも最初から使えるように選べるんだ。

ここで「npm create svelte@latest my-svelte-app」を実行してみてね。テンプレートは「Skeleton project」でOK、TypeScriptは「Yes」がおすすめだよ。「cd my-svelte-app」→「npm install」→「npm run dev」で「localhost:5173」にアクセスしてみよう！（試してみて）

Svelteコンポーネントは「.svelte」ファイルで、「<script>」「HTML」「<style>」の3ブロックで構成されているよ。変数を宣言するだけで自動的にリアクティブになるのが特徴で、Svelte 5では「let count = $state(0)」という新しい書き方になったよ。ボタンをクリックしたらカウントが増えるコンポーネントを書くなら、「let count = $state(0)」と「<button onclick={() => count++}>{count}</button>」だけで完成するんだ。

propsを使って渡すよ。子コンポーネントで「let { name } = $props()」と書いてpropsを受け取り、親から「<Child name="ひよこ" />」のように渡せるんだ。双方向バインディングは「bind:value」で実現できて、「<input bind:value={text} />」と書くだけで入力値がtextに自動で反映されるよ。Reactより少ないコードで同じことが実現できるのがSvelteの魅力だね。

SvelteKitはファイルベースルーティングを採用していて、「src/routes/」ディレクトリの構造がそのままURLになるよ。「src/routes/+page.svelte」が「/」、「src/routes/about/+page.svelte」が「/about」になるんだ。「+page.svelte」はページコンポーネント、「+layout.svelte」は共通レイアウト、「+page.server.ts」はサーバーサイドのデータ取得を書く場所だよ。「[slug]」ディレクトリで動的ルーティングも実現できるんだ。

できるよ！SvelteKitはSSRがデフォルトで、「+page.server.ts」の「load関数」でサーバーでデータを取得してからHTMLを返せるんだ。「export const prerender = true」を設定すればSSGになるよ。「@sveltejs/adapter-static」を使えば完全静的サイトとしてVercelやNetlifyにデプロイできるし、「@sveltejs/adapter-vercel」でVercelのSSRも使えるよ。

求人や採用では今もReact（特にNext.js）が圧倒的に多いから、就職・転職を考えるならReactを優先するのがおすすめだよ。でもSvelteは学習コストが低く、個人開発や小中規模プロジェクトで生産性が高いのが特徴だね。Reactを学んでからSvelteを試すと、「こんなにシンプルに書けるんだ！」と感動する人が多いよ。2026年現在、SvelteKitはViteベースで開発体験もよく、注目度が上がっているフレームワークだよ。

VercelかNetlifyが最も手軽だよ。GitHubと連携しておけばpushするだけで自動デプロイされるんだ。「@sveltejs/adapter-vercel」か「@sveltejs/adapter-netlify」をインストールして「svelte.config.js」で設定するだけだよ。SupabaseをバックエンドとしてFirebaseの代わりに使えば、Svelte + SvelteKit + Supabaseのスタックでフルスタックアプリが無料〜低コストで作れるよ。