site iconKoei's Digital Garden

Archive

Conditional Rendering - 条件による描画制御

6 min read

Conditional Rendering - 条件による描画制御

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Vue の conditional rendering は、状態に応じて要素やブロックを描画するかどうかを制御する仕組みである。主な手段は v-if 系と v-show であり、どちらも見た目上は条件付き表示だが、DOM に対する挙動は異なる。

Why（なぜ必要か）

UI では、表示する内容が状態に依存するケースが多い。例えば以下のような場面で使う。

  • ログイン状態による表示切り替え
  • 読み込み中 / エラー / 正常表示の分岐
  • 権限に応じた編集UIの表示制御
  • 開閉を繰り返す補助UIの表示制御

Vue はこれをテンプレートレベルで宣言的に記述できる。

How（どう動くか）

v-if

<h1 v-if="awesome">Vue is awesome!</h1>

v-if は条件が truthy の時だけブロックを描画する。false の場合は DOM に存在しない。単に隠すのではなく、要素・子component・イベントリスナの生成自体を行わない。

v-else / v-else-if

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A/B/C</div>

通常の if / else if / else と同様に分岐チェーンを構成する。v-else と v-else-if は、直前の v-if または v-else-if に隣接していなければ認識されない。

<template v-if>

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

複数要素をまとめて条件分岐したい時に使う。<template> 自体は最終DOMに出力されず、見えないラッパーとして機能する。

v-show

<h1 v-show="ok">Hello!</h1>

v-show は要素を常に描画し、CSS の display を切り替えて表示 / 非表示を制御する。DOM から消えるわけではないため、要素は存在し続ける。

v-if と v-show の違い

項目v-ifv-show
false 時の挙動描画しない、DOM に存在しない描画はされる、非表示になる
初期 false 時何もしない（lazy）最初から描画される
toggle コスト高い（生成 / 破棄）低い（表示切替のみ）
初期描画コスト低い高い
向いている用途めったに出ないUI、重いUI頻繁に開閉するUI

実務上は以下の判断が基本になる。

  • 頻繁に表示 / 非表示を切り替える → v-show
  • 条件によって存在しない方が自然、またはあまり切り替わらない → v-if

v-if と v-for の併用

v-if と v-for を同じ要素に書くことは非推奨である。公式では v-if が先に評価されるが、この優先順位は読み手にとって直感的ではない。

<li v-for="user in users" v-if="user.isActive">
  {{ user.name }}
</li>

このような書き方は避け、script 側で computed() を使って絞り込んだ配列を作り、それを v-for で回す方が明確である。

実務上の判断軸

  • 存在そのものを切り替えるなら v-if
  • 見た目だけ頻繁に切り替えるなら v-show
  • 複数要素をまとめて切り替えるなら <template v-if>
  • 多分岐は v-else-if / v-else を使う
  • v-if と v-for を同じ要素で併用しない
  • リスト表示条件は computed で先に整理する

Options API → Composition API 差分（補足）

項目Options API（旧）Composition API（新）
条件 statethis.ok, this.typeok.value, type.value など
条件ロジック整理computed / methods に分散しやすい<script setup> で state と条件を近くに置ける
リスト絞り込みcomputed: { activeUsers() { ... } }const activeUsers = computed(() => ...)

Key Concepts

用語説明
v-if条件が真の時だけ要素を描画する directive
v-elsev-if の else 分岐
v-else-ifv-if の else-if 分岐
<template v-if>複数要素をDOMに余計な wrapper なしでまとめて条件分岐する仕組み
v-showDOM に残したまま CSS で表示 / 非表示を切り替える directive
lazy rendering初期条件が false の時に何も描画しない性質
toggle cost表示切り替え時にかかる処理コスト

Graph View

Backlinks