use:アクション

use:actionは、DOM要素に対して直接的な操作を行うための強力な機能です。要素のライフサイクルにフックして、初期化、更新、クリーンアップの処理を実行できます。

React/Vue経験者向け

React の useRef + useEffect の組み合わせに相当
Vue の カスタムディレクティブ に相当
ただし、Svelteのアクションはよりシンプルで直感的

アクションとは

アクションは、DOM要素がマウントされた時に実行される関数です。要素への参照を受け取り、その要素に対して任意の処理を実行できます。

基本構造

function myAction(node: HTMLElement, parameter?: any) {
  // 初期化処理
  
  return {
    update(newParameter?: any) {
      // パラメータが変更された時の処理
    },
    destroy() {
      // クリーンアップ処理
    }
  };
}

typescript

いつ実行されるか

重要な実行タイミング

アクションは要素がDOMにマウントされた時に実行されます。クリックやフォーカスなどのユーザー操作では実行されません。

ライフサイクル

マウント時: 要素がDOMに追加された時にアクション関数が実行される
更新時: パラメータが変更された時にupdateメソッドが呼ばれる
アンマウント時: 要素がDOMから削除される時にdestroyメソッドが呼ばれる

この要素にアクションが適用されています

コンソールを確認してライフサイクルを観察してください

<script lang="ts">
  let showElement = $state(true);
  let parameter = $state('初期値');
  
  function lifecycleAction(node: HTMLElement, param: string) {
    console.log(`アクション実行: ${param}`);
    node.style.backgroundColor = '#ffe4e1';
    
    return {
      update(newParam: string) {
        console.log(`アクション更新: ${newParam}`);
        node.style.backgroundColor = newParam === '変更後' ? '#e1f5fe' : '#ffe4e1';
      },
      destroy() {
        console.log('アクション破棄');
      }
    };
  }
</script>

<div class="demo">
  <button onclick={() => showElement = !showElement}>
    要素を{showElement ? '削除' : '表示'}
  </button>
  
  <button onclick={() => parameter = parameter === '初期値' ? '変更後' : '初期値'}>
    パラメータ変更: {parameter}
  </button>
  
  {#if showElement}
    <div use:lifecycleAction={parameter} class="target">
      この要素にアクションが適用されています
    </div>
  {/if}
  
  <div class="log">
    <small>コンソールを確認してライフサイクルを観察してください</small>
  </div>
</div>

<style>
  .demo {
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 8px;
  }
  
  button {
    margin-right: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .target {
    padding: 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .log {
    margin-top: 1rem;
    color: #666;
  }
</style>

svelte

アクション vs イベントハンドラ

アクションとイベントハンドラは異なる目的で使用されます：

主な違い

特徴	use:アクション	イベントハンドラ
引数	DOM要素（node）	イベントオブジェクト
実行タイミング	要素のマウント時	ユーザー操作時
主な用途	DOM操作・初期化	アプリケーションロジック
戻り値	update/destroyメソッド	なし

使い分けのガイドライン

use:アクションを使うべき場合

DOM要素への直接アクセスが必要
要素の初期化処理（フォーカス、スクロール位置など）
外部ライブラリの統合
カスタムイベントリスナーの追加

イベントハンドラを使うべき場合

ユーザー操作への応答
アプリケーション状態の更新
ビジネスロジックの実行
データの送信や検証

実践例

1. オートフォーカス

<script lang="ts">
  function autofocus(node: HTMLElement) {
    if (node instanceof HTMLInputElement) {
      node.focus();
      node.select();
    }
  }
  
  let showInput = $state(false);
</script>

<button onclick={() => showInput = !showInput}>
  入力フィールドを{showInput ? '隠す' : '表示'}
</button>

{#if showInput}
  <input 
    use:autofocus
    type="text" 
    placeholder="自動的にフォーカスされます"
    value="選択されたテキスト"
  />
{/if}

svelte

2. クリックアウトサイド

<script lang="ts">
  function clickOutside(node: HTMLElement, callback: () => void) {
    function handleClick(event: MouseEvent) {
      if (!node.contains(event.target as Node)) {
        callback();
      }
    }
    
    document.addEventListener('click', handleClick, true);
    
    return {
      destroy() {
        document.removeEventListener('click', handleClick, true);
      }
    };
  }
  
  let isOpen = $state(false);
  let count = $state(0);
</script>

<div class="container">
  <button onclick={() => isOpen = !isOpen}>
    メニューを開く
  </button>
  
  {#if isOpen}
    <div 
      use:clickOutside={() => {
        isOpen = false;
        count++;
      }}
      class="menu"
    >
      <h4>メニュー</h4>
      <p>外側をクリックすると閉じます</p>
      <p>閉じた回数: {count}</p>
    </div>
  {/if}
</div>

<style>
  .container {
    position: relative;
    padding: 1rem;
    background: #f5f5f5;
    min-height: 200px;
  }
  
  .menu {
    position: absolute;
    top: 50px;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
</style>

svelte

3. ツールチップ

<script lang="ts">
  function tooltip(node: HTMLElement, text: string) {
    let tooltipElement: HTMLDivElement;
    
    function showTooltip() {
      tooltipElement = document.createElement('div');
      tooltipElement.textContent = text;
      tooltipElement.className = 'tooltip';
      
      const rect = node.getBoundingClientRect();
      tooltipElement.style.position = 'fixed';
      tooltipElement.style.top = `${rect.top - 30}px`;
      tooltipElement.style.left = `${rect.left + rect.width / 2}px`;
      tooltipElement.style.transform = 'translateX(-50%)';
      
      document.body.appendChild(tooltipElement);
    }
    
    function hideTooltip() {
      if (tooltipElement) {
        tooltipElement.remove();
      }
    }
    
    node.addEventListener('mouseenter', showTooltip);
    node.addEventListener('mouseleave', hideTooltip);
    
    return {
      update(newText: string) {
        text = newText;
        if (tooltipElement) {
          tooltipElement.textContent = text;
        }
      },
      destroy() {
        hideTooltip();
        node.removeEventListener('mouseenter', showTooltip);
        node.removeEventListener('mouseleave', hideTooltip);
      }
    };
  }
  
  let tooltipText = $state('これはツールチップです');
</script>

<div class="demo">
  <input 
    bind:value={tooltipText}
    placeholder="ツールチップテキストを編集"
  />
  
  <div class="buttons">
    <button use:tooltip={tooltipText}>
      ホバーしてください
    </button>
    
    <button use:tooltip={'別のツールチップ'}>
      こちらも試してください
    </button>
  </div>
</div>

<style>
  .demo {
    padding: 2rem;
    background: #f5f5f5;
  }
  
  .buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
  }
  
  :global(.tooltip) {
    background: #333;
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 1000;
    pointer-events: none;
  }
</style>

svelte