【Vue.js】computedプロパティで動的なデータ処理を行う方法

Vue.jsのcomputedプロパティは、データに依存した値をリアクティブに計算し、テンプレート内で効率的に表示するための機能です。フォームの入力に応じた表示内容の変化や、配列のフィルタリングなどで頻繁に利用されます。

computedプロパティの基本的な使い方
methodsとの違いと使い分け
Setterを持つcomputedの活用方法
まとめ｜computedの活用で効率的なVue開発を

computedプロパティの基本的な使い方

Vue.jsにおけるcomputedプロパティは、テンプレート内で使われる計算済みの値を定義するための機能です。通常のデータとは異なり、他のデータに依存して値を自動的に計算し、依存元のデータが変更されたときにだけ再評価されます。

以下は、firstNameとlastNameという2つのデータプロパティを結合してfullNameを算出する基本的な例です。


export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

上記のコードでは、computedオプション内にfullNameというプロパティを定義しています。このプロパティはfirstNameまたはlastNameが変更されたときにのみ再計算され、その他の操作ではキャッシュされた値が使用されます。

このように、computedプロパティを活用することで、テンプレートをシンプルに保ちつつ、複雑な表示ロジックをロジック層に切り分けることが可能になります。

methodsとの違いと使い分け

computedプロパティと似た機能としてmethodsがありますが、両者には重要な違いがあります。どちらもテンプレート内で関数のように使用できますが、再評価のタイミングに大きな差があります。

computedプロパティは、そのプロパティが依存しているデータが変更されたときのみ再評価され、それ以外のタイミングではキャッシュされた値が返されます。これにより、パフォーマンスの最適化が図れます。

一方、methodsは呼び出されるたびに関数が実行されるため、同じ値を返す処理でも毎回再評価が発生します。

以下のコードは、number1とnumber2の合計をcomputedとmethodsの両方で実装した例です。


export default {
  data() {
    return {
      number1: 10,
      number2: 20
    };
  },
  computed: {
    sum() {
      return this.number1 + this.number2;
    }
  },
  methods: {
    calculateSum() {
      return this.number1 + this.number2;
    }
  }
}

この例では、sumはnumber1またはnumber2が変わらない限り再評価されません。一方、calculateSum()はテンプレート内で使用するたびに再実行されます。

この違いにより、テンプレート内で頻繁に呼び出される計算処理や、依存データに基づいた表示用の値にはcomputedが推奨されます。逆に、クリックイベントなどのユーザーアクションに応じて処理を実行したい場合はmethodsを使うとよいでしょう。

Setterを持つcomputedの活用方法

computedプロパティは通常、読み取り専用のgetterとして使用されますが、必要に応じてsetterも定義することができます。これにより、双方向バインディングが可能となり、ユーザーの入力などに応じて内部のデータを自動的に更新できるようになります。

以下は、firstNameとlastNameという2つのデータをまとめて操作できるfullNameプロパティをgetterとsetterで構成した例です。


export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0] || '';
        this.lastName = names[1] || '';
      }
    }
  }
}

このコードでは、fullNameを通じてfirstNameとlastNameの両方をまとめて取得・更新することができます。v-modelを使ってフォーム入力と連携させることで、ユーザーがfullNameを入力すると、自動的にfirstNameとlastNameに分割されて保存される仕組みになります。

このような構造は、入力フォームやプロフィール編集画面など、1つのフィールドで複数の内部データを操作したい場面において特に有効です。getterとsetterを組み合わせることで、データ整合性を保ちながら柔軟な入力処理が可能になります。