初心者向け：Vueのcomputedとmethodsの使い分け

はじめに

Social Databank Advent Calendar 2024 の19日目です！
こんにちは！ITベンチャー企業で半年間働いている駆け出しエンジニアです👨‍💻
今回はVue.jsを使用した開発に着手する際
この処理computedとmethodsどっちで書けばいいんだろうな〜🐹となることがあったため
個人的な判断基準をまとめてみました！

computedとは

• 渡すデータの変更を見張って、変更されたときに動く関数
• 値はキャッシュされる

methodsとは

• 基本的に使用する関数
• 使い勝手がいいけど何度も呼び出すと負荷がかかる

結局いつcomputedを使うんじゃ〜

それはずばり…

propsで渡されたデータを加工したいとき

初心者の僕はまずこの1点を意識して使用することにしました

え？それってmethodsでもできるやーん🤔と思ったそこの貴方
そうなんですよ～、実はどっちでもできちゃうんですね

試しにmethodsを使った例文を書いてみました
下記のコードは受け取ったdataFromParentを全部大文字にしちゃうコード

methods

<template>
  <div>
    <p>受け取ったデータ: {{ rawData }}</p>
    <p>加工されたデータ: {{ processedData }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  dataFromParent: {
    type: String,
    required: true
  }
});

const rawData = ref(props.dataFromParent);
const processedData = ref('');

const processData = (data) => {
  processedData.value = data.toUpperCase();
};

onMounted(() => {
  processData(rawData.value);
});
</script>

僕は最初methodsを使ってこんな感じで書いてたんだけど
これだとわざわざ受け取った値を引数として渡してそのために引数を宣言して…みたいな手間がかかってしまうのである…

要は途中で読み手があれ？この引数中身なんだっけな…😵‍💫 となる（僕もなる😷）

次にcomputedを使用したコードを見てみよう

computed

<template>
  <div>
    <p>受け取ったデータ: {{ rawData }}</p>
    <p>加工されたデータ: {{ processedData }}</p>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  dataFromParent: {
    type: String,
    required: true
  }
});

const rawData = computed(() => props.dataFromParent);
const processedData = computed(() => props.dataFromParent.toUpperCase());
</script>

あれ！？さっきよりシンプル…？ とおもったそこの貴方
そう、こっちのほうが色々宣言しなくて済むんすね〜
比較するとこんな感じ

diff.js

<template>
  <div>
    <p>受け取ったデータ: {{ rawData }}</p>
    <p>加工されたデータ: {{ processedData }}</p>
  </div>
 </template>

 <script setup>
  import { ref, onMounted, computed } from 'vue';

  const props = defineProps({
    dataFromParent: {
      type: String,
      required: true
    }
  });

-  const rawData = ref(props.dataFromParent);
-  const processedData = ref('');
-
-  const processData = (data) => {
-    processedData.value = data.toUpperCase();
-  };
-
-  onMounted(() => {
-    processData(rawData.value);
-  });
+  const rawData = computed(() => props.dataFromParent);
+  const processedData = computed(() => props.dataFromParent.toUpperCase());
 </script>

読むべき箇所が減ってるのがわかると思います
わざわざ引数を宣言して渡す必要もないので
考えることも少なくていいと思います🥳

おわりに

厳密に考えるとcomputedとmethodsの使い分けは色々あるみたいなのですが
初心者はまず、ア！propsで受け取ったデータを加工しようとしてりゅ！computedにできないかな〜🐹
くらいの判断基準でcomputedの選択肢を持つのがいいと個人的には思います

もし他にもcomputedを使用すべき箇所があった場合は「ここもcomputedのほうがええで〜」と先輩が優しく教えてくれるはず！（だよね…？）

まずは使い分けの基準を1つ持つのは大事だと思いました
今後一緒に色々覚えていきましょう！🐹💻