コンポーネントライフサイクル

<script lang="ts">
  let mounted = $state(false);
  let updateCount = $state(0);
  
  // このeffectはコンポーネントのライフサイクルに自動的に紐づく
  $effect(() => {
    // 初回実行 = マウント時
    if (!mounted) {
      mounted = true;
      console.log('Initial mount');
    }
    
    // 更新時（updateCountが変更されるたび）
    console.log(`Update count: ${updateCount}`);
    
    // このreturn文はコンポーネント破棄時にも実行される
    return () => {
      console.log('Cleanup for update count:', updateCount);
    };
  });
</script>

<div>
  <p>マウント状態: {mounted ? 'マウント済み' : '未マウント'}</p>
  <p>更新回数: {updateCount}</p>
  <button onclick={() => updateCount++}>更新</button>
</div>

<script lang="ts">
  let count = $state(0);
  let mounted = $state(false);
  
  // マウント時とアンマウント時の処理
  $effect(() => {
    // マウント時の処理（componentDidMountに相当）
    mounted = true;
    console.log('コンポーネントがマウントされました');
    
    // クリーンアップ関数（componentWillUnmountに相当）
    return () => {
      console.log('コンポーネントがアンマウントされます');
      mounted = false;
    };
  });
  
  // 値の変更を監視
  $effect(() => {
    console.log(`カウント値が変更されました: ${count}`);
  });
</script>

<div>
  <p>マウント状態: {mounted ? 'マウント済み' : '未マウント'}</p>
  <p>カウント: {count}</p>
  <button onclick={() => count++}>カウントアップ</button>
</div>

<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
  }
  
  let userId = $state(1);
  let user = $state<User | null>(null);
  let loading = $state(false);
  
  // DOMアクセス前に実行される
  $effect.pre(() => {
    loading = true;
    
    // APIからデータを取得
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        user = data;
        loading = false;
      })
      .catch(() => {
        user = null;
        loading = false;
      });
  });
</script>

<div>
  <label>
    ユーザーID:
    <input type="number" bind:value={userId} min="1" max="10" />
  </label>
  
  {#if loading}
    <p>読み込み中...</p>
  {:else if user}
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  {:else}
    <p>ユーザーが見つかりません</p>
  {/if}
</div>

<script lang="ts">
  let autoSave = $state(false);
  let content = $state('');
  let savedContent = $state('');
  let saveCount = $state(0);
  
  $effect(() => {
    if (autoSave) {
      // 独立したエフェクトスコープを作成
      const cleanup = $effect.root(() => {
        // 1秒ごとに自動保存
        $effect(() => {
          const timer = setTimeout(() => {
            if (content !== savedContent) {
              savedContent = content;
              saveCount++;
              console.log('自動保存しました');
            }
          }, 1000);
          
          return () => clearTimeout(timer);
        });
        
        // $effect.rootは明示的にクリーンアップ関数を返す必要がある
        return () => {
          console.log('自動保存エフェクトをクリーンアップ');
        };
      });
      
      // autoSaveがfalseになったらクリーンアップ
      return cleanup;
    }
  });
</script>

<div>
  <label>
    <input type="checkbox" bind:checked={autoSave} />
    自動保存を有効にする
  </label>
  
  <textarea 
    bind:value={content} 
    placeholder="テキストを入力..."
    rows="4"
    style="width: 100%; margin-top: 1rem;"
  />
  
  <p>保存回数: {saveCount}</p>
  <p>最後に保存された内容: {savedContent}</p>
</div>

<script lang="ts">
  interface Post {
    id: number;
    title: string;
    body: string;
  }
  
  let posts = $state<Post[]>([]);
  let loading = $state(true);
  let error = $state<string | null>(null);
  
  // コンポーネントマウント時にデータを取得
  $effect(() => {
    let aborted = false; // クリーンアップ用のフラグ
    
    async function fetchPosts() {
      try {
        loading = true;
        error = null;
        
        const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
        if (!response.ok) throw new Error('Failed to fetch');
        
        const data = await response.json();
        
        // コンポーネントが破棄されていない場合のみ状態を更新
        if (!aborted) {
          posts = data;
          loading = false;
        }
      } catch (e) {
        if (!aborted) {
          error = e instanceof Error ? e.message : 'Unknown error';
          loading = false;
        }
      }
    }
    
    fetchPosts();
    
    // クリーンアップ：コンポーネント破棄時にリクエストを中断
    return () => {
      aborted = true;
    };
  });
</script>

<div>
  <h2>投稿一覧</h2>
  
  {#if loading}
    <p>読み込み中...</p>
  {:else if error}
    <p style="color: red;">エラー: {error}</p>
  {:else}
    <ul>
      {#each posts as post}
        <li>
          <h3>{post.title}</h3>
          <p>{post.body.substring(0, 100)}...</p>
        </li>
      {/each}
    </ul>
  {/if}
</div>

<style>
  ul {
    list-style: none;
    padding: 0;
  }
  
  li {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  h3 {
    margin: 0 0 0.5rem;
    color: #333;
  }
</style>