ミックスインとカスタムディレクティブ
ミックスインでロジックを再利用し、カスタムディレクティブを作成します。
「ミックスインとカスタムディレクティブ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
ロジックの再利用
アプリが成長すると、同じロジックが複数のコンポーネントに存在することに気付きます。Vueには、それを共有する方法がいくつかあります。このレッスンでは、従来のミックスインと強力なカスタムディレクティブという2つの方法を扱います。
ミックスインとは
ミックスインは、コンポーネントオプション（data、methods、hooks）を持つオブジェクトです。ミックスインを使用するコンポーネントに、そのオプションがマージされます。Vue 2でロジックを再利用する従来の方法でした。
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}ミックスインの使用
mixins配列を通じて、コンポーネントにミックスインを追加します。ミックスインのオプションが、コンポーネント自身のオプションとマージされます。
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}ミックスインの短所
ミックスインには実際の問題があります。プロパティの出所が分かりにくく（暗黙的な依存元）、ミックスイン間で名前が衝突することがあり、マージのルールも複雑になります。こうした問題から、より良い方法が生まれました。
コンポーザブルというより良い方法
Vue 3では、コンポーザブル（Composition APIを使用する関数）がミックスインに取って代わります。コンポーザブルを使うと、依存元が明示的になり、名前の衝突を避けながら、ロジックをきれいに組み合わせられます。新しいコードでは、コンポーザブルを優先します。
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}コンポーザブルの使用
setupでコンポーザブルを呼び出し、必要なものだけを正確に分割代入します。これにより、ロジックの出所が明確になります。
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}カスタムディレクティブとは
カスタムディレクティブは、v-nameを使って要素に追加できる低レベルのDOM操作をまとめたものです。フォーカス、スクロール、ツールチップなど、DOMを直接操作する処理に適しています。
グローバルディレクティブの登録
app.directiveを使って、アプリにディレクティブを登録します。名前はテンプレート内でv-接頭辞を付けて使用します。
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />ディレクティブフック
ディレクティブにはライフサイクルフックがあります。mounted（要素が挿入されたとき）、updated（コンポーネントが更新されたとき）、beforeUnmount（クリーンアップ）などがあり、コンポーネントのライフサイクルに対応しています。
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})バインディングオブジェクト
フックの2番目の引数はバインディングです。渡された値を示すvalue、コロンの後に指定するarg、ドットの後に指定するmodifiersが含まれます。
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }ローカルディレクティブ
1つのコンポーネントだけで使用するディレクティブは、グローバルではなくdirectivesオプションでローカルに登録します。
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}確認問題
ミックスインとディレクティブに関する知識を確認します。
まとめ
ミックスインはオプションをコンポーネントにマージしますが、暗黙的な依存元や名前の衝突という問題があります。Vue 3ではコンポーザブルを優先します。カスタムディレクティブは、app.directiveでグローバルに、またはローカルに登録でき、mountedなどのフックとバインディングオブジェクトを使ってDOM操作をまとめます。次は、機能を再利用可能なプラグインとしてパッケージ化します。
よくある質問
「ミックスインとカスタムディレクティブ」レッスンは無料ですか？
はい。「ミックスインとカスタムディレクティブ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「ミックスインとカスタムディレクティブ」で何を学びますか？
ミックスインでロジックを再利用し、カスタムディレクティブを作成します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「ミックスインとカスタムディレクティブ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ミックスインとカスタムディレクティブ
- プラグイン開発
- スケーラブルなフォルダ構成