use:ディレクティブ構文
use:ディレクティブを使用して、SvelteアクションをDOM要素に適用します。
「use:ディレクティブ構文」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
Svelteのアクション
アクションは、要素がマウントされたときに実行される関数です。use: ディレクティブで呼び出します。
基本的なアクション
アクションは引数としてDOMノードを受け取ります。
function highlight(node) {
node.style.background = "yellow";
}use:で適用する
use:action を使って、任意の要素にアクションを取り付けます。
<p use:highlight>I am highlighted</p>アクションを使う理由
アクションは、フォーカス、交差、ドラッグなどの命令型DOM処理を再利用できる形にカプセル化します。
マークアップ不要
アクションは何もレンダリングせず、既存の要素を拡張します。
複数のアクション
複数の use: ディレクティブを使って、1つの要素に複数のアクションを適用できます。
<div use:trap use:scroll>ライブラリでの提供
多くのSvelteライブラリは、扱いやすく統合できるように機能をアクションとして公開しています。
インポート
アクションは通常の関数なので、他のモジュールと同じようにインポートします。
import { clickOutside } from "$lib/actions";型ヒント
svelte/action の Action<Element, Params> ジェネリックを使ってアクションに型を付けてください。
ライフサイクルの把握
アクションはマウント後に実行されるため、実行時にはノードがDOMに存在します。
シンプルから強力なものまで
アクションは1行の小さなものから、ライブラリのラッパーのように多機能なものまで作成できます。
クイックチェック
アクションを取り付けるにはどうすればよいですか？
まとめ
アクションは use: で呼び出す関数です。DOMノードを受け取り、命令型の動作を追加します。
よくある質問
「use:ディレクティブ構文」レッスンは無料ですか？
はい。「use:ディレクティブ構文」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「use:ディレクティブ構文」で何を学びますか？
use:ディレクティブを使用して、SvelteアクションをDOM要素に適用します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「use:ディレクティブ構文」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。