[[📗07 計算でテンプレートをシンプルに]] < [[📒Vue.jsクエスト]] > [[📗09 styleで見た目をスタイリッシュに]]
## Abstract
[[Computed property]]の使いどころを知りましょう。
## Lesson
[[computed()]]を使った以下のコードがあります。`xを増やす`ボタンを押すと、1つ目の結果が更新されます。2つ目の結果は`y`の値に変化がないため変わりません。
```html
<script setup lang="ts">
import { computed, ref } from "vue";
const x = ref(0);
const y = ref(2);
const incrementX = () => {
x.value++;
};
const sumResult = computed(() => x.value + y.value);
const multiResult = computed(() => y.value * 2);
</script>
<template>
<div>{{ x }} + {{ y }} = {{ sumResult }}</div>
<div>{{ y }} * 2 = {{ multiResult }}</div>
<button @click="incrementX">xを増やす</button>
</template>
```
このようなとき、**`multiResult`の結果は再計算されません**。依存する`y`に変化がないため結果が変わらないことを知っているからです。
一方、[[computed()]]ではなくメソッドを使うと、**`multiResult`の結果は`y`に変化がなくても再描画のたびに再計算されます。**
```html
<script setup lang="ts">
import { computed, ref } from "vue";
const x = ref(0);
const y = ref(2);
const incrementX = () => {
x.value++;
};
const sumResult = () => x.value + y.value;
const multiResult = () => y.value * 2;
</script>
<template>
<div>{{ x }} + {{ y }} = {{ sumResult() }}</div>
<div>{{ y }} * 2 = {{ multiResult() }}</div>
<button @click="incrementX">xを増やす</button>
</template>
```
この挙動は[[computed()]]を使ううえでとても重要です。必ず覚えておきましょう。
## Missions
### Mission 1
#😁EASY
[[#Lesson]]の説明を裏付けるため、該当の処理に[[console.log]]を埋め込み、期待通りの挙動となることを確認してください。その際に[[console.log]]を埋め込んだ==コード差分==を記述してください。
%%
回答例
```diff
- const multiResult = computed(() => y.value * 2);
+ const multiResult = computed(() => {
+ console.log("Call multiResult");
+ return y.value * 2
+ });
```
```diff
- const multiResult = () => y.value * 2;
+ const multiResult = () => {
+ console.log("Call multiResult");
+ return y.value * 2;
+ };
```
%%
### Mission 2
#🙂NORMAL
バグを生みやすい仕様にもかかわらず、[[computed()]]が必要とされている理由を説明してください。
%%
回答例
計算量の多い処理の結果をキャッシュすることでパフォーマンスを向上できるから。
%%
### Mission 3
#🙂NORMAL
[[computed()]]の中でAPIやファイルシステムに依存する処理を書いてはいけない理由を説明してください。
%%
回答例
それらの処理は副作用があり、いつも同じ結果が返却されるとは限らないから。
%%
### Misson 4
#😵HARD
[[Date]]を使って、[[computed()]]を使った場合のみ問題が起こる==意味のある==コードを書いてください。
> [!hint]- Hint 1
> 呼び出すたびに結果が変わるメソッドを[[computed()]]の戻り値として使えば、問題が起こります (2度目以降は再計算されないため)
%%
回答例
```html
<script setup lang="ts">
import { computed, ref } from "vue";
const message = ref("");
const now = computed(() => Date.now());
const handleClick = () => {
message.value = `現在時刻: ${now.value}`;
};
</script>
<template>
<button @click="handleClick">現在時刻表示</button>
<div>{{ message }}</div>
</template>
```
%%
## References
[Computed Properties \| Vue\.js](https://vuejs.org/guide/essentials/computed.html)