0Pricing
Sveltejs Academy · レッスン

実践的なアクション：clickOutside、tooltip、autofocus

一般的なUIパターンに対応する、実用的で再利用可能なアクションを構築します。

「実践的なアクション：clickOutside、tooltip、autofocus」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

clickOutsideアクション

要素の外側でのクリックを検出し、メニューやドロップダウンを閉じます。

function clickOutside(node, cb) {
  function handler(e) { if (!node.contains(e.target)) cb(); }
  document.addEventListener("click", handler, true);
  return { destroy() { document.removeEventListener("click", handler, true); } };
}

clickOutsideを使う

ユーザーが外側をクリックしたときに実行するコールバックを渡します。

<div use:clickOutside={() => open = false}>

autofocusアクション

マウント時に要素へフォーカスを移します。bind:thisとonMountを組み合わせるよりも簡潔です。

function autofocus(node) { node.focus(); }

autofocusを使う

入力要素や、フォーカス可能な任意の要素に適用できます。

<input use:autofocus />

tooltipアクション

ホバー時にツールチップを表示します。リスナーの登録とDOMの作成を1つのアクションにカプセル化できます。

lazyLoadアクション

IntersectionObserverとuse:を組み合わせて、画像を遅延読み込みします。

clickConfirmアクション

破壊的な操作を確定するために、一定時間内に2回のクリックを要求します。

コンポーネント間で再利用する

一度作成したアクションは、互換性のある任意の要素で動作します。$lib/actionsに保存してください。

アクションライブラリ

svelte-useのようなパッケージには、構築済みのアクションが数多く含まれています。

アクションを組み合わせる

1つの要素に複数のアクションを適用できます。use:autofocus use:clickOutside={close}のように記述します。

ベストプラクティス

アクションは1つの動作に集中させてください。より豊かな効果が必要な場合は組み合わせます。

簡単な確認

clickOutsideアクションには何が必要ですか。

まとめ

clickOutside、autofocus、tooltipのような実用的なアクションは、再利用可能なDOMの動作をカプセル化する方法を示しています。

よくある質問

「実践的なアクション：clickOutside、tooltip、autofocus」レッスンは無料ですか？

はい。「実践的なアクション：clickOutside、tooltip、autofocus」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「実践的なアクション：clickOutside、tooltip、autofocus」で何を学びますか？

一般的なUIパターンに対応する、実用的で再利用可能なアクションを構築します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「実践的なアクション：clickOutside、tooltip、autofocus」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. use:ディレクティブ構文
  2. アクションのパラメーターと更新
  3. destroy()クリーンアップ関数
  4. 実践的なアクション：clickOutside、tooltip、autofocus
← Sveltejs Academyに戻る