Vue.jsの条件付きと繰り返しレンダリング

Vue.jsにおける**条件付きレンダリング（v-if、v-else、v-show）と繰り返しレンダリング（v-for）**は、動的なデータに基づいてUIを変更するための非常に重要な機能です。これらのディレクティブを理解し、適切に使用することで、効率的で応答性の高いアプリケーションを構築できます。本記事では、これらのディレクティブの基本的な使い方から、実際の開発における応用方法までを詳しく解説します。

1. 条件付きレンダリング (Conditional Rendering)

条件付きレンダリングは、特定の条件に基づいてDOM要素を動的に表示または非表示にするために使用されます。Vue.jsでは、主にv-if、v-else、v-showの3つのディレクティブが提供されています。

1.1 v-if

v-ifディレクティブは、条件が真の場合にのみ要素をレンダリングします。条件が偽の場合、その要素はDOMに一切存在しません。

html
CopyEdit
<div id="app">
  <p v-if="isVisible">このテキストは条件が真の場合のみ表示されます。p>
  <button @click="toggleVisibility">表示/非表示を切り替えbutton>
div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  });
script>

この例では、isVisibleがtrueの場合にのみ

タグが表示されます。v-ifは条件が変更されるたびにDOMの再レンダリングを行います。

1.2 v-else

v-elseは、v-ifまたはv-showとセットで使います。v-ifがfalseの場合に、v-elseに指定された要素が表示されます。

html
CopyEdit
<p v-if="isVisible">このテキストは表示されます。p>
<p v-else>このテキストは非表示の場合に表示されます。p>

v-elseは、必ず直前のv-ifまたはv-showと隣接していなければならない点に注意してください。

1.3 v-show

v-showは、v-ifと似た動作をしますが、内部的には要素の表示/非表示をCSSのdisplayプロパティで制御します。要素は常にDOMに存在しますが、display: none;を使って非表示にされます。

html
CopyEdit
<p v-show="isVisible">このテキストは条件に基づいて表示/非表示になります。p>

v-showはv-ifよりもパフォーマンスが良い場合がありますが、要素が常にDOMに残るため、大量の要素を非表示にしたい場合はv-ifの方が効率的です。

2. 繰り返しレンダリング (List Rendering)

Vue.jsでは、配列やオブジェクトを繰り返しレンダリングするためにv-forディレクティブを使用します。このディレクティブは、リストやオブジェクトの各アイテムに対して繰り返し要素を生成します。

2.1 v-forを使った配列のレンダリング

v-forは、配列やオブジェクトをループして、各アイテムに対して要素を繰り返し生成します。

html
CopyEdit
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}li>
ul>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    }
  });
script>

上記の例では、items配列の各アイテムについて

html
CopyEdit
<ul>
  <li v-for="(value, key) in fruit" :key="key">{{ key }}: {{ value }}li>
ul>

<script>
  new Vue({
    el: '#app',
    data: {
      fruit: {
        apple: 'Red',
        banana: 'Yellow',
        cherry: 'Red'
      }
    }
  });
script>

html
CopyEdit
<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}: {{ item.name }}
  li>
ul>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Cherry' }
      ]
    }
  });
script>

html
CopyEdit
<ul>
  <li v-for="item in items" :key="item.id" v-if="item.isVisible">
    {{ item.name }}
  li>
ul>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: 'Apple', isVisible: true },
        { id: 2, name: 'Banana', isVisible: false },
        { id: 3, name: 'Cherry', isVisible: true }
      ]
    }
  });
script>