JavaScript勉強会

JavaScriptの学習日記

Vue.jsでGet/Setの作成　【JavaScript フレームワーク入門】

Vue.js 読書メモ

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

 

jsstudy.hatenablog.com

 

 

4-3-2　Get/Setの作成

前回、Computedプロパティの使い方を練習しました。

 

(p.134)

Computedプロパティは意外と簡単に作れます。

ただし、このやり方だと、値を取り出す場合はいいのですが、変更する方法が用意されてないことに気がつくでしょう。

Computedプロパティでも、値の設定を行うことは可能です。

 

computed: {
  プロパティ名 : {
    get : function(){……処理……},
    set : function( 引数 ){……処理……}
  }
}

 

プロパティに直接メソッドを設定するのではなく、{ }を付けてその中にgetとsetという2つの項目を用意しています。

そしてそれぞれに値の取得と値の変更のための処理を記述しておくのです。

setのメソッドでは、新たに設定された値が引数に渡されます。

この値を元に処理を作成すればいい、というわけです。

 

今回は、「金額を入力すると消費税込み価格を計算して表示する」というサンプルコードを試してみます。

 

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>税抜価格：<input type="text" v-model="woTax"></p>
    <p>税込価格：<input type="text" v-model="wTax"></p>
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

 

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

 

JavaScript

main.js

function initial() {

  new Vue({
    el: '#msg',
    data: {
      woTax: '0'
    },
    computed: {
      wTax: {
        get: function () {
          return parseInt(this.woTax * 1.08);
        },
        set: function (val) {
          this.woTax = Math.ceil(val / 1.08);
        }
      }
    }
  })
}

 

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

 

f:id:jsstudy:20170720115833p:plain

 

税抜価格の欄に「100」と入力したら、リアルタイムで税込価格に「108」と表示されました。

Computedプロパティのgetが機能して、wTaxが取得できていることが分かります。

 

f:id:jsstudy:20170720120812p:plain

 

今度は逆に、税込価格の欄に「1980」と入力したら、リアルタイムで税抜価格に「1834」と表示されました。

Computedプロパティのsetが機能して、woTaxが再計算されていることが分かります。

 

(p.136)

ここでは、wTaxプロパティ内にgetとsetの項目を用意し、それぞれにメソッドを設定しています。

これで、値の取得と設定の処理が行えるようになりました。

woTaxの値を使ってwTaxは設定されるため、woTaxの値が変更された際には、このwTaxも自動的に更新されます。

 

  • woTax（without Tax、税抜価格） → 普通のプロパティ（Stored Property）
  • wTax（with Tax、税込価格） 　　→ 計算プロパティ（Computed Property）

 

getWithTax（ゲッター、値の取得）、setWithTax（セッター、値の更新）という２つのメソッドを用意しなくても、wTaxという１つの計算プロパティを用意すれば値の取得と更新の両方を兼ねるので、名前の数が節約できますね！

 

Computedプロパティとメソッドの違い

jp.vuejs.org

算出プロパティ vs メソッド

算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。

最終的には、2つのアプローチは完全に同じ結果になります。

 

しかしながら、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。

算出プロパティは、それが依存するものが更新されたときにだけ再評価されます。

キャッシングしたくない場合は、代わりにメソッドを使いましょう。

 

Vue.jsのガイドをよく読んで、使い方を理解したいです。

 

まとめ

  • Computedプロパティは、アクセサー（ゲッターとセッター）を設定できるので、値の取得と更新ができる。

 

 

JavaScript フレームワーク入門

JavaScript フレームワーク入門