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

Ne:Code道場～Vue.js v-model② v-modelの修飾子巻～

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

はじめに
v-modelの修飾子って何ニャ
他にはどんな修飾子があるニャ？
修飾子は重ねがけが可能なのニャ？
最後に

はじめに

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

v-modelの修飾子って何ニャ

前回の記事では、Vue.jsのv-modelについて確認してゆきました。HTML側で簡単に設定するだけで、入力された値をそのまま保持することができることをみてゆきましたね。そんな便利なv-modelですが、追加機能を付与しつつ用いてゆくことができます。今回はそんなv-moelの修飾子について確認してゆきましょう。
まずは、ベーシックな例として、入力された値の前後にユーザーが余白を入れる場合を加味して、その余白を自動的に除去してくれる修飾子、「.trim」を取り上げます。
まずは、JavaScript側を確認していきましょう。

new Vue({
  el: "#app",
  data: {
    // 入力エリアにバインドする用の変数ニャ
    message: ""
  }
});

今までの記事で書いていたVue.jsのコードと何ら変わりの無い、elプロパティにdataプロパティのみのシンプルなコードを確認できますね。
次にHTML側を見ていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- おニャ？！v-modelとイコールの間に.trimと書いてあるニャ！ -->
    前後の空白を取り除くニャ→<input type="text" v-model.trim="message">
    <p>
      <!-- 試しに上の入力エリアで、文章の前後に余白を入れてもその余白は表示されないニャ！ -->
      余白(ΦωΦ)→{{ message }}←(ΦωΦ)入ってないニャ！
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

前回の例では、v-modelをHTMLの属性の様に用いつつ、それにイコールでバインドしたい値（dataプロパティに書いてある変数）を記載する例で見てきました。
その書き方でしたら、HTMLの要素の属性の書き方と一致しますが、今回は少し変則で変わっていますね。v-modelとイコールの間に、今回取り上げた「.trim」が差し込まれています。
そして、コメントに書いてあるとおり、入力する値の前後に余白を入れたとしても、入力部分、出力部分ともに、その余白が消えていることを確認できるでしょう。

他にはどんな修飾子があるニャ？

では次に、「.number」という修飾子を見てゆきましょう。HTMLのinput要素には、「type="number"」という数値だけを入力できる要素があります。ただ、v-modelでバインドした場合は、入力された値は内部的に文字列として保持されていることになります。数値として扱いたいものが文字列になってしまうと、色々と困ることがでてくるのです。
その点を踏まえつつ、実際の記載を確認していきましょう。
まずは、JavaScript側を見ていきましょう。

new Vue({
  el: "#app",
  data: {
    // 数値エリアにバインドする用の変数ニャ
    // 初期表示に値を設定せず、入力した後の動作を見てもらいたいから、空っぽであるnullが指定されているニャ～
    count: null
  }
});

今回バインドする予定のcountという変数が定義されていますね。実際にnumberの要素に値を入れた結果の動作をメインに説明したいため、初期値は空っぽであることを示す「null」を設定しています。
次にHTML側を確認します。ここではまず、「.number」を設定しなかった場合にどういう動きになってしまうのかを確認していきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <div>
      <!-- numberのtypeのinputだニャ♪ -->
      <!-- 数値だけを入れられる要素だから、数字入力の際に重宝するニャ～ -->
      <!-- ここでも、v-model使ってバインドされているニャ！ -->
      <!-- 数字入力したら、下の出力がされるはずニャ！ -->
      <input type="number" v-model="count">
      <p>
        <!-- ニャ？？！値を入力すると、足した結果がおかしいニャ！ -->
        <!-- 例えば1と入力すると、11ではなく、110って表示されるニャ！！ -->
        入力した値に10足した結果は{{ count + 10 }}ニャ！<br>
      </p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

