Svelte はコンパイル時に何をやっているのか？

<!-- Svelteコンポーネント -->
<script>
  // $state: リアクティブな状態変数を定義
  let count = $state(0);
  // $derived: countに依存する派生値を定義
  let doubled = $derived(count * 2);
  // 複数の変数から派生値を作成できる
  let message = $derived(`Count is ${count}`);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>
<p>{doubled}</p>
<p>{message}</p>

// 簡略化したコンパイル結果
// Svelteコンパイラが生成する実際のコードを簡略化したもの
let count = 0;
let doubled, message;

// 依存関係を事前に把握し、必要な更新のみ実行
function update_count(value) {
  count = value;
  // コンパイラが依存を解析済み
  // doubledはcountに依存することをコンパイル時に把握
  doubled = count * 2;
  message = `Count is ${count}`;
  
  // 影響を受ける要素だけを直接更新
  // DOM要素への参照はコンパイル時に保存されている
  button.textContent = `Clicked ${count} times`;
  p1.textContent = doubled;
  p2.textContent = message;
}

状態変更 → 新Virtual DOM生成 → 旧Virtual DOMと比較 → 差分を実DOMに適用

状態変更 → 事前に特定された箇所のみ直接更新

// React/Vueの場合（実行時に差分計算）
// 毎回Virtual DOMツリー全体を生成し、前回のツリーと比較する
function render() {
  // Virtual DOMオブジェクトを生成（メモリ使用）
  const newVDOM = {
    type: 'div',
    children: [
      { type: 'h1', props: { children: count }},
      { type: 'p', props: { children: doubled }}
    ]
  };
  // ここで差分計算が発生（CPUコストが高い）
  // 全てのノードを比較して変更箇所を探す
  diff(oldVDOM, newVDOM);
}

// Svelteの場合（コンパイル時に更新箇所を特定）
// コンパイル時に「countが変更されたらh1とpを更新」と決定済み
function update(count) {
  // 変更箇所を直接更新（差分計算なし）
  // DOMノードへの参照は既に保持されている
  // Virtual DOMの生成や比較は一切不要
  h1.textContent = count;
  p.textContent = count * 2;
}

<!-- Svelteコンポーネント -->
<script>
  import { onMount, afterUpdate, beforeUpdate } from 'svelte';
  
  // onMountのみ使用
  // afterUpdateとbeforeUpdateはimportされているが使用されていない
  onMount(() => {
    console.log('mounted');
  });
  // afterUpdateとbeforeUpdateのコードはバンドルに含まれない
</script>

<!-- シンプルな条件分岐 -->
{#if visible}
  <div>Content</div>
{/if}

// ブロックの作成・破棄を効率的に管理
// DOMノードの再利用とメモリ管理が最適化されている

// 初期状態でifブロックを管理
let if_block = visible ? create_if_block() : null;

function update(visible) {
  if (visible) {
    // ブロックが存在しない場合のみ作成
    if (!if_block) {
      if_block = create_if_block();
      if_block.mount(target);  // DOMにマウント
    }
    // 既に存在する場合は何もしない（最適化）
  } else if (if_block) {
    // 非表示時はDOMから完全に削除
    if_block.destroy();
    if_block = null;
  }
}

// デコレータでコンポーネントを定義
@Component({
  selector: 'app-todo',
  template: `
    <!-- Angularテンプレート構文 -->
    <div *ngFor="let todo of todos$ | async">
      {{ todo.text }}
    </div>
  `
})
export class TodoComponent {
  // RxJS Observableを使用
  todos$ = this.todoService.getTodos();
  
  // DIシステムでサービスを注入
  constructor(private todoService: TodoService) {}
}

<script lang="ts">
  // シンプルなリアクティブ変数
  let todos = $state([]);
  
  // 直接的でシンプル
  // DIコンテナ、デコレータ、RxJSなど不要
  onMount(async () => {
    // 通常のFetch APIを使用
    todos = await fetchTodos();
  });
</script>

<!-- Svelteのテンプレート構文 -->
{#each todos as todo}
  <div>{todo.text}</div>
{/each}