> [!NOTE]
> Svelte 5.29 以上の場合、代わりに [attachments](@attach) の使用をご検討ください。よりフレキシブルでコンポーザブルです。

action は、要素がマウントされたときに呼び出される関数です。これらは `use:` ディレクティブを使用して追加され、通常は `$effect` を使用して、要素がアンマウントされたときに state をリセットします:

```svelte
<!--- file: App.svelte --->
<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// このノードが DOM にマウントされました

		$effect(() => {
			// セットアップ処理をここに記述します

			return () => {
				// クリーンアップ処理を記述します
			};
		});
	}
</script>

<div use:myaction>...</div>
```

action には引数を渡すことができます:

```svelte
<!--- file: App.svelte --->
<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node, +++data+++) {
		// ...
	}
</script>

<div use:myaction={+++data+++}>...</div>
```

action は一度だけ呼び出されます (サーバーサイドレンダリング時には呼び出されません) — 引数が変更されても再実行されることはありません。

> [!LEGACY]
> `$effect` rune が導入される前は、action は `update` と `destroy` メソッドを持つオブジェクトを返すことができました。この場合、引数が変更されると `update` が最新の値で呼び出されました。現在は effect の使用が推奨されています。

## 型付け <!--Typing-->

`Action` インターフェースは、3つのオプションの型引数を受け取ります — ノードの型 (action がすべての要素に適用される場合は `Element` にできます)、パラメーター、および action によって作成されるカスタムイベントハンドラーです:

```svelte
<!--- file: App.svelte --->
<script>
	/**
	 * @type {import('svelte/action').Action<
	 * 	HTMLDivElement,
	 * 	undefined,
	 * 	{
	 * 		onswiperight: (e: CustomEvent) => void;
	 * 		onswipeleft: (e: CustomEvent) => void;
	 * 		// ...
	 * 	}
	 * >}
	 */
	function gestures(node) {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	}
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>
```