「.number」の修飾子を用いていないと、入力した数値に10加算しようとしても、結果が加算ではなく、文字列結合になっているのが確認できますね。
v-modelでバインドしているので、入力された値は文字列として保持されていて、その文字列の入力値 + 10（数値型）という式になり、結果文字列型として横つながりになっているのですね。
では、改めて、「.number」の修飾子を用いたものを見ていきましょう。差分だけ抜粋して記載しています。

      <!-- ニャニャ！ここでは、v-modelとイコールの間に.numberって書いてあるニャ！ -->
      <!-- これで入力された値をちゃんと数値型として保持することが可能ニャ～ -->
      <input type="number" v-model.number="count">
      <p>
        <!-- こっちはバッチリ表示されているニャ♪ -->
        <!-- 1と入力したら、数値型同士の足し算で、ちゃんと11って表示されたニャ～ -->
        入力した値に10足した結果は{{ count + 10 }}ニャ！<br>
      </p>

今回はちゃんと、数値の入力欄に入力された値を数値として保持しているので、「+」は足し算として機能し、ちゃんと入力された値に対して10加算された結果が表示されていますね。
では最後に、「.lazy」修飾子の補足と、修飾子自体の重ねがけについて見ていきましょう。

修飾子は重ねがけが可能なのニャ？

ここでは、「.lazy」修飾子という入力中にはまだ値を確定せず、ユーザーが入力し終えて初めて値を保持することが可能な修飾子を、「.number」修飾子と重ねがけする例として見ていきましょう。
HTML側の記載はこのようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <div>
      <!-- ニャンと！ここでは、v-modelとイコールの間に、.numberと.lazyが入っているニャ -->
      <!-- 修飾子はこんな感じで重ねがけができるのニャ！ -->
      <input type="number" v-model.number.lazy="count">
      <p>
        <!-- .lazyが付く前は、入力すると同時に値が反映されていたけど、今回は入力が確定して初めて反映されたニャ -->
        <!-- 反映するタイミングもこのように制御可能なのニャ～ -->
        入力した値に10足した結果は{{ count + 10 }}ニャ！<br>
      </p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

「v-model.修飾子.修飾子」というように、ドットでつなげることで複数の修飾子を重ねがけすることが可能なのですね。こちらの設定をすることで、「.lazy」がついていなかったときは、入力すると同時に10加算した結果が表示されていたかと思いますが、「.lazy」をつけることで、入力が確定した値に10加算された結果が確認できるかと思います。
前回の記事でv-modelのについて見た際には、HTMLの属性の書き方ととても良く似ているものとして見ていましたが、修飾子を付与してゆくと、属性の書き方とは異なってくるということを確認できるでしょう。属性エリアに記載しているものですが、あくまでVue.jsの設定として記載しているというのがポイントですね。

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

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

最後に

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

v-modelはそのまま用いる他に、修飾子を活用することも可能ニャ
1. 余白を除くなどのちょっとした制御を修飾子におまかせすることで、コード自体もシンプルにつくることができるニャ
数値型と文字型で「+」を用いる場合の注意事項を復習したニャ
1. 文字列型を含んでいる場合の「+」は、文字列型に変わり、結果として加算ではなく、文字列結合の動きになってしまうのが要注意ポイントニャ
2. 「.number」の修飾子を用いることで、数値として入力されたものをちゃんと数値型で保持することができるのを確認したニャ
修飾子は複数重ねがけして設定することが可能ニャ
1. 「v-model.修飾子.修飾子="バインドする変数"」というように、ドットつながりで複数設定することもOKなのニャ
2. HTMLの属性の文法とは変わってくるけれど、Vue.jsの書き方のバリエーションとして抑えていくニャ

Vue.jsの4つ目の記事として、Vue.jsのv-modelの修飾子について学びました。次回はv-modelを入力項目ではなく、選択項目（ラジオ・チェックボックス等）と用いる例を見てゆきたいと思います。見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まっていくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げていきましょう。