Svelte完全ガイド：コンパイラが変えるフロントエンド開発の未来

<script>
  // ロジック（JavaScript）
  let count = 0;

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

<main>
  <h1>カウンター</h1>
  <p>現在の値: {count}</p>
  <button on:click={handleClick}>
    カウントアップ
  </button>
</main>

<style>
  /* 見た目（CSS） - 自動的にカプセル化されます */
  main {
    text-align: center;
    padding: 1em;
  }
  h1 {
    color: #ff3e00;
  }
</style>

// 配列の更新例（スプレッド構文で再代入するのがSvelte流）
let items = ['Apple', 'Banana'];

function addItem() {
  items = [...items, 'Orange']; // 再代入によりリアクティビティが発動
}

<script>
  let count = 1;
  let price = 100;

  // count または price が変わるたびに total が自動再計算される
  $: total = count * price;

  // 条件付きの実行も可能
  $: if (total > 1000) {
    console.log('買いすぎです！');
  }
</script>

<p>合計: {total}円</p>

<script>
  // exportを付けることで「外部からの入力」を受け付ける
  export let userName = "ゲスト"; 
</script>

<p>こんにちは、{userName}さん！</p>

<script>
  import Child from './Child.svelte';
</script>

<Child userName="山田" />

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();

  function notify() {
    dispatch('message', { text: 'こんにちは！' });
  }
</script>
<button on:click={notify}>親へ通知</button>

import { writable } from 'svelte/store';
export const theme = writable('light');

<script>
  import { theme } from './stores.js';
</script>

<div class="container {$theme}">
  現在のテーマ: {$theme}
  <button on:click={() => theme.set('dark')}>ダークモードへ</button>
</div>

<script>
  let users = [
    { id: 1, name: '田中', active: true },
    { id: 2, name: '佐藤', active: false }
  ];
</script>

<ul>
  {#each users as user (user.id)}
    <li>
      {user.name} 
      {#if user.active}
        <span class="status">オンライン</span>
      {:else}
        <span class="status">オフライン</span>
      {/if}
    </li>
  {:else}
    <p>ユーザーが見つかりません。</p>
  {/each}
</ul>

<script>
  let name = '';
  let checked = false;
</script>

<input type="text" bind:value={name}>
<input type="checkbox" bind:checked={checked}>

<p>{name}さんは、利用規約に {checked ? '同意しています' : '同意していません'}</p>

<script>
  import { fade, slide } from 'svelte/transition';
  let isVisible = false;
</script>

<label>
  <input type="checkbox" bind:checked={isVisible}> 表示切り替え
</label>

{#if isVisible}
  <div transition:fade>ふわっと表示されます</div>
  <div transition:slide={{ duration: 500 }}>スライドしながら現れます</div>
{/if}