コンポーネントの基本

<!-- Hello.svelte -->

<!-- 1. Script部分：ロジックとデータ -->
<script lang="ts">
  let name = 'World';
</script>

<!-- 2. Markup部分：HTML構造 -->
<h1>Hello, {name}!</h1>

<!-- 3. Style部分：スタイリング -->
<style>
  h1 {
    color: purple;
  }
</style>

<!-- Counter.svelte -->

<!-- 1. Script部分：ロジックとデータ -->
<script lang="ts">
  // $state で宣言した値は変更すると UI が自動更新される（Runes）
  let count = $state(0);

  function increment(): void {
    count++;
    console.log(`カウンターが増加しました: ${count}`);
  }
</script>

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

<!-- 3. Style部分：スタイリング -->
<style>
  .counter {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  h2 {
    color: #999;
  }

  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
</style>

<!-- @file: Hello.svelte -->
<script lang="ts">
  let name = 'World';
</script>

<h1>Hello, {name}!</h1>

<style>
  h1 {
    color: purple;
  }
</style>

<!-- @file: App.svelte -->
<script lang="ts">
  // 同じディレクトリにある Hello.svelte をインポート
  import Hello from './Hello.svelte';
</script>

<Hello />

<!-- @file: Card.svelte -->
<script lang="ts">
  type Props = { title: string; body: string };
  let { title, body }: Props = $props();
</script>

<article>
  <h3>{title}</h3>
  <p>{body}</p>
</article>

<style>
  article {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background: #f9f9f9;
  }
  h3 { margin: 0 0 0.5rem 0; color: #ff3e00; }
  p { margin: 0; color: #444; }
</style>

<!-- @file: App.svelte -->
<script lang="ts">
  import Card from './Card.svelte';
</script>

<Card title="Welcome" body="親から渡された props を子で受け取っています。" />
<Card title="Svelte 5" body="$props ルーンを分割代入で受け取り、Props 型で型付けします。" />

<script lang="ts">
  let count = $state(5);
  let isLoggedIn = $state(false);
  let user = $state({ name: 'taro', email: 'taro@example.com' });
</script>

<div class="controls">
  <label>
    カウント: {count}
    <input type="range" min="0" max="20" bind:value={count} />
  </label>
  <label>
    <input type="checkbox" bind:checked={isLoggedIn} />
    ログイン状態
  </label>
</div>

<!-- 単純な値の埋め込み -->
<p>カウント: {count}</p>

<!-- 計算式 -->
<p>2 倍: {count * 2}</p>

<!-- 三項演算子で出し分け -->
<p>状態: {isLoggedIn ? 'ログイン中' : '未ログイン'}</p>

<!-- 論理 AND（短絡評価）で表示制御 -->
<p>{count > 10 && '✨ 10 を超えました！'}</p>

<!-- メソッド呼び出し -->
<p>名前(大文字): {user.name.toUpperCase()}</p>

<!-- プロパティアクセス -->
<p>連絡先: {user.email}</p>

<style>
  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    color: #222;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
  .controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #222;
  }
  p {
    margin: 0.25rem 0;
  }
</style>

<script lang="ts">
  let color = $state('#ff3e00');
  let size = $state(16);
  let isActive = $state(true);
</script>

<div class="controls">
  <label>
    色: <input type="color" bind:value={color} />
  </label>
  <label>
    サイズ: {size}px
    <input type="range" min="10" max="40" bind:value={size} />
  </label>
  <label>
    <input type="checkbox" bind:checked={isActive} />
    アクティブ
  </label>
</div>

<!-- 1. インラインスタイル（属性に式を埋め込む） -->
<h4>インラインスタイル</h4>
<p style="color: {color}; font-size: {size}px;">
  動的スタイル
</p>

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

<!-- 3. class: ディレクティブ（クラスの動的適用） -->
<h4>class: ディレクティブ</h4>
<div
  class="base"
  class:active={isActive}
  class:large={size > 20}
>
  条件付きクラス（サイズが 20 を超えると "large" クラス追加）
</div>

<style>
  .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    color: #222;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
  .controls label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #222;
  }
  h4 {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.8rem;
  }
  .base {
    padding: 1rem;
    border: 1px solid #888;
    border-radius: 4px;
    background: #fafafa;
    color: #222;
  }
  .active {
    background: #ff3e00;
    color: white;
  }
  .large {
    font-size: 1.5rem;
  }
</style>

<script lang="ts">
  function handleClick(event: MouseEvent): void {
    console.log('クリックされました', {
      type: event.type,
      x: event.clientX,
      y: event.clientY
    });
  }
</script>

<!-- 関数参照 -->
<button onclick={handleClick}>
  クリック
</button>

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

<script lang="ts">
  // 各入力要素にひとつずつ独立した状態を用意
  let textName = $state('');
  let textEmail = $state('');
  let textAge = $state(0);
  let checkboxAgreed = $state(false);
  let radioOption = $state('option1');
  let selectFruit = $state('');
  let multiColors = $state<string[]>([]);
  let textareaContent = $state('');
</script>

<h4>① テキスト入力</h4>
<label>
  名前:
  <input type="text" bind:value={textName} placeholder="入力してください" />
</label>
<p class="binding-out">name = "{textName}"</p>

<label>
  メール:
  <input type="email" bind:value={textEmail} placeholder="user@example.com" />
</label>
<p class="binding-out">email = "{textEmail}"</p>

<label>
  年齢:
  <input type="number" bind:value={textAge} />
</label>
<p class="binding-out">age = {textAge} (型: {typeof textAge})</p>

<h4>② チェックボックス</h4>
<label>
  <input type="checkbox" bind:checked={checkboxAgreed} />
  利用規約に同意する
</label>
<p class="binding-out">agreed = {checkboxAgreed}</p>

<h4>③ ラジオボタン(bind:group で 1 つの値に束ねる)</h4>
<label>
  <input type="radio" bind:group={radioOption} value="option1" />
  Option 1
</label>
<label>
  <input type="radio" bind:group={radioOption} value="option2" />
  Option 2
</label>
<label>
  <input type="radio" bind:group={radioOption} value="option3" />
  Option 3
</label>
<p class="binding-out">selected = "{radioOption}"</p>

<h4>④ セレクトボックス(単一選択)</h4>
<select bind:value={selectFruit}>
  <option value="">選択してください</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>
<p class="binding-out">fruit = "{selectFruit}"</p>

<h4>⑤ セレクトボックス(複数選択、Ctrl/Cmd で選択)</h4>
<select multiple bind:value={multiColors} size="3">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>
<p class="binding-out">colors = {JSON.stringify(multiColors)}</p>

<h4>⑥ テキストエリア</h4>
<textarea
  bind:value={textareaContent}
  placeholder="複数行のテキストが入力できます"
  rows="3"
></textarea>
<p class="binding-out">content = "{textareaContent}" ({textareaContent.length} 文字)</p>

<style>
  h4 {
    margin: 1rem 0 0.25rem;
    font-size: 0.85rem;
  }
  label {
    display: inline-block;
    margin: 0.25rem 0.5rem 0.25rem 0;
  }
  input[type="text"],
  input[type="email"],
  input[type="number"],
  select,
  textarea {
    margin-left: 0.25rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #888;
    border-radius: 3px;
    background: #fff;
    color: #222;
  }
  textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
  }
  .binding-out {
    margin: 0.15rem 0 0.5rem 1rem;
    font-family: monospace;
    color: #ff3e00;
    font-size: 0.85rem;
    font-weight: 600;
  }
</style>