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}	スニペットをレンダリング	はい
{@const}	ブロック内のローカル定数	該当なし
{@debug}	値の変化時にデバッガーを一時停止	該当なし
{#each (key)}	キー付き反復（必ずキーを指定！）	はい
<svelte:window>	ウィンドウのイベントリスナー	該当なし

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

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

リファレンスファイル

• attach-patterns.md - 実際の @attach の使用例
• other-directives.md - @html、@render、 @const、@debug

メモ

• @attach には Svelte 5.29 以降が必要です
• レガシーアクションを変換するには、svelte/attachments の fromAction を使用します
• プロパティをスプレッドすると、アタッチメントはラッパーコンポーネントを介して受け渡されます
• each ブロックでは必ずキーを使用し、インデックスをキーとして使用しないでください
• グローバルイベントには $effect ではなく、<svelte:window>／<svelte:document> を使用します
• 最終確認日： 2026-03-12