Ne:Code道場~Vue.js v-for②とv-ifの巻~


Ne:Code道場~Vue.js v-for②とv-ifの巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのv-forとv-ifにおける学習ポイントについて紹介します。

目次
  1. はじめに
  2. v-forの追加の補足とは何なのニャ?
  3. keyをつけていてもいなくても動きは同じニャ?
  4. 次はv-ifについて教えてほしいニャ
  5. 最後に

はじめに

image この記事ではVue.jsのv-forについて前回に引き続き追加の補足をし、その後はv-ifの概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、Vue.jsのv-forやv-ifについて理解を深めてゆきましょう。

v-forの追加の補足とは何なのニャ?

前回の記事では、Vue.jsのv-forの1つ目の記事として、繰り返しで記載していたところを、JavaScriptのfor文のようにシンプルに書けることをみてゆきましたね。その際に用いていた書き方の該当箇所のみを抜粋して確認してみましょう。

      <label v-for="item of list">
        <input type="radio" :value="item.value" v-model="season">
        {{ item.label }}
      </label>

注目してほしいのは、label要素の開始タグです。ここにv-forの記載が書いてありますね。そして実際にこの状態でも動作自体は問題なく動いていたことを確認できるでしょう。ですが、v-forを用いる際には、あわせて利用することがほぼ前提になっているVue.jsの属性が存在しています。
「key」属性がそれです。では、試しにkey属性を付けた状態を確認してみましょう。

      <label v-for="item of list" :key="item.value">
        <input type="radio" :value="item.value" v-model="season">
        {{ item.label }}
      </label>

違いは「:key="item"」が追加されている部分ですね。「:」がついているので、バインド状態で値を設定していることがわかりますね。なので、属性値として用いられているのは、v-forで回しているitemだということを確認できるでしょう。
でも、ただ、itemをバインドするのではなく、「item.value」とitemオブジェクトの中のvalueプロパティ(春・夏・秋・冬が設定されている値)であることを確認できますね。
itemそのものを設定することができないのは、このkey属性のルールからです。(オブジェクト自体を設定できず、文字や数字などの値を設定するルール)
そのルールさえ守り、一意になる値でありさえすれば、このkey属性に設定する値は何でも構いません。今回は丁度list内のitemオブジェクトのvalueプロパティの値が、その一意であることを満たしていたので用いただけです。
なので、もし、オブジェクト内にidというような一意になる値を別途プロパティとしてもっているのならば、それをバインド用に用いても構いません。
 
image

keyをつけていてもいなくても動きは同じニャ?

keyをつけたパターンでのサンプルコードを見てみましたが、HTML側の記載は増えてはいますけれども、動き自体に変化はありませんね。
実行してみると、同じようにラジオボタンが四季ごとに表示されて、ラジオボタンの選択を切り替えてゆくと、選択した値が下に表示されるのを確認できます。
 
動きが全く同じなのに、keyをつける理由が猫弟子にはイメージできないようです。
これは、keyを用いた場合と、keyを用いない場合で、異なる動きになる例を見たほうがイメージしやすいですよね。ただ、その説明をするにあたっては、Vue.jsでイベント操作を用いたサンプルコードの方がわかりやすいと思います。
 
なので、一旦はv-forを用いる時には、v-forだけではなくkeyを用いることを、知識としておさえておきつつ、この先でVue.jsのイベントの話を取り上げる際に、そのイベントによって配列の中身を変更した結果、keyがついていない場合にはどういう動きになってしまうのかを見て、keyの重要性を確認してゆければと思います。
 
最初のサンプルコードでは、この説明をする前だったので、key属性は敢えて除いていました。以降のサンプルコードでは、上記の説明内容を踏まえつつ、v-forを用いる際には、一意になる値をkey属性に設定してゆきたいと思います。
image

次はv-ifについて教えてほしいニャ

