【Vue.js】computedプロパティで動的なデータ処理する

Vue.jsのcomputedプロパティは、コンポーネント内でリアクティブに計算されたプロパティを定義するために使用されます。これにより、データの変更に応じて自動的に再計算される値を作成できます。computedプロパティはキャッシュされ、依存しているデータが変更されたときにのみ再計算されるため、パフォーマンス面でも効果的です。

基本的な使い方

computedプロパティは、Vueインスタンスのcomputedオプションにオブジェクトとして定義します。オブジェクトのキーがプロパティ名となり、値には計算ロジックを含む関数を指定します。

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

上記の例では、fullNameというcomputedプロパティが定義されており、firstNameとlastNameを連結してフルネームを生成します。firstNameやlastNameが変更されると、fullNameも自動的に再計算されます。

methodsとの違い

computedプロパティと似た機能を持つmethodsがありますが、両者には重要な違いがあります。computedプロパティは依存しているデータが変更された場合にのみ再計算されるのに対し、methodsは呼び出されるたびに関数が実行されます。これにより、computedプロパティはキャッシュによってパフォーマンスが向上します。

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

この例では、sumはcomputedプロパティで、calculateSumはmethodsです。sumは一度計算されると、その結果がキャッシュされ、number1またはnumber2が変更されるまで再計算されません。これに対し、calculateSumは呼び出されるたびに再計算されます。

Setterを持つcomputedプロパティ

computedプロパティは通常、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のsetterが定義されており、fullNameを更新することでfirstNameとlastNameの値も更新されます。

まとめ

computedプロパティは、Vue.jsの強力な機能の一つであり、リアクティブに計算されたプロパティを効率的に扱うことができます。methodsとの違いを理解し、適切な場面でcomputedを使用することで、パフォーマンスの向上やコードの可読性が向上します。