Svelte入門：次世代のUIフレームワークを学ぶ 🚀

Svelte（スヴェルトと読みます）は、2016年11月にRich Harris氏によって初めて公開された、比較的新しいオープンソースのフロントエンドフレームワークです。その最大の特徴は、コンパイラであるという点です。

多くのJavaScriptフレームワーク（ReactやVueなど）は、ブラウザ上で動作する「ランタイム」ライブラリに依存しています。これらのフレームワークは、仮想DOM（Virtual DOM）と呼ばれる技術を使って、UIの変更を効率的に検知し、実際のDOMに反映させます。これは確かに効率的ですが、フレームワーク自体のコードをブラウザに読み込み、実行するためのオーバーヘッドが伴います。

一方、Svelteは異なるアプローチを取ります。開発者が書いたSvelteコンポーネント（HTML、CSS、JavaScriptを組み合わせたもの）を、ビルド時（アプリケーションを構築する段階）に、非常に効率的で小さなJavaScriptコードにコンパイルします。このコンパイルされたコードは、仮想DOMを使わずに、直接DOMを操作します。

これにより、以下のようなメリットが生まれます。

• バンドルサイズの削減: ブラウザに送信するJavaScriptの量が少なくなり、初期ロード時間が短縮されます。
• 優れたランタイムパフォーマンス: 仮想DOMの差分検出処理が不要になるため、UIの更新が高速になります。

Svelteは、まるでフレームワークが存在しないかのように動作するため、「消えるフレームワーク」とも呼ばれることがあります。開発者はシンプルで直感的な構文でコードを書くことができ、最終的な成果物は最適化されたVanilla JavaScriptに近くなります。

1. コンパイラとしての動作 (仮想DOM不使用)

前述の通り、Svelteはコンパイラです。ビルド時にコードを最適化し、仮想DOMのオーバーヘッドを排除します。これにより、特にリソースが限られたデバイスや低速なネットワーク環境において、顕著なパフォーマンス向上が期待できます。Svelteの公式サイトでは「仮想DOMは純粋なオーバーヘッドである」と主張する記事も公開されています。

2. 真のリアクティビティ

Svelteのリアクティビティ（状態の変化に応じてUIが自動的に更新される仕組み）は非常にシンプルです。特別な関数やフックを使わず、通常のJavaScriptの代入演算子 (=) を使うだけで、変数の変更が検知され、UIが更新されます。これはSvelteコンパイラが代入文を検知し、関連するUI更新コードを自動的に生成してくれるためです。

