{#snippet ...}
{#snippet name()}...{/snippet}{#snippet name(param1, param2, paramN)}...{/snippet}Snippet と render タグ を使用すると、コンポーネント内で再利用可能なマークアップのチャンクを作成することができます。このような重複が多いコード を書く代わりに...
{#each images as image}
{#if image.href}
<a href={image.href}>
<figure>
<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
<figcaption>{image.caption}</figcaption>
</figure>
</a>
{:else}
<figure>
<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
<figcaption>{image.caption}</figcaption>
</figure>
{/if}
{/each}...このように 書くことができます:
{#snippet figure(image)}
<figure>
<img src={image.src} alt={image.caption} width={image.width} height={image.height} />
<figcaption>{image.caption}</figcaption>
</figure>
{/snippet}
{#each images as image}
{#if image.href}
<a href={image.href}>
{@render figure(image)}
</a>
{:else}
{@render figure(image)}
{/if}
{/each}関数宣言と同様に、snippet は任意の数のパラメーターを持つことができ、それぞれにデフォルト値を設定したり、分割代入を使用することができます。ただし、残余引数 (rest parameters) は使用できません。
Snippet scope
snippet はコンポーネント内の任意の場所で宣言できます。その snippet の外側、例えば <script> タグや {#each ...} ブロック内で宣言された値を参照することができます (デモ)...
<script>
let { message = `it's great to see you!` } = $props();
</script>
{#snippet hello(name)}
<p>hello {name}! {message}!</p>
{/snippet}
{@render hello('alice')}
{@render hello('bob')}...また、同じレキシカルスコープ内のすべての要素 (つまり兄弟要素やその子要素) から ‘見える (visible)’ 状態になります:
<div>
{#snippet x()}
{#snippet y()}...{/snippet}
<!-- this is fine -->
{@render y()}
{/snippet}
<!-- this will error, as `y` is not in scope -->
{@render y()}
</div>
<!-- this will also error, as `x` is not in scope -->
{@render x()}snippet は、自身や他の snippet を参照することができます (デモ):
{#snippet blastoff()}
<span>🚀</span>
{/snippet}
{#snippet countdown(n)}
{#if n > 0}
<span>{n}...</span>
{@render countdown(n - 1)}
{:else}
{@render blastoff()}
{/if}
{/snippet}
{@render countdown(10)}snippet をコンポーネントに渡す
テンプレート内では、snippet は他の値と同じように扱われます。そのため、snippet は props としてコンポーネントに渡すことができます (デモ):
<script>
import Table from './Table.svelte';
const fruits = [
{ name: 'apples', qty: 5, price: 2 },
{ name: 'bananas', qty: 10, price: 1 },
{ name: 'cherries', qty: 20, price: 0.5 }
];
</script>
{#snippet header()}
<th>fruit</th>
<th>qty</th>
<th>price</th>
<th>total</th>
{/snippet}
{#snippet row(d)}
<td>{d.name}</td>
<td>{d.qty}</td>
<td>{d.price}</td>
<td>{d.qty * d.price}</td>
{/snippet}
<Table data={fruits} {header} {row} />データの代わりにコンテンツをコンポーネントに渡すようなものと考えてください。このコンセプトは web component の slot に似ています。
作成を簡単にするため、コンポーネント内に直接宣言された snippet は、自動的にそのコンポーネントの props になります (デモ):
<!-- これは上記とセマンティック的には同じです -->
<Table data={fruits}>
{#snippet header()}
<th>fruit</th>
<th>qty</th>
<th>price</th>
<th>total</th>
{/snippet}
{#snippet row(d)}
<td>{d.name}</td>
<td>{d.qty}</td>
<td>{d.price}</td>
<td>{d.qty * d.price}</td>
{/snippet}
</Table>コンポーネントタグ内で、snippet 宣言でないすべてのコンテンツは、自動的に children snippet の一部になります (デモ):
<Button>click me</Button><script>
let { children } = $props();
</script>
<!-- 結果は <button>click me</button> となります -->
<button>{@render children()}</button><script lang="ts">
let { children } = $props();
</script>
<!-- 結果は <button>click me</button> となります -->
<button>{@render children()}</button>コンポーネント内にコンテンツがある場合、
childrenという名前の props を持つことはできません — このため、その名前の props を避けるべきです。
snippet の props をオプションとして宣言することができます。snippet が設定されていない場合は、オプショナルチェーン (optional chaining) を使用して何もレンダリングしないようにするか...
<script>
let { children } = $props();
</script>
{@render children?.()}...または、#if ブロックを使用してフォールバックコンテンツをレンダリングすることができます:
<script>
let { children } = $props();
</script>
{#if children}
{@render children()}
{:else}
fallback content
{/if}snippet に型を付ける
snippet は、'svelte' からインポートされる Snippet インターフェースを実装します:
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
data: any[];
children: Snippet;
row: Snippet<[any]>;
}
let { data, children, row }: Props = $props();
</script>この変更により、data プロパティと row snippet を提供せずにコンポーネントを使用しようとすると、赤い波線が表示されるようになります。snippet には複数のパラメーターを持たせることができるため、Snippet に提供される型引数がタプルになっていることに注意してください。
generic を宣言することで、data と row が同じ型を参照するように、さらに厳密にすることができます:
<script lang="ts" generics="T">
import type { Snippet } from 'svelte';
let {
data,
children,
row
}: {
data: T[];
children: Snippet;
row: Snippet<[T]>;
} = $props();
</script>snippet をエクスポートする
.svelte ファイルのトップレベルで宣言された snippet は、non-module な <script> 内の宣言を (直接または他の snippet 経由で間接的に) 参照しない限り、<script module> から他のコンポーネントで使用するためにエクスポートできます (デモ):
<script module>
export { add };
</script>
{#snippet add(a, b)}
{a} + {b} = {a + b}
{/snippet}これには Svelte 5.5.0 以上が必要です
プログラマティックな snippet
snippet は、createRawSnippet API を使用してプログラムで作成することができます。これは高度なユースケースを意図しています。
Snippet と slot
Svelte 4 では、slot を使用してコンテンツをコンポーネントに渡すことができます。snippet はより強力で柔軟性があるため、Svelte 5 では slot は非推奨となりました。