軽量・高速・直感的！Svelte入門ガイド

投稿日 2025年9月26日
著者 HITMARKET
カテゴリーおすすめ
カテゴリーホームページ

フロントエンド開発の新定番として注目されているフレームワーク Svelte（スヴェルト）。
ReactやVueに続く選択肢として、「記述量が少ない」「パフォーマンスが高い」と開発者の間で急速に人気を集めています。

この記事では、Svelteの特徴から基本的な書き方、React/Vueとの違いなどを紹介します。

✅ Svelteとは？

Svelteは、JavaScriptで構築されたコンパイラ型のフロントエンドフレームワークです。

一般的なフレームワーク（React, Vue）はランタイムがブラウザ上で動きますが、Svelteは開発時にコンパイルして、純粋なJavaScriptに変換します。

そのため、ファイルサイズが小さく、レンダリング速度が速く、実行時のオーバーヘッドがないのが特徴です。

🚀 Svelteの特徴まとめ

特徴	内容
🪶 ランタイム不要	ブラウザで動作するのは純粋なJS・CSSのみ
💨 高速レンダリング	コンパイル済みのため、実行速度が速い
✍️ コードが少ない	ReactやVueに比べて記述量が圧倒的に少ない
🧠 学習しやすい	JavaScript＋HTML＋CSSの基本で書ける
🔧 状態管理がシンプル	内部の再アクティブ機構がスマート

🛠 Svelteのセットアップ方法（超簡単）

まずは公式CLIでテンプレートを作成します。

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install
npm run dev

http://localhost:5173 にアクセスすれば開発開始！

※Vite + Svelteの組み合わせはとても高速で快適です。

✨ 基本構文の例

SvelteはHTML・CSS・JavaScriptが1ファイルにまとまったシングルファイルコンポーネントです。

`App.svelte`

<script>
  let count = 0;
</script>

<button on:click={() => count++}>
  カウント: {count}
</button>

<style>
  button {
    font-size: 1.5rem;
  }
</style>

on:click は addEventListener の糖衣構文
{} で変数をHTMLに埋め込み可能
<style> は自動的にスコープされる

🔁 再アクティブ（リアクティブ）な変数

<script>
  let a = 1;
  let b = 2;
  $: sum = a + b; // a or b が変わると sum を再計算
</script>

<p>{a} + {b} = {sum}</p>

$: を使うと自動的に依存関係を追跡して再計算してくれます。
フックやuseStateのような記法が不要！

🔄 ループ・条件分岐

{#if loggedIn}
  <p>ようこそ！</p>
{:else}
  <p>ログインしてください</p>
{/if}

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Vueに近い構文ですが、独自の直感的な構文です。

📦 コンポーネントの分割と再利用

<!-- Greeting.svelte -->
<script>
  export let name;
</script>
<p>こんにちは、{name}さん！</p>

<!-- App.svelte -->
<script>
  import Greeting from './Greeting.svelte';
</script>

<Greeting name="太郎" />

export let を使ってPropsを受け取ります。

🔥 SvelteKitにも注目

Svelteで本格的なWebアプリケーションを構築したい場合は、フレームワークの上位互換である SvelteKit もおすすめです。

ルーティング機能
サーバーサイドレンダリング（SSR）
静的サイト生成（SSG）
APIルート
Viteベースの開発環境

SvelteKitは、Next.jsのようなフルスタック対応の開発が可能です。

✅ まとめ

比較項目	Svelte	React	Vue
ランタイム	不要（コンパイル型）	必要（仮想DOM）	必要（仮想DOM）
学習コスト	低	中〜高	中
コードの量	少ない	多い（JSX）	普通
パフォーマンス	高速	普通	高速
生産性	高い	高い	高い