🔥

Vue3の条件付きレンダリングについて調べてみた

に公開
JavaScript
初心者向け
Vue 3
tech

Vue3の条件付きレンダリングは、特定の条件に基づいてDOM（Webページの構造）の一部を描画したり、しなかったりする機能です。これにより、動的なユーザーインターフェースを効率的に作成できます。主に v-if と v-show という2つのディレクティブ（Vue独自の属性）を使います。

v-if: 条件が真のときだけ描画

v-if ディレクティブは、指定された条件式が true の場合にのみ、その要素とそれに含まれるコンテンツをDOMに描画します。条件が false の場合は、DOMから要素が完全に取り除かれます（HTML内にコメントとして残ることもあります）。

JavaScriptの if 文のように、v-else や v-else-if と組み合わせて、より複雑な条件分岐も可能です。

基本的な使い方 

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
const type = ref('A')
</script>

<template>
  <button @click="awesome = !awesome">切り替え</button>

  <h1 v-if="awesome">Vueは素晴らしい！</h1>
  <h1 v-else>あれれ？ 🤔</h1>

  <hr>

  <div v-if="type === 'A'">
    Aです
  </div>
  <div v-else-if="type === 'B'">
    Bです
  </div>
  <div v-else-if="type === 'C'">
    Cです
  </div>
  <div v-else>
    A, B, C のいずれでもありません
  </div>
</template>

特徴

  • リアルな条件付きレンダリング: 条件が満たされない限り、要素はDOMに存在しません。
  • 遅延レンダリング: 初期表示時に条件が false の場合、レンダリングのコストがかかりません。
  • 切り替えコストが高い: 表示・非表示を切り替えるたびに、DOM要素の作成と破棄が行われるため、頻繁な切り替えには向いていません。

v-show: CSSで表示を切り替え

v-show ディレクティブも条件に基づいて要素の表示・非表示を切り替えますが、その仕組みが異なります。v-show を使った要素は、条件の真偽にかかわらず常にDOMに描画されます。そして、条件が false の場合には、CSSの display: none; が適用されて非表示になります。

基本的な使い方 

<script setup>
import { ref } from 'vue'

const ok = ref(true)
</script>

<template>
  <button @click="ok = !ok">表示切り替え</button>
  
  <h1 v-show="ok">Hello!</h1>
</template>

特徴

  • CSSベースの切り替え: DOM要素は常に存在し、CSSの display プロパティで表示を制御します。
  • 初期描画コストが高い: 条件が false でも、とりあえずDOMには描画されるため、初期コストは v-if よりも高くなる可能性があります。
  • 切り替えコストが低い: 表示の切り替えはCSSの変更のみで行われるため、非常に高速です。

v-if と v-show の使い分け

どちらを使うかは、パフォーマンスとユースケースによって判断します。

v-if v-show
仕組み DOM要素の追加・削除 CSSの display プロパティの切り替え
初期コスト 低い（条件がfalseの場合） 高い（常にレンダリングされる）
切替コスト 高い 低い
おすすめの場面 ・条件が実行時にほとんど変わらない場合・一度だけ表示されるコンテンツ ・表示・非表示を非常に頻繁に切り替える場合・タブの切り替えなど

簡単に言うと、頻繁に表示を切り替えるなら v-show、そうでなければ v-if」と覚えておくと良いでしょう。

Discussion