【Vue.js】v-modelで双方向バインディングを実装してみましょう

今回の記事は、

  • これからVue.jsを始めてみたい
  • v-modelの使い方が知りたい
  • 双方向バインディングを使ってみたい

という方に向けた記事になっています。

なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

Vue.jsロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


【Vue.js】v-modelディレクティブとは?

v-modelディレクティブは、主にformのinput / textarea などの要素に使用され、View側(HTML)とModel側(Vue.js)との間でデータの双方向バインディングを実現する仕組みになります。

ここで出てきた「双方向バインディング」というのは、View側とModel側とで常にデータを繋ぎ続ける(バインドし続ける)ということであり、具体的に申し上げると、「HTML上で変更したデータがVue.js側にも反映され、逆に何かしらのアクションでVue.js側のデータが変更された場合にはその変更がHTML側にも反映される」ということです。

このv-modelディレクティブを使用することで、フォームに入力された値を瞬時に取得することができ、これまでの素のJavascriptやjQueryでのやり方と比べて格段に効率が上がっています

基本的な使い方は以下の通り、Vueオブジェクトのdataプロパティに登録したキーをそのままv-modelに設定してあげるだけでOKです。

基本的な使い方

<input v-model="test">

<script>
let app = new Vue({
  el: "#app",
  data: {
    test: ""
  }
})
</script>

v-modelを使って双方向バインディングを体験してみましょう

基本的な使い方を知って頂いたところで、続いては実際のコードを見ながらその挙動を確認していきましょう。

まずはその挙動を知っていただくという意味で、シンプルにinput要素のみを用意し、その値がすぐさま画面上に表示されるような機能を実装していきます。

実装コード

<div id="app1">
  <input v-model="input1">
  
  <p v-show="input1">現在の入力値は{{ input1 }}です。</p>
</div>

<script>
let app1 = new Vue({
  el: "#app1",
  data: {
    input1: ""
  }
})
</script>

動作確認用

現在の入力値は{{ input1 }}です。

上記のフォームに入力して頂くと、その入力値が即座に画面上に表示されているのがご確認いただけたかと思います。

素のJavascriptやjQueryでは自らDOMを直接操作する必要がありましたが、Vue.jsだとこれだけで実現できるのですから、驚きですよね。

v-modelディレクティブに修飾子を追加してみましょう

この便利なv-modelディレクティブですが、修飾子を追加することでさらに便利に利用することができます。

主な修飾子としては以下の3種類が用意されています。

1. .lazyinputイベントの代わりにchangeイベントの後に同期するよう設定
2. .number入力値を自動的にNumberに変換
3. .trim入力値から前後の空白を自動的に取り除く

上記の3つのうち、今回は.trim修飾子を使ってみます。

実装コード

<div id="app2">
  <input v-model.trim="input2">
  
  <p v-show="input2">現在の入力値は{{ input2 }}です。</p>
</div>

<script>
let app2 = new Vue({
  el: "#app2",
  data: {
    input2: ""
  }
})
</script>

動作確認用

現在の入力値は{{ input2 }}です。

上記のフォームを試して頂くと、入力値の前後に挿入された空白のみ綺麗に除去されているのがご確認いただけたかと思います。

不要な空白のせいで変なデータが登録されてしまうこともありますので、このtrim修飾子も積極的に使っていきましょうね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでVue.jsのv-modelディレクティブの使い方についてご紹介してきましたがいかがでしたか?

双方向バインディング」をはじめとして、聴き慣れない言葉だらけで最初は混乱されるかもしれませんが、実態を知って頂くと、その利便性に驚かれた方も少なくないのではないでしょうか?

このv-modelディレクティブは、Vue.jsでWebアプリを作成する際に避けて通れない道と言っても過言ではないため、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。