svelte-template-directives

Svelte テンプレートディレクティブ

@attach（Svelte 5.29+）

use: アクションに代わるリアクティブな方法です。 依存関係が 変化すると再実行され、スプレッドを介してコンポーネントに引き継がれ、クリーンアップ関数をサポートします。

<script>
	import ImageZoom from 'js-image-zoom';

	function useZoom(options) {
		return (element) => {
			new ImageZoom(element, options);
			return () => console.log('cleanup');
		};
	}
</script>


<figure {@attach useZoom({ width: 400 })}>
	<img src="photo.jpg" alt="zoomable" />
</figure>

クイックリファレンス

ディレクティブ	目的	リアクティブ？
{@attach}	DOM 操作、サードパーティー連携	はい
{@html}	生の HTML 文字列をレンダリング	はい
{@render}	スニペットをレンダリング	はい
{let ...} / {const ...}	マークアップ内のローカル宣言	該当なし
{@debug}	値が変化したときにデバッガーを一時停止	該当なし
{#each (key)}	キー付き反復（常にキーを指定！）	はい
<svelte:window>	ウィンドウのイベントリスナー	該当なし

@attach と use: アクションの比較

機能	use:	@attach
引数変更時の再実行	いいえ	はい
合成可能	限定的	完全に対応
props の引き継ぎ	手動	スプレッドで自動
レガシー形式の変換	該当なし	fromAction()

リファレンスファイル

• attach-patterns.md - 実際の @attach 使用例
• other-directives.md - @html、@render、 宣言タグ、@debug

注意事項

• @attach には Svelte 5.29+ が必要です
• svelte/attachments の fromAction を使って、レガシーアクションを変換します
• props をスプレッドすると、アタッチメントはラッパーコンポーネントを通して引き継がれます
• 常にキー付きの each ブロックを使ってください。キーにインデックスを使わないでください
• グローバルイベントには $effect ではなく、<svelte:window>／<svelte:document> を使ってください
• ローカルのマークアップ変数には {const ...}／{let ...} 宣言タグを使います。{@const ...} はレガシー構文です。
• 最終確認日： 2026-05-31