<!-- MyComponent.svelte -->

<!-- 1. Script部分：ロジックとデータ -->
<script lang="ts">
  // コンポーネントのロジック
  let count: number = 0;
  
  function increment(): void {
    count++;
  }
</script>

<!-- 2. Markup部分：HTML構造 -->
<div class="counter">
  <h2>カウンター: {count}</h2>
  <button on:click={increment}>
    クリック
  </button>
</div>

<!-- 3. Style部分：スタイリング -->
<style>
  .counter {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  h2 {
    color: #333;
  }
  
  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
</style>

<script lang="ts">
  // 他のコンポーネントやモジュールをインポート
  import AnotherComponent from './AnotherComponent.svelte';
  import { helper } from '$lib/utils';
  import type { User } from '$lib/types';
  
  // propsをエクスポート（親コンポーネントから受け取る）
  export let title: string;
  export let count: number = 0; // デフォルト値
  export let user: User | undefined = undefined;
</script>

<script lang="ts">
  let isLoggedIn: boolean = false;
  let score: number = 85;
</script>

<!-- if文 -->
{#if isLoggedIn}
  <p>ログイン済み</p>
{/if}

<!-- if-else文 -->
{#if score >= 80}
  <p>優秀！</p>
{:else}
  <p>もう少し頑張りましょう</p>
{/if}

<!-- if-else if-else文 -->
{#if score >= 90}
  <p>素晴らしい！</p>
{:else if score >= 70}
  <p>良い成績です</p>
{:else if score >= 60}
  <p>合格です</p>
{:else}
  <p>再試験が必要です</p>
{/if}

<script lang="ts">
  interface Item {
    id: number;
    name: string;
    price: number;
  }
  
  let items: Item[] = [
    { id: 1, name: 'Apple', price: 100 },
    { id: 2, name: 'Banana', price: 80 },
    { id: 3, name: 'Orange', price: 120 }
  ];
</script>

<!-- 基本的なeach -->
<ul>
  {#each items as item}
    <li>{item.name}: ¥{item.price}</li>
  {/each}
</ul>

<!-- インデックス付きeach -->
<ul>
  {#each items as item, index}
    <li>{index + 1}. {item.name}</li>
  {/each}
</ul>

<!-- key付きeach（パフォーマンス最適化） -->
<ul>
  {#each items as item (item.id)}
    <li>{item.name}</li>
  {/each}
</ul>

<!-- 空の配列の場合の処理 -->
{#each items as item}
  <li>{item.name}</li>
{:else}
  <li>アイテムがありません</li>
{/each}

<script lang="ts">
  async function fetchData(): Promise<User[]> {
    const response = await fetch('/api/users');
    return response.json();
  }
  
  let promise = fetchData();
</script>

<!-- Promise の状態に応じて表示を切り替え -->
{#await promise}
  <p>読み込み中...</p>
{:then users}
  <ul>
    {#each users as user}
      <li>{user.name}</li>
    {/each}
  </ul>
{:catch error}
  <p>エラー: {error.message}</p>
{/await}

<!-- 成功時のみ処理 -->
{#await promise then users}
  <p>ユーザー数: {users.length}</p>
{/await}

<style>
  /* このスタイルは現在のコンポーネントにのみ適用される */
  p {
    color: blue;
  }
  
  /* 生成されるCSSは以下のようになる
     p.svelte-xyz123 { color: blue; } */
</style>

<style>
  /* このコンポーネント内のp要素のみ */
  p {
    color: blue;
  }
  
  /* 全てのp要素に適用 */
  :global(p) {
    margin: 0;
  }
  
  /* 子要素のグローバルスタイル */
  .container :global(a) {
    color: red;
  }
</style>

<script lang="ts">
  let color: string = 'red';
  let size: number = 16;
  let isActive: boolean = true;
</script>

<!-- インラインスタイル -->
<p style="color: {color}; font-size: {size}px;">
  動的スタイル
</p>

<!-- style:ディレクティブ -->
<p
  style:color
  style:font-size="{size}px"
  style:font-weight={isActive ? 'bold' : 'normal'}
>
  より簡潔な記法
</p>

<!-- クラスの動的適用 -->
<div
  class="base"
  class:active={isActive}
  class:large={size > 20}
>
  条件付きクラス
</div>

<style>
  .base {
    padding: 1rem;
  }
  
  .active {
    background: #ff3e00;
    color: white;
  }
  
  .large {
    font-size: 1.5rem;
  }
</style>

<script lang="ts">
  function handleClick(event: MouseEvent): void {
    console.log('クリックされました', event);
  }
  
  function handleInput(event: Event): void {
    const target = event.target as HTMLInputElement;
    console.log('入力値:', target.value);
  }
  
  let value: string = '';
</script>

<!-- on:イベント名 -->
<button on:click={handleClick}>
  クリック
</button>

<!-- インライン関数 -->
<button on:click={() => console.log('インライン')}>
  インライン関数
</button>

<!-- イベント修飾子 -->
<button on:click|preventDefault|stopPropagation={handleClick}>
  修飾子付き
</button>

<!-- once: 一度だけ実行 -->
<button on:click|once={handleClick}>
  一度だけ
</button>

<!-- 入力イベント -->
<input
  type="text"
  on:input={handleInput}
  bind:value
/>

<script lang="ts">
  let name: string = '';
  let email: string = '';
  let age: number = 0;
  let agreed: boolean = false;
  let selected: string = '';
  let multiSelect: string[] = [];
</script>

<!-- テキスト入力 -->
<input type="text" bind:value={name} />
<input type="email" bind:value={email} />
<input type="number" bind:value={age} />

<!-- チェックボックス -->
<input type="checkbox" bind:checked={agreed} />

<!-- ラジオボタン -->
<input type="radio" bind:group={selected} value="option1" />
<input type="radio" bind:group={selected} value="option2" />

<!-- セレクトボックス -->
<select bind:value={selected}>
  <option value="">選択してください</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

<!-- 複数選択 -->
<select multiple bind:value={multiSelect}>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<!-- テキストエリア -->
<textarea bind:value={name} />

<!-- $lib/components/TodoItem.svelte -->
<script lang="ts">
  interface Todo {
    id: number;
    text: string;
    completed: boolean;
    createdAt: Date;
  }
  
  interface Props {
    todo: Todo;
    onToggle: (id: number) => void;
    onDelete: (id: number) => void;
  }
  
  let { todo, onToggle, onDelete }: Props = $props();
  
  let formattedDate = $derived(
    todo?.createdAt ? todo.createdAt.toLocaleDateString('ja-JP') : ''
  );
  
  function handleToggle(): void {
    if (todo) {
      onToggle(todo.id);
    }
  }
  
  function handleDelete(): void {
    if (todo && confirm('削除してもよろしいですか？')) {
      onDelete(todo.id);
    }
  }
</script>

{#if todo}
<div class="todo-item" class:completed={todo.completed}>
  <input
    type="checkbox"
    checked={todo.completed}
    onchange={handleToggle}
  />
  
  <span class="text">{todo.text}</span>
  
  <span class="date">{formattedDate}</span>
  
  <button
    class="delete"
    onclick={handleDelete}
    aria-label="削除"
  >
    ×
  </button>
</div>
{/if}

<style>
  .todo-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    gap: 0.5rem;
  }
  
  .todo-item.completed .text {
    text-decoration: line-through;
    opacity: 0.6;
  }
  
  .text {
    flex: 1;
  }
  
  .date {
    font-size: 0.8rem;
    color: #666;
  }
  
  .delete {
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
  }
  
  .delete:hover {
    background: #cc0000;
  }
</style>

<!-- src/routes/todos/+page.svelte -->
<script lang="ts">
  import TodoItem from '$lib/components/TodoItem.svelte';
  
  interface Todo {
    id: number;
    text: string;
    completed: boolean;
    createdAt: Date;
  }
  
  let todos = $state<Todo[]>([
    // 初期データ
  ]);
  
  function toggleTodo(id: number) {
    todos = todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
  }
  
  function deleteTodo(id: number) {
    todos = todos.filter(todo => todo.id !== id);
  }
</script>

<div class="todo-list">
  {#each todos as todo (todo.id)}
    <TodoItem 
      {todo}
      onToggle={toggleTodo}
      onDelete={deleteTodo}
    />
  {/each}
</div>