Svelte 5 完全ガイド【2026年最新】｜Runes（$state・$derived・$effect・$props・$bindable・$inspect・$host）・Snippets・{@render}・Universal Reactivity・Svelte 4 からの移行まで解説

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

  function increment() {
    count += 1;               // 代入でそのまま更新できる（Store の .set() 不要）
  }
</script>

<button onclick={increment}>
  clicked {count} {count === 1 ? "time" : "times"}
</button>

<script>
  let todos = $state([
    { id: 1, text: "Svelte 5 を学ぶ", done: false },
  ]);

  function add() {
    todos.push({ id: Date.now(), text: "", done: false });   // OK
  }

  function toggle(i) {
    todos[i].done = !todos[i].done;                          // OK
  }
</script>

{#each todos as todo, i (todo.id)}
  <label>
    <input type="checkbox" checked={todo.done} onchange={() => toggle(i)} />
    {todo.text}
  </label>
{/each}
<button onclick={add}>追加</button>

// .svelte.ts 拡張子なら runes が使える
export function createCounter(initial = 0) {
  let count = $state(initial);

  return {
    get count() { return count; },
    increment() { count += 1; },
    reset() { count = 0; },
  };
}

<script>
  import { createCounter } from "./counter.svelte.ts";
  const counter = createCounter(10);
</script>

<button onclick={counter.increment}>
  {counter.count}
</button>

<script>
  let width  = $state(10);
  let height = $state(5);

  // ① インライン
  let area = $derived(width * height);

  // ② 複雑なロジックは $derived.by で関数形式
  let category = $derived.by(() => {
    if (area < 20)   return "small";
    if (area < 100)  return "medium";
    return "large";
  });
</script>

<input type="number" bind:value={width}  />
<input type="number" bind:value={height} />
<p>面積: {area}（{category}）</p>

<script>
  import Chart from "chart.js/auto";
  let canvas;
  let data = $state([1, 2, 3]);

  $effect(() => {
    const chart = new Chart(canvas, {
      type: "bar",
      data: { labels: data.map((_, i) => i), datasets: [{ data }] },
    });
    return () => chart.destroy();      // cleanup（unmount / 再実行前）
  });
</script>

<canvas bind:this={canvas}></canvas>
<button onclick={() => data.push(Math.random() * 10)}>追加</button>

<script>
  let messages = $state([]);
  let box;
  let autoscroll = $state(true);

  $effect.pre(() => {
    if (!box) return;
    // 更新後にスクロール末尾だったか事前判定
    autoscroll = box.scrollTop + box.clientHeight >= box.scrollHeight - 4;
  });

  $effect(() => {
    if (autoscroll) box.scrollTop = box.scrollHeight;
  });
</script>

<script lang="ts">
  interface Props {
    title: string;
    subtitle?: string;
    size?: "sm" | "md" | "lg";
  }

  let { title, subtitle = "", size = "md" }: Props = $props();
</script>

<h2 class="size-{size}">{title}</h2>
{#if subtitle}<p>{subtitle}</p>{/if}

<script lang="ts">
  let { label, ...rest }: { label: string; [k: string]: any } = $props();
  const uid = $props.id();    // コンポーネントインスタンス固有の安定 ID
</script>

<label for={uid}>{label}</label>
<input id={uid} {...rest} />

<script lang="ts">
  interface Props { value: string; placeholder?: string; }
  // $bindable() を付けると親側で bind: が使える
  let { value = $bindable(""), placeholder = "" }: Props = $props();
</script>

<input {placeholder} bind:value />

<script>
  import TextField from "./TextField.svelte";
  let query = $state("");
</script>

<TextField bind:value={query} placeholder="検索..." />
<p>現在の値: {query}</p>

<script>
  let user = $state({ name: "Alice", age: 25 });

  // 値が変わるたびに console に出力（初回は init、以降は update でラベル付け）
  $inspect(user);

  // 出力方法をカスタム
  $inspect(user).with((type, value) => {
    if (type === "update") {
      console.warn(`user updated:`, value);
    }
  });
</script>

<svelte:options customElement="my-counter" />
<script>
  let count = $state(0);

  function dispatch() {
    // Custom Element のホスト要素を取得
    $host().dispatchEvent(new CustomEvent("tick", { detail: count }));
  }

  $effect(() => {
    const id = setInterval(() => { count++; dispatch(); }, 1000);
    return () => clearInterval(id);
  });
</script>

<span>{count}</span>

<script lang="ts">
  import type { Snippet } from "svelte";
  let { children }: { children: Snippet } = $props();
</script>

<div class="card">
  {@render children()}
</div>

<Card>
  <p>任意のコンテンツ</p>
</Card>

<script lang="ts">
  import type { Snippet } from "svelte";
  let {
    header,
    children,
    footer,
  }: { header?: Snippet; children: Snippet; footer?: Snippet } = $props();
</script>

<header>{#if header}{@render header()}{/if}</header>
<main>{@render children()}</main>
<footer>{#if footer}{@render footer()}{/if}</footer>

<Layout>
  {#snippet header()}
    <h1>タイトル</h1>
  {/snippet}

  本文コンテンツ

  {#snippet footer()}
    <small>© 2026 codingls</small>
  {/snippet}
</Layout>

<script lang="ts">
  import type { Snippet } from "svelte";
  let {
    items,
    row,
  }: { items: Item[]; row: Snippet<[Item, number]> } = $props();
</script>

<ul>
  {#each items as item, i}
    <li>{@render row(item, i)}</li>
  {/each}
</ul>

<List {items}>
  {#snippet row(item, i)}
    <strong>{i + 1}.</strong> {item.title}
  {/snippet}
</List>

<!-- Svelte 4 -->
<button on:click={handler} on:click|preventDefault={submit}>

<!-- Svelte 5 -->
<button onclick={handler} onclick={(e) => { e.preventDefault(); submit(); }}>

<script lang="ts">
  interface Props {
    count: number;
    onlike?: (count: number) => void;   // ← コールバック props
  }
  let { count, onlike }: Props = $props();
</script>

<button onclick={() => onlike?.(count + 1)}>
  ♥ {count}
</button>

<LikeButton count={likes} onlike={(n) => likes = n} />

export type CartItem = { sku: string; qty: number };

function createCart() {
  let items = $state<CartItem[]>([]);
  let total = $derived(items.reduce((sum, it) => sum + it.qty, 0));

  return {
    get items() { return items; },
    get total() { return total; },
    add(sku: string) {
      const found = items.find((it) => it.sku === sku);
      if (found) found.qty += 1;
      else items.push({ sku, qty: 1 });
    },
    remove(sku: string) {
      items = items.filter((it) => it.sku !== sku);
    },
    clear() { items = []; },
  };
}

export const cart = createCart();

<script>
  import { cart } from "./cart.svelte.ts";
</script>

<p>カート: {cart.total} 点</p>
<button onclick={() => cart.add("SKU-001")}>追加</button>
{#each cart.items as item (item.sku)}
  <li>{item.sku} x {item.qty}</li>
{/each}

type User = { id: string; name: string; email: string };

export function createUserState() {
  let user = $state<User | null>(null);
  let loading = $state(false);
  let error = $state<Error | null>(null);

  async function load(id: string) {
    loading = true; error = null;
    try {
      const res = await fetch(`/api/users/${id}`);
      user = (await res.json()) as User;
    } catch (e) {
      error = e as Error;
    } finally {
      loading = false;
    }
  }

  return {
    get user() { return user; },
    get loading() { return loading; },
    get error() { return error; },
    load,
  };
}

<script lang="ts" generics="T">
  import type { Snippet } from "svelte";
  interface Props<T> {
    items: T[];
    row: Snippet<[T, number]>;
  }
  let { items, row }: Props<T> = $props();
</script>

<ul>
  {#each items as item, i}<li>{@render row(item, i)}</li>{/each}
</ul>

# 1) Svelte 5 にアップグレード
npm install svelte@5 @sveltejs/kit@latest
# TypeScript を使っているなら
npm install -D typescript@latest svelte-check@latest

# 2) 公式マイグレーションスクリプト（破壊的に書き換える）
npx sv migrate svelte-5

# 3) 差分確認（必ず git diff でレビュー）
git diff

# 4) 開発サーバーで警告を拾う
npm run dev

# 5) 型チェック
npm run check

<script lang="ts">
  import type { PageData, ActionData } from "./$types";

  let { data, form }: { data: PageData; form: ActionData } = $props();

  // data.items は PageData から型推論される
  let filter = $state("");
  let filtered = $derived(
    data.items.filter((it) => it.title.includes(filter))
  );
</script>

<input bind:value={filter} placeholder="検索..." />

<form method="POST" action="?/create" use:enhance>
  <input name="title" required />
  <button>作成</button>
  {#if form?.error}<p class="err">{form.error}</p>{/if}
</form>

{#each filtered as it (it.id)}
  <article>{it.title}</article>
{/each}