クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Vue.js】computed(算出プロパティ)で割り勘アプリを作る(おまけでこち亀アプリも)

Vue.jsの続きです。前回はv-modelでリアルタイムにフォームの入力文字を表示した。今回はv-modelのcomputed(算出プロパティ)で複数の処理をリアルタイムに行う。「割り勘アプリ」を作る。(おまけで「こち亀アプリ」も作るw)それではいきましょう!

【目次】

※前回:【Vue.js】v-modelデータバインディング事始め(リンダリンダの歌詞を変えてオリジナルラブソングを作る) - クモのようにコツコツと

computed(算出プロパティ)とは

割り勘アプリ、完成品はこちら

See the Pen Vue.js warikan by イイダリョウ (@i_ryo) on CodePen.

食事代の総額と参加人数を入れると一人当たりの単価がリアルタイムに表示される。

f:id:idr_zz:20190622121540j:plain

こういうことを実現するには、これまではHTML上に処理(式)を直接書く必要があった。

<!--computedを使わない例-->
  <p>一人当たり…</p>
  <p class="unitPrice">{{ totalPrice / people }} <span></span></p>

それがcomputedプロパティを使うとプロパティ名を一つ書くだけで済む。(式の部分はJS側に書いてある)

<!--computedを使う例-->
  <p>一人当たり…</p>
  <p class="unitPrice">{{ unitPrice }} <span></span></p>

これによってHTML側はスッキリしたまま、複雑な処理を設定することが可能!

computedの基本形

new Vue({
  el: '#id名',
  data: {
    プロパティ: 値,
    プロパティ: 値
  },
  computed: {
    computedプロパティ: function () {
        //ここに処理を書く
    }     
  }
});

※参考:算出プロパティとウォッチャ — Vue.js

割り勘アプリを作る

それではcomputedプロパティを使って割り勘アプリを作ってみよう。

HTML部分

<section id="warikan">
  <h1>割り勘計算機</h1>
  <p>
    <label>合計<input v-model.number="totalPrice" type="number"></label> ÷ 
    <label>人数<input v-model.number="people" type="number"></label>
  </p>
  <p>一人当たり…</p>
  <p class="unitPrice">{{ unitPrice }} <span></span></p>
</section>
  • #warikanで全体を囲う
  • 合計のinputタグの属性v-model.numbertotalPrice
  • 人数のinputタグの属性v-model.numberpeople
  • 割り勘血表示はcomputedプロパティ名unitPriceのみ

v-model.numbernumberは「修飾子」といって、入力した文字列を数値に変換する。修飾子は他にlazytrimもある。

修飾子名 備考
lazy 文字入力が終わってから処理を実行
number 文字列を数値に変換
trim 文字列内のスペースを削除

lazyはフォームのバリデーションで使えそう。trimはパスワード入力など。

JS部分

new Vue({
  el: '#warikan',
  data: {
    totalPrice: 3000,
    people: 1
  },
  computed: {
    unitPrice: function () {
        return Math.ceil(this.totalPrice / this.people);
    }     
  }
});
  • newVueインスタンス生成。中に連想配列
  • el:の値をhtmlのid名#warikanにして紐づける
  • data:の値は連想配列でv-model totalPricepeopleの初期値を入れている
  • computed:にcomputedプロパティ unitPriceの処理を書く
  • totalPricepeopleで割った単価を返す(外側のMath.ceil()は小数点切り上げ)

eldataの部分はこれまでと変わりないが、注目はcomputed:。この中にcomputedプロパティtotalPriceの処理を無名関数で書いている。データ名は単体だと認識されず頭にthis.を付けることで特定される。

なお、今回は割り勘アプリなので小数点はMath.ceil()で切り上げた。

※参考:【JavaScript】桁指定して四捨五入・切り上げ・切り捨て - Qiita

おまけ:こち亀アプリを作る

なお、「算出プロパティ」という名前だが、普通の文字列を出力する処理も実行できた。

試しに「こち亀」アプリ作ってみた。

See the Pen Vue.js kochikame by イイダリョウ (@i_ryo) on CodePen.

「市区町村名」と「好きな場所」を入力するとこち亀のタイトルがリアルタイムに変わる。

f:id:idr_zz:20190622121644j:plain

HTML部分

<section id="kochikame">
  <h1>そちらどちら?</h1>
  <p>
    <label>市区町村名:<input v-model="address" type="text"></label></p>
    <label>好きな場所:<input v-model="place" type="text"></label>
  </p>
  <p class="police">{{ police }}</span></p>
</section>
  • #kochikameで全体を囲う
  • 市区町村名のinputタグの属性v-modeladdress
  • 好きな場所のinputタグの属性v-modelplace
  • 派出所名はcomputedプロパティ名policeのみ

今回は数値じゃないのでv-modelだけでOK。修飾子numberは不要。

JS部分

new Vue({
  el: '#kochikame',
  data: {
    address: '葛飾区',
    place: '亀有公園'
  },
  computed: {
    police: function () {
        return 'こちら' + this.address + this.place + '前派出所';
    }     
  }
});
  • newVueインスタンス生成。中に連想配列
  • el:の値をhtmlのid名#kochikameにして紐づける
  • data:の値は連想配列でv-model addressplaceの初期値を入れている
  • computed:にcomputedプロパティ policeの処理を書く
  • addressplaceに入力した文字列を文章の中に加えてを返す

ほとんど同じ構造。文字列なので小数点切り上げはなく、文字列同士を+で結合をして文章を作っている。 (数値の修飾子numberがないとたとえば3 + 36ではなく33になってしまうわけです)

最後に

ということで、リアルタイムに複数の処理を行う場合に便利な算出プロパティcomputedでした。かすかーに、ですがだんだんとJSフレームワークを使う利点を体験できてきているようなw

次は監視プロパティwatchにトライ。リアルタイムでデータの値の変更を監視して、その値によって違う処理を行うプロパティです。それではまた!!


※参考:Vue.jsの習得のためにやったことまとめ
qiita.com