カスタムディレクティブ
mountedやupdatedなどのライフサイクルフックを持つグローバルおよびローカルディレクティブを登録し、コンポーネントの外部にあるDOM操作ロジックをカプセル化します。
「カスタムディレクティブ」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
ディレクティブとは
ディレクティブは、v-プレフィックスを使って要素に付加する、再利用可能なDOM操作ロジックです。組み込みの例にはv-if、v-for、v-model、v-showがあります。カスタムディレクティブを使えば独自の処理を構築できます。
ユースケース：自動フォーカス
ディレクティブを使うと、ラッパーコンポーネントを作るほどではない小さなDOM操作をカプセル化できます。
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>ローカルディレクティブの登録
<script setup>では、vプレフィックスを付けてディレクティブを宣言すると、Vueがローカルに自動登録します。
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>グローバルディレクティブの登録
app.directive(name, definition)を使用すると、ディレクティブをアプリ全体で利用できるようになります。
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');ディレクティブのライフサイクルフック
ディレクティブには、コンポーネントのライフサイクルに対応するフックがあります。created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmountedです。
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};bindingオブジェクト
フックはbindingオブジェクトを受け取ります。含まれるのはvalue、oldValue、arg、modifiers、instanceです。
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }実例：v-click-outside
よく使われるディレクティブです。ユーザーが要素の外側をクリックしたときにハンドラーを呼び出します。
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>実例：v-tooltip
ディレクティブを使ってTippy/Popperのツールチップを付加すると、テンプレートをすっきり保てます。
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce：入力イベントの抑制
カスタムディレクティブを使って、入力要素の@inputハンドラーにdebounceを組み込みます。
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">ディレクティブとコンポーネントとComposableの比較
Composable：状態を持つロジック（データ、ref）。コンポーネント：独自のテンプレートを持つ再利用可能なUI構造。ディレクティブ：既存の要素に適用する純粋なDOM動作。テンプレートやマークアップが不要な場合は、ディレクティブを選択してください。
パフォーマンスに関する考慮事項
ディレクティブは更新のたびに実行されます。処理は軽量に保ってください。負荷の高い処理では、binding.value !== binding.oldValueを条件にして、不要な処理をスキップします。
確認問題
動作を追加する際、Vueのディレクティブを使う場合とVueのコンポーネントを使う場合の違いは何ですか？
まとめ：カスタムディレクティブ
vプレフィックスを付けた再利用可能なDOMロジックです。ローカル（script setup内のvName const）またはグローバル（app.directive）に登録します。ライフサイクルフックにはmounted、updated、unmountedがあります。bindingからvalue、oldValue、arg、modifiersを取得できます。フォーカス、クリック外、ツールチップ、debounceなど、純粋なDOM動作に使用します。マークアップにはコンポーネント、状態を持つロジックにはComposable、DOMの拡張にはディレクティブを使用してください。
よくある質問
「カスタムディレクティブ」レッスンは無料ですか？
はい。「カスタムディレクティブ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「カスタムディレクティブ」で何を学びますか？
mountedやupdatedなどのライフサイクルフックを持つグローバルおよびローカルディレクティブを登録し、コンポーネントの外部にあるDOM操作ロジックをカプセル化します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「カスタムディレクティブ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。