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

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

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

はじめに
v-modelって何ニャ
もしも同じものをJavaScriptで書くとどうなるニャ？
HTMLの属性っぽい書き方に驚いたニャ
最後に

はじめに

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

v-modelって何ニャ

前回の記事では、Vue.jsの事始めその②として、サンプルコードを確認しつつ、JavaScriptのオブジェクトの書き方について取り上げました。その際にVue.jsではdataというプロパティを用い、それをHTML側でバインドしていましたが、毎回dataプロパティの値を直接書き換えてHTML上の表示が変わっているのを確認しているレベルではあまりバインド感を感じられないかと思います。v-modelを用いてdataプロパティの値を利用することで、動的にdataプロパティの値を変えていくことが可能になります。まずは、簡単なVue.jsのコードを見るところから始めていきましょう。
まずHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- input要素が追加されているニャ！ -->
    <!-- v-modelという記載があり、そこにはtextって書いてあるニャ -->
    <!-- このtextはdataプロパティに定義されているものだニャ♪→
    <!-- 波括弧の場合と同様、dataプロパティに存在しない値を書いてしまったら正しく動かないニャ～-->
    <input type="text" v-model="text">
    <!-- この波括弧の書き方は前に見たニャ！textの値が表示されるニャ～-->
    <p>ここにtextの値が表示されるニャ→{{ text }}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

v-model属性の書き方はVue.jsの書き方になります。
「v-model="text"」という記載で、inputというユーザーの入力が可能な要素に対して、入力されたものをtextというdataプロパティに定義している変数と紐付けますよ（バインドしますよ）という記載になります。
併せて、JavaScript側も確認していきましょう。

// 前回の記事で取り上げたコードと全く変わっていないニャ！
new Vue({
  el: "#app",
  data: {
    text: "はじめてのVue.jsニャ！"
  }
});

コメントにある通り、JavaScript側はdataプロパティにtextというのが定義されているだけで、前回記載したサンプルコードと変わっていないことを確認できるでしょう。
変更を加えたのはHTMLだけですが、このHTMLファイルを実行してみると、input要素に「はじめてのVue.jsニャ！」という文言が設定されているのを確認できるかと思います。
と、同時に、input要素の下のp要素にも、右矢印の後に、同様の文言が表示されていますね。
ただ、これだけだと、前回の記事で取り上げたp要素に表示していたものと同じ様に感じられるでしょう。v-modelの場合の大きな違いは、input要素の文言を変更した場合、動的にp要素に表示される文言も変わっていくという部分になります。

もしも同じものをJavaScriptで書くとどうなるニャ？

Vue.jsの例ではHTMLにv-modelを加えるだけで、楽々とデータバインドを実現しましたが、同じ処理をJavaScriptで記載する場合は、少し長い記載が必要になります。まずHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- v-modelの代わりに一意に識別するためのid属性がついているニャ -->
    <input type="text" id="input">
    <!-- 行の中の一部を変更するからということで、インライン要素のspanが追加されているニャ-->
    <!-- そしてspan要素にもid属性がつけられているニャニャ-->
    <p>ここにtextの値が表示されるニャ→<span id="output"></span></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

波括弧でシンプルに書いていたところにspan要素が追加されていたり、id属性をそれぞれに設定したりという違いを確認できますね。HTML時点でもこちらのほうが記載が多くなっています。
次にJavaScript側を見ていきましょう。

// 入力される要素をDOMとして取得しているニャ
let input = document.getElementById("input");
// 出力される要素をDOMとして取得しているニャ
let output = document.getElementById("output");
// 初期設定として入力出力ともに文言を設定しているニャ
// 代入演算子（=）は右から順番に実行されるニャ
// なので入力のvalueに設定しつつ、出力のタグの内側文字として設定している処理になるニャ
output.innerText = input.value = "はじめてのVue.jsニャ！";
// 入力された時のイベントを利用して入力された値を出力要素に設定しているニャ
input.addEventListener("input", (e) => {
  output.innerText = e.target.value;
});

Vue.jsのコードがtextに入っていることが一目瞭然なのに対して、こちらは初期表示のメッセージは固定の文字列で持ち、且つ、イベント操作を追加しと、それなりに複雑な内容になっていることを確認できます。
Vue.jsのコードの方がとてもシンプルに記載できていますね。

HTMLの属性っぽい書き方に驚いたニャ

前回の記事で取り上げていた波カッコ2つの書き方は特徴的なので一目でVue.js固有の書き方だと分かりますが、v-modelはHTMLの属性と同じような書き方になっていることで、最初は慣れないかと思います。
この先、v-model以外にも、Vue.jsを用いているからこそ書けるものをHTML要素の開始タグに追加してゆくことになるかと思いますが、新しい知識を学ぶタイミングで、どこまでがHTML固有の記載で、どこからがVue.jsを用いている書き方になるのかを意識しながら学んでいきましょう。

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

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

最後に

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

どこまでがHTMLそのままの記載で、どこがVue.jsを利用しているからの記載になっているかを意識するニャ
1. 波括弧の場合と同様、Vue.jsを読み込んでいるからこそ、HTMLの属性としてv-modelという記載が可能になっているニャ
2. 波括弧の時と同様、v-modelの属性値には、dataプロパティに存在している変数名を間違えずに書くニャ
v-modelを用いると入力情報をお手軽に操作できるニャ
1. dataプロパティの値をただ表示していたサンプルコードから、JavaScript側は全く変更無しでv-modelの利用を確認できたニャ
2. textという変数の中に入力された値が入っていることが一目瞭然の、シンプルなデータバインドの記載が可能ニャ
JavaScriptでの書き方と比較してみると、v-modelはとてもシンプルに書けていることを確認できるニャ
1. Vue.jsで書いていたコードをJavaScriptに変更したら、HTML側もJavaScript側もそれなりに修正が入っていたニャ
2. しかも、Vue.jsの時にはtextに入っていてそのtextが変わったら連動してバインドしてあるところも変わるという作りだったけど、JavaScriptではイベントを書いたり初期値を設定したりと複雑になりがちだったニャ

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