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

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

【目次】

computed（算出プロパティ）とは
割り勘アプリを作る
おまけ：こち亀アプリを作る
最後に

※前回：【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.numberをtotalPriceに
人数のinputタグの属性v-model.numberをpeopleに
割り勘血表示はcomputedプロパティ名unitPriceのみ

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

修飾子名	備考
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);
    }     
  }
});

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

el、dataの部分はこれまでと変わりないが、注目は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-modelをaddressに
好きな場所のinputタグの属性v-modelをplaceに
派出所名はcomputedプロパティ名policeのみ

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

JS部分

new Vue({
  el: '#kochikame',
  data: {
    address: '葛飾区',
    place: '亀有公園'
  },
  computed: {
    police: function () {
        return 'こちら' + this.address + this.place + '前派出所';
    }     
  }
});