Vue v-if

Vueの v-if ディレクティブを使用すれば、バニラな JavaScript で記述するよりもはるかに簡単に、条件に応じた HTML 要素の生成・制御が可能になります。

Vueでは、条件によって表示したい HTML 要素に直接 if文 を記述するだけです。非常にシンプルです。

1. Vueにおける条件付きレンダリング

Vueにおける 条件付きレンダリング（Conditional Rendering） は、v-if、v-else-if、および v-else ディレクティブを使用して行われます。

条件付きレンダリングとは、「条件が真（true）の場合のみ HTML 要素を作成する」仕組みのことです。たとえば、変数が true なら「在庫あり」というテキストを表示し、false なら「在庫なし」を表示するといった制御です。

1.1 使用例

タイプライターの在庫状況に応じて異なるメッセージを表示します。

<p v-if="typewritersInStock">
  在庫あり
</p>

<p v-else>
  在庫なし
</p>

2. Vueにおける条件（Conditions）

条件（Condition）、いわゆる「if文」とは、結果が true または false のいずれかになるものです。多くの場合、上記の例のように2つの値を比較して、一方が他方より大きいかどうかなどを確認する 比較チェック になります。

これらを実現するために、<、>=、!== といった 比較演算子（Comparison Operators） を使用します。また、比較チェックは && や || といった 論理演算子（Logical Operators） と組み合わせることも可能です。

2.1 比較チェックの例

在庫数の数値を用いて、在庫の有無を判定します。

<p v-if="typewriterCount > 0">
  在庫あり
</p>

<p v-else>
  在庫なし
</p>

3. 条件付きレンダリング用ディレクティブのまとめ

以下の表は、条件付きレンダリングに使用される各ディレクティブの役割をまとめたものです。

3.1 3つのディレクティブを組み合わせた例

ユーザーに「在庫あり」「残りわずか！」「在庫なし」の3パターンを見せるように拡張します。

<p v-if="typewriterCount > 3">
  在庫あり
</p>

<p v-else-if="typewriterCount > 0">
  残りわずか！
</p>

<p v-else>
  在庫なし
</p>

4. 関数の返り値を利用する

v-if ディレクティブには、直接的な比較式だけでなく、関数の返り値（true または false）を使用することもできます。

4.1 ネイティブメソッドを活用した例

特定のテキストに「pizza」という単語が含まれている場合に <p> タグを生成します。ここでは、JavaScriptのネイティブメソッドである includes() を使用して判定しています。

<div id="app">
  <p v-if="text.includes('pizza')">テキストに 'pizza' という単語が含まれています</p>
  <p v-else>テキスト内に 'pizza' は見つかりませんでした</p>
</div>

<script>
// データ定義の例
data() {
  return {
    text: '私はタコス、ピザ、タイ風ビーフサラダ、フォー、タジン鍋が好きです。'
  }
}
</script>

4.2 複数の要素を制御する例

v-if は、<p> タグだけでなく <div> や <img> など、あらゆるタグを制御できます。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>テキストに 'pizza' という単語が含まれています</p>
    <img src="img_pizza.svg">
  </div>
  <p v-else>テキスト内に 'pizza' は見つかりませんでした</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: '私はタコス、ピザ、タイ風ビーフサラダ、フォー、タジン鍋が好きです。'
      }
    }
  })
  app.mount('#app')
</script>

4.3 さらに複雑な条件分岐の例

「pizza」が含まれるか、「burrito」が含まれるか、あるいはそれ以外かによって表示を切り替えます。

<div id="app">
  <div v-if="text.includes('pizza')">
    <p>テキストに 'pizza' という単語が含まれています</p>
    <img src="img_pizza.svg">
  </div>
  <div v-else-if="text.includes('burrito')">
    <p>テキストには 'burrito' が含まれています（'pizza' は含まれません）</p>
    <img src="img_burrito.svg">
  </div>
  <p v-else>'pizza' も 'burrito' もテキスト内には見つかりませんでした</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: '私はタコス、ピザ、タイ風ビーフサラダ、フォー、タジン鍋が好きです。'
      }
    }
  })
  app.mount('#app')
</script>