Vue 算出プロパティ

Volardev 編集部 April 28, 2026

1. 算出プロパティとは？

算出プロパティ（Computed Properties） はデータプロパティと似ていますが、「他のプロパティに依存している」という点が異なります。

算出プロパティ は メソッド（Methods） のように記述されますが、入力引数（Arguments）を受け取ることはできません。
算出プロパティ は依存している値が変更されると自動的に更新されます。一方でメソッドは、イベントハンドリングなどの何らかのアクションが発生した際にのみ呼び出されます。
算出プロパティ は、何か他の状態に依存して出力を生成したい場合に非常に有効です。

2. 算出プロパティは「動的」

算出プロパティの大きな利点は、それが 動的（Dynamic） であることです。つまり、1つまたは複数のデータプロパティの値に応じて自動的に変化します。

算出プロパティは、Vue インスタンスにおいて私たちが学習する3番目の設定オプションです。以前に学習した2つのオプションは data と methods でした。
data や methods と同様に、算出プロパティにも Vue インスタンス内での予約名として computed が用意されています。

2.1 シンタックス (Syntax)

const app = Vue.createApp({
  data() {
    return {
      // データの定義
    }
  },
  computed: {
    // 算出プロパティの定義
  },
  methods: {
    // メソッドの定義
  }
})

3. 実践例：'yes' または 'no' の表示

例えば、ショッピングリストのアイテム作成フォームで、新しいアイテムが重要かどうかをマークしたいとしましょう。チェックボックスがチェックされたときに、以前の例のように true または false というフィードバックを表示することができます。

3.1 通常のデータプロパティによる表示例

入力要素を動的にして、テキストに現在のステータスを反映させます。

<input type="checkbox" v-model="chbxVal"> {{ chbxVal }}

<script>
// data プロパティの定義
data() {
  return {
    chbxVal: false
  }
}
</script>

しかし、誰かに「これは重要ですか？」と尋ねた場合、返ってくる答えは true や false ではなく、おそらく「はい（yes）」か「いいえ（no）」でしょう。フォームをより自然な言語（直感的）に適合させるには、チェックボックスのフィードバックを true/false ではなく yes/no にすべきです。

ここで、算出プロパティが最適なツールとなります。

3.2 算出プロパティによるカスタマイズ例

算出プロパティ isImportant を使用することで、チェックボックスの切り替えに合わせてユーザーへのテキストフィードバックをカスタマイズできます。

<div id="app">
  <input type="checkbox" v-model="chbxVal"> {{ isImportant }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        chbxVal: false
      }
    },
    computed: {
      // chbxVal の値に応じて 'yes' か 'no' を返す
      isImportant() {
        if(this.chbxVal){
          return 'はい (yes)'
        }
        else {
          return 'いいえ (no)'
        }
      }
    }
  })
  app.mount('#app')
</script>

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

算出プロパティとメソッドはどちらもファンクションとして記述されますが、明確な違いがあります：

メソッド は HTML から呼び出されたときに実行されます。
算出プロパティ は依存関係（参照しているデータ）が変更されると自動的に更新されます。
算出プロパティ はデータプロパティと同じように使用されますが、その実体は動的です。

プロフェッショナルな開発においては、計算結果をキャッシュしたい場合（依存データが変わらない限り再計算させたくない場合）は 算出プロパティ を使い、ユーザーの操作に応じて特定の処理を実行したい場合は メソッド を使うのが鉄則です。