## 全体 ```svelte <script lang="ts"> // コード </script <style> // スタイル </style> // templateは直接 ``` ## templateの表記 | 表記 | 意味 | 例 | 備考 | | ------------------------------- | ----------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------- | | `{hoge}` | 変数`hoge`の値 | `<span>{hoge}</span>` `<img src={src}>` | `src={src}` は `{src}` でよい | | `on:click={handler}` | クリックされたら`handler`関数を実行 | `<button on:click={handleClick}>` | [参考](https://svelte.dev/tutorial/reactive-assignments) | | `bind:value={name}` | 双方向バインディング | `<input bind:value={name}>` | [参考](https://svelte.dev/tutorial/text-inputs). `bind:value={value}`は`bind:value`でよい | | `{#if a.isA}...{/if}` | if文 | `{#if you.isMe}<span>Foo!</span>{/if}` | [参考](https://svelte.dev/tutorial/if-blocks) | | `{#if a.isA}...{:else}...{/if}` | if-else文 | 省略 | [参考](https://svelte.dev/tutorial/else-blocks) | | `{#each xs as x, i}...{/each}` | 繰り返し | `{#each xs as x, i}<span>{i}: {x}</span>{/each}` | [参考](https://svelte.dev/tutorial/each-blocks). `i`は省略可 |