Vue.js入門ガイド：ディレクティブとイベント処理
はじめに
Vue.jsの大きな特徴は、HTMLに「ディレクティブ」と呼ばれる特別な属性を追加することで、動的な動きを簡単に書けることです。さらに、イベント処理を組み合わせることで、ユーザーの操作に応じたインタラクティブなWebアプリを作ることができます。
この記事では、初心者がまず覚えるべき ディレクティブ と イベント処理 を紹介します。
1. v-if / v-else
機能
条件によって要素を表示・非表示にするディレクティブです。
<p v-if="age >= 20">成人です</p>
<p v-else>未成年です</p>
解説
- v-if="age >= 20" → age が20以上ならこの
要素を表示
- v-else → 上の条件が false の場合に表示される
- VueはDOMから要素を完全に削除・追加するので、
パフォーマンス的にも効率的
→ 例えば「ログインしているかどうか」で表示を切り替える場面に使えます
2. v-for
機能
配列やオブジェクトを繰り返し表示するディレクティブです。
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index }}: {{ fruit }}
</li>
</ul>
解説
- v-for="(fruit, index) in fruits" → 配列 fruits の要素を順番に取り出す
- fruit → 要素の値
- index → 要素の番号（0から始まる）
- :key="index" → Vueが要素を効率的に再描画するための識別子
→ リスト表示やテーブル生成など、繰り返し要素を扱う場面で必須です
3. v-bind
機能
HTML属性に変数を埋め込むディレクティブです。
<img v-bind:src="imageUrl" alt="写真">
解説
- v-bind:src="imageUrl" → 変数 imageUrl の値を src 属性に反映
- v-bind は[:]に省略して :src="imageUrl" と書ける
- クラスやスタイルの切り替えにも使える
<p :class="{ active: isActive }">状態によって色が変わります</p>
→ 状態に応じて属性を動的に変えたいときに便利です
4. v-model
機能
フォーム入力とデータを双方向に結びつけるディレクティブです。
<input v-model="message" placeholder="入力してください">
<p>入力内容: {{ message }}</p>
解説
- 入力欄に文字を入力すると、変数 message に即座に反映される
- 逆に message を変更すると、入力欄の内容も更新される
- 双方向バインディングなので、フォーム処理が非常に簡単になる
→ チャットアプリや検索フォームなど、入力内容をリアルタイムで扱う場面に最適です
5. イベント処理（@click / @input など）
機能
ユーザー操作に応じて処理を実行する仕組みです。
<button @click="sayHello">クリックして挨拶</button>
methods: {
sayHello() {
alert("こんにちは！");
}
}
解説
- @click="sayHello" → ボタンがクリックされたら sayHello メソッドを実行
- methods 内に定義した関数を呼び出せる
- JavaScriptの addEventListener よりシンプルに書ける
イベントオブジェクトを使う
<input @input="showText">
methods: {
showText(event) {
console.log("入力された文字:", event.target.value);
}
}
解説
- event → イベントの詳細情報（入力値やクリックした要素など）
- event.target.value → 入力欄の文字を取得
→ 入力内容をリアルタイムで処理する場面に便利です
引数を渡す
<button @click="addCount(5)">+5</button>
methods: {
addCount(num) {
this.count += num;
}
}
解説
- @click="addCount(5)" → ボタンを押すと num=5 が渡される
- this.count += num → カウントを5増やす
→ 複数のボタンで異なる値を渡すなど、柔軟な処理が可能です
まとめ
この記事では、Vue.js初心者がまず覚えるべき ディレクティブ と イベント処理 を紹介しました。
ディレクティブ
- v-if / v-else → 条件分岐で表示を切り替える
- v-for → 配列やオブジェクトを繰り返し表示
- v-bind → 属性を動的に変更（クラスやスタイルも制御可能）
- v-model → フォーム入力とデータを双方向に結びつける
イベント処理