更新日: 2022年1月5日
公開日: 2020年6月7日

Ne:Code道場～Vue.js v-forの巻～

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

はじめに
v-forでどんなことができるニャ？
サンプルコードのv-for部分について補足してほしいニャ
サンプルコードの:value部分について補足してほしいニャ
最後に

はじめに

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

v-forでどんなことができるニャ？

前回の記事では、Vue.jsのv-modelの3つ目の記事として、v-modelを入力項目ではなく、選択項目に用いる場合について確認してゆきました。その際に、ラジオボタンやチェックボックスを配置する際に、同じような記載が繰り返し登場したのを確認しましたね。v-forを用いると、この繰り返しの記載をシンプルにしてゆくことができます。
v-forはその名前の通り、Vue.jsの提供しているHTML側で用いることができるfor文になります。for文は繰り返し処理を行う際にとても重宝する文法でしたね。JavaScriptサイドだけでなく、HTMLサイドでも、v-forを用いて繰り返し処理を記載してゆくことが可能になります。
まずは、前回のラジオボタンの例で確認してゆきます。
では、最初に、JavaScript側を確認してゆきましょう。

new Vue({
  el: "#app",
  data: {
    // 新たに配列が追加されているニャ！
    // 配列の中身はオブジェクトになっているニャ～
    // ラジオボタンのvalueに設定する値と、ラベルとして表示する文字がオブジェクトには含められているニャ！
    list: [
      {
        value: "春",
        label: "まったり春ニャ"
      },
      {
        value: "夏",
        label: "暑い夏ニャ"
      },
      {
        value: "秋",
        label: "長夜の秋ニャ"
      },
      {
        value: "冬",
        label: "こたつの冬ニャ"
      }
    ],
    // ここは前回と変わっていないニャ
    season: "春"
  }
});

今回はJavaScript側も大きく変更されているのを確認できますね。ただ、v-forはHTML側で記載するものですので、JavaScript側はそのためのお膳立てとして、配列が定義されているのを確認できるでしょう。
画面に設けたいラジオの個数分、つまり、四季としての4つの要素をもった配列が定義されていますね。
そして、その配列の中身は自作のオブジェクトとして、ラジオボタンで異なる値が設定されていたvalue用の値や、ラベルの値などが保持されています。
これでお膳立てはバッチリです。次に実際にv-forを用いている、HTML側を見てゆきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <p>
      好きな季節を選択するニャ！
      <!-- ニャ？！v-modelみたいに、ここにもv-forという記載が追加されているニャ！ -->
      <!-- v-forの値は、for文の時の書き方に良く似ているニャ～ -->
      <label v-for="item of list">
        <!-- v-forでitemと宣言しておいたlist配列の各要素を用いているニャ -->
        <!-- ニャ？？！value属性が、前に「:」がついているニャ？ -->
        <input type="radio" :value="item.value" v-model="season">
        <!-- 下の方のseasonと同様、各要素のlabelの値を設定しているニャ -->
        {{ item.label }}
      </label>
      <!-- 参考までにコメントアウトで残しているニャ！もともとの記載から上のlabel一つにまとめられているニャ -->
      <!-- <label>
        <input type="radio" value="夏" v-model="season">暑い夏ニャ
      </label>
      <label>
        <input type="radio" value="秋" v-model="season">長夜の秋ニャ
      </label>
      <label>
        <input type="radio" value="冬" v-model="season">こたつの冬ニャ
      </label> -->
    </p>
    <p>
      好きな季節は 「{{ season }}」 ニャ♪
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

HTML側も大きく変更していますね。猫弟子のコメントが書いてありますが、それぞれ確認してゆきましょう。

サンプルコードのv-for部分について補足してほしいニャ

まず、もともとは、label要素が4個並んでいましたが、そのうち3個はコメントアウトされていることを確認できますね。
そして、1つ目のlabel要素には、v-modelのように、v-forという記載が追加されています。v-forの中身は、JavaScriptのfor文の書き方に良く似ていますね。
以前、配列の中身を利用することについてまとめた記事で、以下のようなサンプルコードを記載しました。

let cats = ["ミケ", "タマ", "トラ", "ニャンコ先生"];
for (let cat of cats) {
  console.log(cat);
}

v-forの属性値には宣言子（この例ではlet）はついていませんが、よく似ている記載になっていることを確認できるでしょう。
この例でcatと宣言しているものと同様に、今回のサンプルコードで、itemと宣言しているものは、配列の各要素の値を入れるために、好きな名前をつけて構わない変数になります。（なので、itemと記載されているところを全てelementなどに変更しても問題なく動作します）
ここではlabel要素に対してv-forを適用しているので、label要素（及びその中のradio要素）が、配列の要素数（4個）ぶん繰り返し生成されるという動きになるのですね。

サンプルコードの:value部分について補足してほしいニャ

実はこちら、少し省略した記載になっていまして、省略せずに書くと、「:value」は「v-bind:value」となります。
省略無しですと、v-bindという「v-xxx」の記載があるため、一目瞭然でVue.jsの書き方だというのがわかりますね。
バインドというその名前の通り、属性値に設定されている値や変数をそのコロン以降に書いてあるHTMLの属性に対して設定することができる書き方になります。なのでここでは、value属性に対して、配列の各要素（item）のvalueプロパティの値を設定しているという記載になります。
v-bindはよく用いる機能なので、この様に省略記法が用意されているのですね。省略記法があるものは積極的にそちらを用いると、コードの記載がシンプルになりみやすさも上がってくると思います。
ただ、省略した結果valueの前についているコロンをないがしろにしてしまわないよう注意しましょう。たった一文字ですが、もしも「:value="item.value"」を「value="item.value"」と書いてしまっては、Vue.jsのバインド機能は用いることはできなくなります。4つのラジオボタン、すべてのvalueがそのまま「item.value」という値になってしまうことを確認できるでしょう。

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

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

最後に

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

v-forを用いることでHTMLサイドでも繰り返し処理を活用してゆくことができるニャ
1. 重複して書いてあるといざ修正というときに修正しにくくなってしまうという可能性が出てくるニャ
2. そうでなくても、重複して書くのは行数も増えて大変ニャ
3. v-forで繰り返し処理をHTML側でも活用して、シンプルに記載してゆくことができるニャ～
v-forの書き方はJavaScriptの書き方と良く似ているニャ
1. 宣言子がついていないなどの違いはあれど、配列の各要素を受け取る変数名は好きな名前をつけて良いなど、似た部分があるので読み書きしやすいと思うニャ
v-bind:は「:」に省略して記載できる属性へのバインド用の書き方ニャ
1. コロンの後にHTMLの属性をそのままかけば、その属性に対して変数とかの値を設定することができる便利な書き方ニャ
2. たった一文字のコロンだけれど、つけないとそもそもただのHTMLの属性とみなされてしまうニャ。もしも忘れがちなら、省略記法でないv-bind:の書き方からなれてゆくというのも手ニャ～

Vue.jsの6つ目の記事として、Vue.jsのv-forについて学びました。
今回はラジオボタンのサンプルコードベースで見てゆきましたが、次回以降は、チェックボックスのサンプルコードにも同様にv-forを適用しv-forへの理解を更に深めつつ、合わせてv-ifについても取り上げてゆく予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。