Vue ディレクティブ

Volardev 編集部 April 28, 2026

1. Vue ディレクティブとは

Vue ディレクティブ（Directives） は、HTMLタグに特別な機能を追加する v- というプレフィックス（接頭辞）が付いた特別なHTML属性です。

Vue ディレクティブは Vue インスタンスと接続することで、動的（Dynamic） かつ リアクティブ（Reactive） なユーザーインターフェースを構築します。
Vue を使用すれば、従来の JavaScript の手法と比較して、より少ないコードで簡単にレスポンシブなページを作成することが可能です。

2. 主要な Vue ディレクティブ一覧

本チュートリアルで使用する主な Vue ディレクティブを以下にまとめます。

ディレクティブ	詳細
v-bind	HTMLタグの属性を Vue インスタンス内のデータ変数に接続します。
v-if	条件に応じて HTML タグを生成します。`v-else-if` および `v-else` ディレクティブと一緒に使用されます。
v-show	条件に応じて HTML 要素を表示するかどうか（可視性）を指定します。
v-for	Vue インスタンス内の配列（Array）に基づき、for ループを使用してタグのリストを生成します。
v-on	HTML タグ上のイベントを JavaScript のエクスプレッション（式）または Vue インスタンスのメソッドに接続します。イベント修飾子（Event Modifiers）を使用して、特定のイベントに対する反応をより詳細に定義することも可能です。
v-model	`<form>`、`<input>`、`<button>` などの HTML フォーム要素で使用されます。入力要素と Vue インスタンスのデータプロパティとの間に双方向バインディング（Two-way Binding）を作成します。

3. v-bind ディレクティブの使用例

以下の例では、ブラウザが Vue インスタンスを参照して、<div> 要素に接続すべきクラス（class）を判別します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    /* ピンクの背景色を定義するクラス */
    .pinkBG {
      background-color: lightpink;
    }
  </style>
</head>
<body>

  <div id="app">
    <div v-bind:class="vueClass"></div>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          // CSSクラス名を変数として定義
          vueClass: "pinkBG"
        }
      }
    })
    app.mount('#app')
  </script>
</body>
</html>

注意： 上記の例は Vue のコードを使わなくてもはるかにシンプルに記述できますが、ここでは仕組みを理解するために Vue を使用しています。Vue の真のメリットは、後の章で解説する「ユーザーの操作に反応するレスポンシブなページ」を作成する際に真価を発揮します。