面倒な再計算は算出プロパティに任せよう！

算出プロパティー

算出プロパティとは、データから動的に計算されるプロパティのことです。
算出プロパティは、データに依存しているため、データが変更されると自動的に更新されます。
これにより、データの変更に追従して、必要に応じて更新されるため、アプリケーションのパフォーマンスを改善します。

また、データを計算するためだけに関数を記載していくと、コードが肥大化するため可読性が悪くなります。

算出プロパティを使うことで、複雑な計算や演算を行った結果を表示するために、テンプレート内で変数を直接記述する必要がなくなります。

算出プロパティーを使わない場合 

<html>
  <head>
    <title>計算プロパティーなし</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p>合計金額: {{ calculateTotalPrice() }} 円</p>
      <input type="text" v-model="price" />
      <input type="text" v-model="amount" />
      <button @click="addProduct">商品追加</button>
    </div>
  </body>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        price: 0,
        amount: 0,
        products: \[
          { price: 100, amount: 2 },
          { price: 200, amount: 3 },
          { price: 300, amount: 1 },
        \],
      };
    },
    methods: {
      addProduct() {
        let newProduct = {
          price: Number(this.price),
          amount: Number(this.amount),
        };
        this.products.push(newProduct);
      },
      calculateTotalPrice() {
        let total = 0;
        this.products.forEach((product) => {
          total = total + product.price \* product.amount;
        });
        return total;
      },
    },
  }).mount("#app");
</script>

算出プロパティーを使わずに関数を使う方法で記載してみました。

<p>合計金額: {{ calculateTotalPrice() }} 円</p>

この記述で、products配列の計算を行い出力しています。これでも違和感がなく動くのですが、ただ計算するためだけに関数を使用するのはコードの見通しが悪くなりますし、HTML コード内に関数がいきなり出てくるのも何が戻り値として入っているか直感的にわからないため、少し混乱します。

算出プロパティーを使う場合 

<html>
  <head>
    <title>算出プロパティー</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <p>合計金額: {{ totalPrice }}円</p>
      <input type="text" v-model="price" />
      <input type="text" v-model="amount" />
      <button @click="addProduct">商品追加</button>
    </div>
  </body>
</html>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        price: 0,
        amount: 0,
        products: [
          { price: 100, amount: 2 },
          { price: 200, amount: 3 },
          { price: 300, amount: 1 },
        ],
      };
    },
    methods: {
      addProduct() {
        let newProduct = {
          price: Number(this.price),
          amount: Number(this.amount),
        };
        this.products.push(newProduct);
      },
    },
    computed: {
      totalPrice() {
        let total = 0;
        this.products.forEach((product) => {
          total += product.price \* product.amount;
        });
        return total;
      },
    },
  }).mount("#app");
</script>

算出プロパティーを使う方法で記載してみました。

computed: {
  totalPrice() {
    let total = 0;
    this.products.forEach((product) => {
      total += product.price \* product.amount;
    });
    return total;
  },
},

商品オブジェクトの price プロパティと amount プロパティを元に合計金額を算出する計算を行っています。

算出プロパティを使用することで、HTML コード内に計算式や関数名を含めれる必要がなくなり、 この例ではtotalPriceを HTML コード内に記載するだけで、products に変更があった場合は、自動で計算してくれます。

終わりに

算出プロパティを使用することで、短くわかりやすくコーディングを行うことができるようになります。

今回作成したコードは以下 GitHub に置いておくので、気になる方は実際に実行して確認してみてください。ご質問があればコメントよろしくお願いします。

https://github.com/asakura-sakura/wiblok

← 超便利！Vue.jsのコア関数