v-modelについて記載した3つ目の記事で、ラジオボタンの他にも、チェックボックスでのサンプルコードを記載していましたね。
ですが、最初の画面表示状態では、「好物は 「[]」 ニャ♪」というように、[](空っぽの配列)が表示されていました。
まだ何を選択されていない場合はそれ用のメッセージを表示し、選択された後に、その選択された配列の値を表示してゆきたいですね。
このような条件による表示の制御はv-ifを用いることで可能になります。まずはサンプルコードを見てみましょう。この機会にv-forに書き換えてチェックボックスの表示をシンプルにしつつ、v-ifを追加したものを確認してゆきます。
まずはJavaScript側からです。

new Vue({
  el: "#app",
  data: {
    foods: [],
    // ラジオボタンのときと同じ用にオブジェクトの配列で必要な情報をまとめているニャ
    list: [{
      value: "カリカリ",
      label: "手堅いカリカリニャ"
    }, {
      value: "猫缶",
      label: "魅惑の猫缶ニャ"
    }, {
      value: "おかか",
      label: "フワフワおかかニャ"
    }, {
      value: "ニボシ",
      label: "まるっとニボシニャ"
    }]
  }
});

ラジオボタンの時と同じ用に、v-for用に必要な情報を配列でもっているという変更が加えられていますね。
次にHTML側を見てゆきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <p>
      好物を選択するニャ(複数選択し放題ニャ!)
      <!-- やはりv-forを使うとスッキリシンプルになるニャ~ -->
      <label v-for="item of list" :key="item.value">
        <input type="checkbox" :value="item.value" v-model="foods">{{ item.label }}
      </label>
    </p>
    <!-- 
      ここが肝のv-ifの記載ニャ!
      JavaScriptのif文の条件式に書くような記載になっているニャ~
      lengthは配列の要素数を取得するプロパティだったニャ!
     -->
    <p v-if="foods.length > 0">
      好物は 「{{ foods }}」 ニャ♪
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

猫弟子のコメントでも書いてありますが、v-ifのところにはif文の条件式にあたる記載が書いてありますね。「v-if="foods.length > 0"」ということで、foodsというチェックボックスの選択された値が入っている配列の要素数を見て、1つでも選択されていた場合、正しいと判定される条件になっていることを確認できるでしょう。
実際に実行してみますと、画面を表示した状態では、「好物は...」の部分は表示されず、チェックボックスを1つでも選択したら表示されることを確認できますね。(そして、チェックボックスをの選択を全て解除したら、「好物は...」の部分は再度非表示になると確認できるでしょう。
 
v-ifのシンプルな利用方法をまずは確認してゆきました。次回は、この延長で、v-ifもJavaScriptのif文と同じように、else-ifやelseなどを活用できることを確認してゆきましょう。
image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

Vue.jsのv-forとv-ifについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. v-forを用いる際には重ね技でkeyも一緒に利用するニャ
    1. 使わないことでどういう問題がおきるのかは、別の記事でまとめるニャ
    2. まずは「転ばぬ先の杖」ということで、v-forを利用する際にはkeyを用いてゆくことを意識してゆくニャ~
  2. v-ifを用いることで条件によって表示非表示を切り替えてゆくことが可能ニャ
    1. v-ifの属性値には、JavaScriptのif文の条件式に書いていたものを記載できるニャ
  3. v-ifのベーシックな書き方を確認したニャ
    1. JavaScriptのif文のように、条件を重ねがけしたり、それ以外という条件で制御することも可能ニャ
    2. そのバリエーションの説明は次回に譲るとして、今回は、基礎文法としての書き方をしっかり抑えておくニャ~

Vue.jsの7つ目の記事として、Vue.jsのv-for、v-ifについて学びました。
次回はv-ifの更に掘り下げで、書き方のバリエーションを増やしつつ、要素自体を消しているv-ifに対して、非表示にしておくだけのv-showの書き方などもみてゆければと思います。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp