更新日: 2022年1月5日
公開日: 2020年4月15日

Ne:Code道場～Vue.js v-model③ 選択項目に用いる場合の巻～

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

はじめに
v-modelを選択項目に用いる場合はどうするニャ？
HTML及びVue.jsで設定していることとは何ニャ？
チェックボックスの場合はどうなるニャ？
最後に

はじめに

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

v-modelを選択項目に用いる場合はどうするニャ？

前回の記事では、Vue.jsのv-modelの2つ目の記事として、v-modelの修飾子について確認してゆきました。1つ目の記事も2つ目の記事も、入力エリアに対してv-modelを用いる例として確認してゆきましたが、今回は、ラジオボタンや、チェックボックスなど選択する項目にv-modelを用いてゆく例を確認してゆきます。
まずは、複数の項目のうち、1つを選択することができるラジオボタンについてです。
最初に、JavaScript側を確認してゆきましょう。

new Vue({
  el: "#app",
  data: {
    // 入力エリアにバインドする用の変数ニャ
    // 初期値として春を設定しているニャ
    season: "春"
  }
});

入力エリアの時の記事で書いていたVue.jsのコードとよく似ている記載になっていますね。elプロパティにdataプロパティのみのシンプルなコードを確認できます。
今回は一番好きな季節を選択するという形式で作成していきます。その一番好きな季節がseasonにバインドされるイメージです。現在は初期値として春が設定されていますね。
次にHTML側を見てゆきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <p>
      好きな季節を選択するニャ！
      <!-- 
        そして、v-modelも、JavaScript側で用意しておいたバインド用のseasonが設定されているニャ
        四季のラジオボタンすべて同じv-modelになっているニャ～
        value属性には、それぞれのラジオボタンを識別する値が設定してあるニャ！
        -->
      <!-- 
          label要素でradioをクルっと包むことにより
          raidoの文字の部分をクリックしてもちゃんと選択される動きになるニャ
          radioの押しやすさがアップするニャ☆
         -->
      <label>
        <!-- 
        もしHTMLの学習を終えているのニャら、name属性が無いことに「？」と感じるかもしれないニャ
        文章の方で補足するニャ～
       -->
        <!-- <input type="radio" name="season" value="春" v-model="season">まったり春ニャ -->
        <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>
      <label>
        <input type="radio" value="冬" v-model="season">こたつの冬ニャ
      </label>
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

まずは、HTMLの設定できていることと、Vue.jsを利用している部分を分けて確認してゆきましょう。

HTML及びVue.jsで設定していることとは何ニャ？

ここでは、HTMLで設定していることの確認として、value属性、そしてそのradioを包んでいるlabel要素について確認してゆきます。そしてその延長で、コメントで書いているname属性への補足をしてゆきます。
　
まずは、value属性です。実は、入力エリア（inputのtypeがtextの要素）のv-modelで設定された値も、HTML上はvalue属性にその値が入っているのです。ラジオはフリーに入力する項目ではなく、選択する項目なので、選択された値を識別するためにこの属性が設定されているのですね。なので、v-modelを用いることでこのvalueの値がバインドされている変数に設定されてゆくという動きになります。
　
また、何気なく用いられているlabel要素は、文字部分も含めて選択できるようにするためです。ラジオボタンの小さな丸の部分だけしかクリック判定が無いと、押しにくくなってしまい使いにくいですよね。
　
そして、name属性についてです。HTMLのformを学んだことがある方は、name属性を同一にすることでラジオボタンのグルーピング（どれか1つだけを選択対象とする）ことを学んでいたかと思います。ただ、これは、Vue.jsを用い、同じバインド項目をv-modelに設定することで、name属性を用いなくても、自然とグルーピングされるという動きになるのです。
　
現在の記載でグルーピングが正しく動作しているため、初期値として春が選択されている状態から、夏を選択すると自然と春の選択はオフになる動きを確認できるでしょう。
　　
以上を確認した上で、Vue.jsの設定を見てみますと、それは入力時の場合と同様、v-moelの設定部分のみになります。
ただ、その前提として、選択された値が識別されるためにvalue属性の設定が必要になるのですね。

チェックボックスの場合はどうなるニャ？

単一の項目のみを選択させるラジオに対して、複数選択も可能なチェックボックスの場合はどうなるでしょう。
まずは、JavaScript側を見てゆきましょう。

new Vue({
  el: "#app",
  data: {
    // 入力エリアにバインドする用の変数ニャ
    // ニャ！この角カッコは、配列ニャ！
    foods: []
  }
});

今回は明らかな変化がありましたね。大枠は同じですが、複数項目を選択できるという点から定義されているバインド用の変数の型は配列になっているのが確認できます。
配列は、複数のものを1つにまとめて持ち運びができる便利な型でしたね。
チェックボックスでは選択されるものが1つとは限らないので、この型で値を保持するのがピッタリということなのですね。
　
ではHTML側を確認します。ここでは好物を複数選択できるという形式で作成しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <p>
      好物を選択するニャ（複数選択し放題ニャ！）
      <!-- 
        ラジオボタンの場合を踏まえると、HTML側の記載は変わらないニャ
        value属性にそれぞれを識別する値が設定されているニャ
        そしてv-modelにはすべて同じデータバインドが書いてあるニャ
       -->
      <label>
        <input type="checkbox" value="カリカリ" v-model="foods">手堅いカリカリニャ
      </label>
      <label>
        <input type="checkbox" value="猫缶" v-model="foods">魅惑の猫缶ニャ
      </label>
      <label>
        <input type="checkbox" value="おかか" v-model="foods">フワフワおかかニャ
      </label>
      <label>
        <input type="checkbox" value="ニボシ" v-model="foods">まるっとニボシニャ
      </label>
    </p>
    <!-- 
      選択したチェックボックスのvalue属性の値がちゃんとfoodsに配列の要素として追加されているのが確認できるニャ♪
     -->
    <p>
      好物は 「{{ foods }}」 ニャ♪
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

ラジオボタンの時とやっていることは大きく変わらないというのを確認できるでしょう。
選択項目なので、小さな四角部分だけでなく、文字のところもクリック判定がされるように同じ用にlabelを用いていますね。
そして選択された値を識別するための、value属性の設定がされています。その結果、チェックボックスを選択するたびに、下の文言のところに選択された項目がカンマ区切りで表示されてゆくことを確認できるでしょう。
確かに配列の要素として追加されているようですね。

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

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

最後に

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

v-modelは選択項目にもシンプルに利用してゆくことが可能ニャ
1. 例えばラジオボタンは、Vue.jsで用いることによってname属性によるグルーピングをしなくてもグルーピングされるという動きになり、HTML側がスッキリしているのを確認できるニャ
label要素は縁の下の力持ちニャ
1. 選択項目はいかに選択しやすくしておくかが重要ニャ
2. ユーザーからしてみたら、文字のところもクリック可能だという動きになっていたほうが、圧倒的に使いやすいニャ
チェックボックスの選択された値、配列で持ってくれるのはとっても便利ニャ
1. 複数のものが選択されるチェックボックスの挙動にぴったりの型ニャ
2. そんな便利な配列形式でv-modelと書いただけで持ってくれるのもデータバインドの便利なポイントニャ

Vue.jsの5つ目の記事として、Vue.jsのv-modelを選択項目に用いる場合について学びました。今回のサンプルコードを見た際に、複数あるラジオボタンやチェックボタン、それぞれがほぼ同じ記載（違いはvalueとラベルの文言くらい）であることを確認できましたね。そのようなものは繰り返しでまとめて出力してゆきたいですよね。
また、まだ入力されていない場合に、チェックボックスの場合は、好物の出力欄に[]が表示されていましたが、そういうのも、未入力の場合はもう少し違う見せ方をしてゆきたいですよね。
次回以降からは、それらが可能になる、v-forやv-ifの記載について、何回かに分けて取り上げてゆく予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。