Vue.jsを使いこなすためには、ディレクティブの基本的な使い方を理解することが重要です。ディレクティブは、HTMLに特殊な動作を追加するVue.js特有の属性です。本記事では、よく使われる3つのディレクティブであるv-for、v-if、v-modelについて初心者向けにわかりやすく解説します。
Vue.jsのディレクティブとは？
ディレクティブの概要
ディレクティブは、HTML要素に特定の振る舞いを与えるためのVue.js固有の属性です。ディレクティブには、動的なデータバインディング、要素の表示・非表示、リストのループ処理など、さまざまな用途があります。
- 形式：ディレクティブは
v-で始まる特殊な属性です。 - 動作：ディレクティブはHTMLの動作をJavaScriptのデータに基づいて制御します。
v-forの使い方｜リストのレンダリング
v-forとは？
v-forは、配列やオブジェクトのデータをもとに要素を繰り返しレンダリングするためのディレクティブです。リストを表示したいときに非常に便利です。
基本構文
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
v-for="item in items"：items配列の各要素をitemとして順番にレンダリングします。:key="item.id"：各リスト項目に一意のキーを指定することで効率的なレンダリングを可能にします。
例：リストのレンダリング
HTML
<template>
<ul>
<li v-for="fruit in fruits" :key="fruit">
{{ fruit }}
</li>
</ul>
</template>
JavaScript
export default {
data() {
return {
fruits: ["りんご", "バナナ", "オレンジ"]
};
}
};
この例では、配列fruitsの各要素が順番にリストとして表示されます。
オブジェクトのループ
v-forはオブジェクトにも対応しています。
<div v-for="(value, key) in user" :key="key">
{{ key }}: {{ value }}
</div>
この場合、オブジェクトのキーと値の両方を取得しながらレンダリングすることができます。
v-ifの使い方｜条件付きレンダリング
v-ifとは？
v-ifは、指定した条件がtrueの場合にのみ要素をレンダリングするディレクティブです。条件に応じて要素を動的に表示・非表示にすることができます。
基本構文
<p v-if="isVisible">このメッセージは表示されます</p>
v-if="isVisible"：isVisibleがtrueの場合に要素を表示し、falseの場合はレンダリングされません。
例：ボタンで要素を表示・非表示にする
HTML
<template>
<div>
<button @click="toggleVisibility">表示/非表示を切り替える</button>
<p v-if="isVisible">このメッセージは条件によって表示されます</p>
</div>
</template>
JavaScript
export default {
data() {
return {
isVisible: false
};
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
};
ボタンをクリックするたびに、isVisibleの値が切り替わり、メッセージの表示・非表示が変わります。
v-elseとv-else-if
v-ifに加えて、条件分岐をさらに柔軟にするためにv-elseやv-else-ifも使用できます。
<p v-if="score >= 90">優秀です</p>
<p v-else-if="score >= 60">合格です</p>
<p v-else>再チャレンジしてください</p>
この例では、scoreの値によって異なるメッセージが表示されます。
v-modelの使い方｜双方向データバインディング
v-modelとは？
v-modelは、フォーム要素とデータを双方向にバインドするためのディレクティブです。ユーザーが入力した値をリアルタイムで取得し、データに反映することができます。
基本構文
<input v-model="message" placeholder="メッセージを入力してください">
<p>入力されたメッセージ: {{ message }}</p>
v-model="message"：入力フィールドの内容がデータプロパティmessageとリアルタイムで同期します。
例：テキスト入力とリアルタイム表示
HTML
<template>
<div>
<input v-model="name" placeholder="名前を入力してください">
<p>こんにちは、{{ name }}さん！</p>
</div>
</template>
JavaScript
export default {
data() {
return {
name: ""
};
}
};
この例では、ユーザーが入力した名前がリアルタイムで表示されます。
チェックボックスやラジオボタンでの使用
v-modelはテキスト入力以外にも、チェックボックスやラジオボタン、セレクトボックスなどのフォーム要素にも対応しています。
例：チェックボックス
<input type="checkbox" v-model="checked"> チェックする
<p>チェックの状態: {{ checked }}</p>
この例では、チェックボックスの状態がcheckedにバインドされ、状態がリアルタイムで表示されます。
応用的なディレクティブの組み合わせ
v-forとv-ifの組み合わせ
v-forとv-ifを組み合わせることで、特定の条件に一致する要素のみをリストとして表示することができます。
例：条件付きのリスト表示
<ul>
<li v-for="item in items" v-if="item.active" :key="item.id">
{{ item.name }}
</li>
</ul>
この例では、activeプロパティがtrueの要素だけがリストに表示されます。
結論
Vue.jsのディレクティブであるv-for、v-if、v-modelを理解することで、動的なUIの開発が格段に楽になります。これらの基本をマスターすれば、より複雑なアプリケーションでも効率的に開発できるようになります。次は、カスタムディレクティブやライフサイクルフックなどを学び、さらに応用的なVue.jsの開発に挑戦してみましょう。