// Svelteコンポーネント内
<script>
  let count = $state(0); // Svelte 5のRunes構文

  function handleClick() {
    count += 1; // これだけでUIが更新される！
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

さらに、$derived Rune（Svelte 5）や $: ラベル（Svelte 4以前）を使うことで、ある変数が他の変数に依存して計算されるリアクティブな宣言も簡単に記述できます。

// Svelte 5
<script>
  let count = $state(0);
  let double = $derived(count * 2);
</script>
<p>{count} * 2 = {double}</p>

// Svelte 4
<script>
  let count = 0;
  $: double = count * 2;
</script>
<p>{count} * 2 = {double}</p>

3. 少ないコード量

Svelteは、HTML、CSS、JavaScriptの標準的な知識を活用しつつ、非常に簡潔な構文を提供します。ボイラープレート（定型的なコード）が少なく、コンポーネントの構造が直感的に理解しやすいため、開発効率が向上し、コードの可読性も高まります。例えば、コンポーネントのスタイルは<style>タグ内に記述するだけで、自動的にそのコンポーネントにスコープが限定されます（Scoped CSS）。

<!-- MyComponent.svelte -->
<script>
  let name = 'world';
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<p class="greeting">This paragraph is styled locally.</p>

<style>
  h1 {
    color: purple;
  }
  /* このスタイルはこのコンポーネント内でのみ適用される */
  .greeting {
    color: green;
    font-size: 1.2em;
  }
</style>

4. 優れたパフォーマンス

コンパイルによる最適化、仮想DOMの不使用、そして軽量なバンドルサイズにより、Svelteアプリケーションは一般的に非常に高速です。初期ロード時間、インタラクションへの応答性、メモリ使用量のいずれにおいても、他の主要なフレームワークと比較して優れたパフォーマンスを示すことが多いです。

JavaScriptフレームワークのパフォーマンス比較ベンチマークなどでも、Svelteはしばしばトップクラスの成績を収めています。

Svelteは、The New York Timesのグラフィックスエディタとしても知られるRich Harris氏によって開発されました。彼は以前にもRactive.jsというJavaScriptライブラリを開発しており、その経験がSvelteの開発に活かされています。

• 2016年11月: Svelteの最初のバージョンがリリースされました。コンパイラベースという革新的なアプローチが注目を集め始めました。
• 2019年4月: Svelte 3がリリースされました。リアクティビティの仕組みが大幅に改善され、$: ラベル構文などが導入され、より宣言的でシンプルなコード記述が可能になりました。このバージョンでSvelteの人気は大きく高まりました。
• 2020年頃〜: SvelteKitの開発が本格化。Svelteをベースにしたアプリケーションフレームワークで、ルーティング、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）などの機能を提供します。以前のSapperフレームワークの後継として位置づけられています。
• 2022年12月: SvelteKit 1.0が正式にリリースされ、本番環境での利用が推奨されるようになりました。
• 2023年6月: Svelte 4がリリース。パフォーマンスの向上、パッケージサイズの削減、開発者体験の改善に焦点が当てられました。Svelte 5への移行を見据えた準備段階としての側面も持ちます。
• 2024年10月: Svelte 5が正式にリリース。リアクティビティのコアメカニズムが「Runes」と呼ばれる新しいシステムに刷新され、より細やかな制御と予測可能性、そして.js/.tsファイル内でのリアクティビティ利用が容易になりました。$state, $derived, $effectなどのRuneが導入されました。

Svelteはコミュニティと共に活発に開発が続けられており、SvelteKitも頻繁にアップデートされ、機能が強化されています。2025年4月時点でも、Svelte 5やSvelteKitには新しいオプションや改善が追加されています。例えば、クライアントサイドID生成を改善するidPrefixオプションや、Derivedステートメントの書き換え機能などが最近追加されました。

Svelteを他の人気フレームワーク、特にReactとVueと比較してみましょう。

主な違いのポイント:

• 根本的な動作: Svelteはビルド時に仕事をするコンパイラ、React/Vueは実行時に仕事をするライブラリ/フレームワーク。
• パフォーマンスとサイズ: Svelteは一般的にバンドルサイズが小さく、ランタイムパフォーマンスに優れる傾向があります。
• 学習と記述: Svelteは標準技術に近く、コードが簡潔なため、学習しやすいと感じる開発者が多いです。ReactはJSX、Vueは独自のテンプレート構文やAPIを学びます。
• エコシステム: Reactは圧倒的に巨大なエコシステムとコミュニティを持ち、ライブラリやツール、求人数で有利です。Vueも成熟しており、Svelteは急速に成長していますが、まだ追いついてはいません。

どちらが良いかはプロジェクトの要件やチームのスキルセットによります。パフォーマンスやバンドルサイズが最重要視される場合や、学習コストを抑えたい場合にはSvelteが有力な選択肢となります。大規模で複雑なアプリケーションや、既存の豊富なReact/Vueエコシステムを活用したい場合は、ReactやVueが適しているかもしれません。

Svelteを始めるのは非常に簡単です。Node.jsがインストールされていれば、数コマンドで開発環境をセットアップできます。

1. 環境構築

まず、Node.js (npmを含む) が必要です。インストールされていない場合は、公式サイトからダウンロードしてインストールしてください。最新のLTSバージョンを推奨します。

Node.jsのバージョン管理ツール（nvm-windows, nvm, Volta など）を使うと、プロジェクトごとにNode.jsのバージョンを切り替えられて便利です。

2. プロジェクト作成

ターミナルを開き、プロジェクトを作成したいディレクトリに移動して、以下のコマンドを実行します。my-svelte-app は好きなプロジェクト名に置き換えてください。

# npmを使う場合
npm create svelte@latest my-svelte-app

# yarnを使う場合
yarn create svelte my-svelte-app

# pnpmを使う場合
pnpm create svelte my-svelte-app

コマンドを実行すると、対話形式でプロジェクトのテンプレートや設定を選択できます。

1. Project name: プロジェクト名を確認 (例: `my-svelte-app`)。
2. Which Svelte app template?:
   • SvelteKit demo app: デモ機能が含まれたテンプレート。
   • Skeleton project: 最小限の構成のテンプレート (推奨)。
   • Library project: Svelteコンポーネントライブラリを作る場合。
   ここでは `Skeleton project` を選択するのが一般的です。
3. Add type checking?: TypeScriptを使用するかどうか。Yes/Noを選択します。TypeScriptを使うことを推奨します (`Yes, using TypeScript syntax`)。
4. Select additional options: ESLint (コードリンティング)、Prettier (コードフォーマット)、Playwright (ブラウザテスト)、Vitest (ユニットテスト) を追加するかどうか。必要に応じてスペースキーで選択します。ESLintとPrettierは選択しておくと良いでしょう。

選択が終わると、プロジェクトディレクトリが作成されます。次に、そのディレクトリに移動して、依存関係をインストールします。

cd my-svelte-app
npm install  # または yarn install, pnpm install

3. 開発サーバーの起動

依存関係のインストールが終わったら、開発サーバーを起動します。

npm run dev -- --open # または yarn dev --open, pnpm dev --open

--open オプションを付けると、自動的にブラウザで開発中のアプリケーションが開きます。デフォルトでは http://localhost:5173 などでアクセスできます。

これで、Svelte (SvelteKit) の開発を始める準備が整いました！🎉

4. 基本的なファイル構造 (Skeleton projectの場合)

開発を始めるには、まず src/routes/+page.svelte を編集してみると良いでしょう。変更内容は開発サーバーによって自動的に検知され、ブラウザに反映されます（ホットモジュールリプレイスメント）。

1. コンポーネント (`.svelte` ファイル)

Svelteアプリケーションは、再利用可能なコンポーネントの組み合わせで構築されます。各コンポーネントは通常、単一の .svelte ファイルで定義されます。このファイルには、以下の3つの主要なセクションを含めることができます。

• <script> タグ: コンポーネントのロジック（JavaScriptまたはTypeScript）を記述します。変数、関数、インポートなどを定義します。
• マークアップ (HTML): コンポーネントの構造を定義します。通常のHTMLタグに加え、Svelte独自のテンプレート構文（条件分岐、繰り返しなど）を使用できます。
• <style> タグ: コンポーネントのスタイル（CSS）を記述します。デフォルトで、ここに書かれたスタイルはそのコンポーネントのスコープに限定されます。

<!-- Greeting.svelte -->
<script lang="ts">
  export let name: string = 'Guest'; // Propsの宣言 (TypeScript)
  let count = $state(0); // リアクティブな状態 (Svelte 5)

  function increment() {
    count += 1;
  }
</script>

<div class="greeting-card">
  <h2>Hello, {name}!</h2>
  <p>You clicked the button {count} times.</p>
  <button on:click={increment}>Click Me</button>
</div>

<style>
  .greeting-card {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #f9f9f9;
  }
  h2 {
    color: dodgerblue;
  }
  button {
    background-color: dodgerblue;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  button:hover {
    background-color: royalblue;
  }
</style>

2. リアクティビティ (`$state`, `$derived`, `$effect` / `let`, `=`)

Svelte 5では「Runes」と呼ばれる仕組みでリアクティビティを扱います。

• $state(): リアクティブな状態変数を宣言します。この変数の値が変更されると、それを使用しているUI部分が自動的に更新されます。
• $derived(): 他のリアクティブな状態から計算される値を宣言します。依存する状態が変化すると、この値も自動的に再計算されます。
• $effect(): リアクティブな状態が変化したときに、副作用（DOMの直接操作、API呼び出しなど）を実行します。コンポーネントのマウント時にも実行されます。

// Svelte 5 Runes
<script>
  let count = $state(0);
  let message = $derived(count === 0 ? 'Not clicked yet' : `Clicked ${count} times`);

  $effect(() => {
    console.log('Count changed:', count);
    // DOM操作やAPI呼び出しなど
    document.title = `Count: ${count}`;

    // クリーンアップ関数 (オプション)
    return () => {
      console.log('Effect cleanup for count:', count);
    };
  });

  function increment() {
    count += 1;
  }
</script>

<p>{message}</p>
<button on:click={increment}>Click</button>

Svelte 4以前では、letで宣言された変数が代入 (=) によって更新されるとリアクティブになり、$: ラベルを使ってDerivedステートメントやリアクティブな処理ブロックを記述していました。

3. プロパティ (Props)

親コンポーネントから子コンポーネントへデータを渡すには、プロパティ（Props）を使用します。子コンポーネントの<script>ブロック内でexport let (Svelte 4以前) または $props() (Svelte 5) を使って変数を宣言すると、それがプロパティとして公開されます。

<!-- ChildComponent.svelte -->
<script lang="ts">
  // Svelte 5
  let { message = 'Default message', count = 0 }: { message?: string, count?: number } = $props();

  // Svelte 4
  // export let message: string = 'Default message';
  // export let count: number = 0;
</script>

<div>
  <p>{message}</p>
  <p>Count: {count}</p>
</div>

<!-- ParentComponent.svelte -->
<script lang="ts">
  import ChildComponent from './ChildComponent.svelte';
  let parentMessage = 'Message from parent';
  let parentCount = $state(10); // Svelte 5
</script>

<ChildComponent message={parentMessage} count={parentCount} />
<ChildComponent message="Another message" /> <!-- countはデフォルト値0 -->
<ChildComponent /> <!-- messageとcountはデフォルト値 -->

<button onclick={() => parentCount += 1}>Increment Parent Count</button>

4. イベント処理 (`on:`)

HTML要素のイベント（クリック、入力など）を処理するには、on:ディレクティブを使用します。

<script>
  let count = $state(0);
  let text = $state('');

  function handleClick() {
    count += 1;
  }

  function handleInput(event) {
    // event.targetから値を取得
    text = event.target.value;
  }
</script>

<button on:click={handleClick}>
  Click me ({count})
</button>

<input type="text" value={text} on:input={handleInput} placeholder="Type something" />
<p>You typed: {text}</p>

<!-- イベント修飾子も使用可能 -->
<form on:submit|preventDefault={() => console.log('Form submitted!')}>
  <button type="submit">Submit</button>
</form>

子コンポーネントから親コンポーネントへイベントを通知するには、createEventDispatcherを使用します。

<!-- ChildNotifier.svelte -->
<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  const dispatch = createEventDispatcher<{ notify: string }>();

  function sendNotification() {
    dispatch('notify', 'Hello from child!'); // 'notify'イベントを発行
  }
</script>

<button on:click={sendNotification}>Notify Parent</button>

<!-- ParentListener.svelte -->
<script lang="ts">
  import ChildNotifier from './ChildNotifier.svelte';
  let notification = $state('');

  function handleNotification(event: CustomEvent<string>) {
    notification = event.detail; // イベントデータはevent.detailに入る
  }
</script>

<ChildNotifier on:notify={handleNotification} />
<p>Notification received: {notification || 'None'}</p>

5. テンプレート構文 (条件分岐、繰り返し)

Svelteは、HTML内にロジックを埋め込むための直感的なテンプレート構文を提供します。

• 条件分岐 ({#if ...}):

  {#if user.loggedIn}
    <button on:click={logout}>Log out</button>
  {:else if user.loggingIn}
    <p>Logging in...</p>
  {:else}
    <button on:click={login}>Log in</button>
  {/if}

• 繰り返し ({#each ...}):

  <ul>
    {#each items as item, i (item.id)}
      <li>{i + 1}: {item.name}</li>
    {:else}
      <li>No items found.</li>
    {/each}
  </ul>
  <!-- (item.id) はキー付きイテレーション。リスト変更時のパフォーマンスを最適化 -->

• Awaitブロック ({#await ...}): 非同期処理の結果を扱うのに便利です。

  {#await fetchData()}
    <p>Loading data...</p>
  {:then data}
    <p>Data loaded: {JSON.stringify(data)}</p>
  {:catch error}
    <p class="has-text-danger">Error loading data: {error.message}</p>
  {/await}

6. ライフサイクル関数

コンポーネントの特定のタイミングでコードを実行するためのライフサイクル関数が用意されています。（Svelte 5の $effect はこれらの多くを代替できますが、特定の用途では依然として有用です）

• onMount(callback): コンポーネントがDOMにマウントされた直後に一度だけ実行されます。初期化処理（API呼び出し、タイマー設定など）に適しています。
• onDestroy(callback): コンポーネントが破棄される直前に実行されます。イベントリスナーの解除やタイマーのクリアなど、クリーンアップ処理に使用します。
• beforeUpdate(callback): コンポーネントの状態が更新され、DOMが更新される直前に実行されます。
• afterUpdate(callback): コンポーネントの状態が更新され、DOMが更新された直後に実行されます。

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';

  let intervalId: number;
  let seconds = $state(0);

  onMount(() => {
    console.log('Component mounted!');
    intervalId = setInterval(() => {
      seconds += 1;
    }, 1000);

    // onMountから関数を返すと、それがonDestroyのコールバックになる
    return () => {
      console.log('Component will unmount (cleanup from onMount)!');
      clearInterval(intervalId);
    };
  });

  // onDestroyを別途定義することも可能
  // onDestroy(() => {
  //   console.log('Component destroyed!');
  //   clearInterval(intervalId);
  // });
</script>

<p>Seconds elapsed: {seconds}</p>

7. ストア (Stores)

コンポーネントツリーの異なる場所にあるコンポーネント間で状態を共有するための仕組みがストアです。Svelteには組み込みのストア機能があり、シンプルながら強力です。

• writable: 外部から値を設定できるストア。setメソッドとupdateメソッドを持ちます。
• readable: 外部からは読み取り専用のストア。作成時に初期値を設定し、内部ロジックでのみ更新できます。
• derived: 1つ以上の他のストアの値に基づいて計算されるストア。

ストアの値を利用するには、コンポーネントのスクリプト内でストア名の前に$を付けます（オートサブスクリプション）。これにより、ストアの値が変更されると自動的にコンポーネントが更新されます。

// stores.ts
import { writable, readable, derived } from 'svelte/store';

export const count = writable(0); // 書き込み可能なストア

export const time = readable(new Date(), (set) => { // 読み取り専用ストア
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval); // クリーンアップ関数
});

export const elapsed = derived( // 派生ストア
  time, // 依存するストア
  ($time, set) => { // 計算関数
    const start = $time.getTime();
    const interval = setInterval(() => {
      set(Math.round(($time.getTime() - start) / 1000));
    }, 1000);
    // set() を使って非同期に値を更新することも可能
    // ここでは例として即時計算された値を返す
    // return Math.round(($time.getTime() - start) / 1000);
    return () => clearInterval(interval); // derivedでもクリーンアップ可能
  },
  0 // 初期値 (オプション)
);

// MyComponent.svelte
<script lang="ts">
  import { count, time, elapsed } from './stores';

  // ストアの値にアクセスするには $ を付ける
  // Svelteが自動的にサブスクライブ/アンサブスクライブしてくれる
  // Svelte 5 では $state や $derived を使ってローカルで管理することも多い
  let localCountCopy = $state($count); // ストアの値を初期値とするローカルステート

  function increment() {
    count.update(n => n + 1); // ストアのupdateメソッド
  }
  function reset() {
    count.set(0); // ストアのsetメソッド
  }
</script>

<h3>Store Example</h3>
<p>Current count: {$count}</p>
<p>Current time: {$time.toLocaleTimeString()}</p>
<!-- <p>Seconds elapsed since mount (derived): {$elapsed}</p> --> <!-- derivedの例が非同期更新になったためコメントアウト -->
<p>Local copy of count: {localCountCopy} (store changes don't affect this directly)</p>

<button on:click={increment}>Increment Count</button>
<button on:click={reset}>Reset Count</button>

SvelteはUIコンポーネントを構築するためのライブラリ（またはコンパイラ）ですが、実際のWebアプリケーション開発では、ルーティング、データ取得、サーバーサイドレンダリング（SSR）、ビルド最適化など、多くの要素が必要になります。これらの機能を提供するのが、Svelte公式のアプリケーションフレームワークであるSvelteKitです。

ReactにおけるNext.jsやVueにおけるNuxt.jsに相当するものと考えて良いでしょう。Svelteで本格的なWebアプリケーションを開発する場合、通常はSvelteKitを使用します。

SvelteKitの主な機能:

• ファイルシステムベースのルーティング: src/routesディレクトリの構造がそのままURLパスに対応します。直感的で管理しやすいです。
• サーバーサイドレンダリング (SSR): ページをサーバー側でレンダリングしてからクライアントに送信します。初期表示速度の向上やSEOに有利です。
• 静的サイト生成 (SSG): ビルド時にページをHTMLファイルとして生成します。CDNからの配信に適しており、非常に高速です。
• クライアントサイドレンダリング (CSR): 従来のSPA（シングルページアプリケーション）のように、ブラウザ側でJavaScriptを実行してページをレンダリングします。
• アダプタ: Vercel, Netlify, Cloudflare Workers, Node.jsサーバーなど、様々なデプロイ環境に対応するためのアダプタが用意されています。
• データ読み込み (Load関数): ページやレイアウトコンポーネントが表示される前に、サーバーまたはクライアントでデータを取得するための仕組み (+page.server.ts, +page.ts, +layout.server.ts, +layout.ts)。
• フォームアクション: サーバーサイドでフォーム送信を安全かつ簡単に処理するための機能。Progressive Enhancement（JavaScriptが無効でも動作する）も考慮されています。
• その他: 環境変数管理、フック、サービスワーカー連携、プリロードなど、モダンなWeb開発に必要な機能が豊富に揃っています。

SvelteKitは、Svelteのシンプルさとパフォーマンスを活かしつつ、複雑なアプリケーション開発を効率化し、堅牢にするための強力なツールセットを提供します。新しいプロジェクトを始める際には、npm create svelte@latest コマンドがデフォルトでSvelteKitプロジェクトを作成します。

SvelteKitも活発に開発されており、2025年4月時点の最新バージョンでは、rerouteフックによるルーティング制御の強化や、emulate機能による開発時の環境模倣などが追加されています。また、Cloudflareアダプタのアップデートなど、デプロイ環境への対応も継続的に改善されています。

Svelteは、その革新的なコンパイラベースのアプローチにより、フロントエンド開発に新しい風を吹き込んでいます。

Svelteの主な利点:

• 🚀 優れたパフォーマンス: 仮想DOMのオーバーヘッドがなく、最適化されたJavaScriptが生成されるため高速。
• 📦 軽量なバンドルサイズ: アプリケーションの初期ロード時間を短縮。
• ✍️ シンプルな構文と少ないコード量: HTML/CSS/JSに近く、学習しやすく、開発効率が高い。
• ✨ 真のリアクティビティ: ボイラープレートが少なく、直感的な状態管理。
• 🎨 組み込みのスコープ付きCSSとアニメーション: スタイリングやUI効果の実装が容易。

一方で、ReactやVueと比較すると、エコシステムやコミュニティの規模、利用可能なサードパーティ製ライブラリの種類、求人数などではまだ発展途上な面もあります。しかし、その成長速度は目覚ましく、多くの開発者や企業から注目を集めています。

SvelteとSvelteKitは、特にパフォーマンスが重要視されるプロジェクト、小〜中規模のアプリケーション、プロトタイピング、あるいは新しい技術を学びたい開発者にとって、非常に魅力的な選択肢となるでしょう。

公式のインタラクティブチュートリアルやドキュメントは非常に質が高く、学習リソースも充実してきています。ぜひ一度、Svelteの世界に触れてみてはいかがでしょうか？ 😊