Vue/Nuxt.jsのcomputedで引数を取れる?意味ないかも

プログラミング

Vue/Nuxt.jsのcomputedって引数を取れるのかな?

このような疑問が出てくると思います。

結論から言うと、引数をとることは可能ですが使い道があるのか疑問に感じました。

▼この記事では、以下の点を理解できます。

  1. Vue/Nuxt.jsのcomputedで引数を受け取れるか
  2. Vue/Nuxt.jsのcomputedで引数の受け取り方
  3. Vue/Nuxt.jsのcomputedで引数を取る意味がない理由

Vue/Nuxt.jsでcomputedってよく使いますよね。パフォーマンスを考えるとcomputedで書けるなら書きたいと思うのではないでしょうか。

この記事では、引数ありのcomputedを深堀りしました。Vue/Nuxt.jsに興味がある人は最後までご覧ください。



目次

  1. Vue/Nuxt.jsのcomputedのメリット
    • computedとは
    • computedのメリットがわかるサンプルコード
  2. Vue/Nuxt.jsのcomputedでは引数を受け取れるのか
    • アロー関数で書く – computedで引数を取る方法
    • 無名関数を返す – computedで引数を取る方法
  3. Vue/Nuxt.jsでcomputedで引数を取るのはあり?
    • computedとmethodで同じことができる
    • computedで書くとパフォーマンスアップにつながる?
    • 引数ありのcomputedとmethodsは同じ
  4. まとめ

Vue/Nuxt.jsのcomputedのメリット

まずはcomputedをざっくりおさらいしていきます。

computedとは

算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。
引用元: Vue.js公式

簡単に言うと、値に変化がない場合は呼ばれないということ。

computedのメリットがわかるサンプルコード

ボタンをクリックするとdataのnumの値を+2していくだけのサンプルコードです。

  • sample1は、numの値を返すcomputed
  • sample2は、固定の文字を返すだけ
<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample1: {{ sample1 }}</p>
    <p>sample2: {{ sample2 }}</p>
    <p><button @click="countUp()">COUNT UP</button></p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample1() {
      console.log('sample1 - numを返す')
      return this.num
    },
    sample2() {
      console.log('sample2 - computed文字列を返す')
      return 'computedで文字列を返すだけ'
    }
  },
  methods: {
    countUp() {
      console.log('---------------------')
      console.log('ボタンをクリックしました')
      console.log('---------------------')
      console.log('countUp')
      this.num += 2
    }
  }
}
</script>

consoleの結果は

computedのサンプル

ボタンをクリックしてnumの値が変化すると、sample1の方はconsoleを見ると再計算されているのがわかります。

sample2は、numの値が変化しても影響を受けないため、呼ばれていないのがわかります。

では、この後computedに引数を渡すコードを書いていきます。

Vue/Nuxt.jsのcomputedでは引数を受け取れるのか

冒頭で書いた通り引数を受け取ることは可能です。サンプルコードを元に解説していきます。

computedで引数を取る書き方は2つあります。

アロー関数で書く – computedで引数を取る方法

<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample3: {{ sample3(3) }}</p>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を2倍にして返す')
        return arg * 2
      }
    }
  }
}
</script>

computedもアロー関数を使って引数を受け取ることができます。

アロー関数なので引数は、argです。一行で書くこともできます。そうすると引数の(…)を省略できたり、returnも省略できる、{…}も省略できます。

スッキリ書くことはできますね。

    sample3() {
      return arg => arg * 2
    }

無名関数を返す – computedで引数を取る方法

Vue/Nuxt.jsのcomputedで引数を取るには、無名関数で書く方法があります。

<template>
  <div>
    <h2>computedを調べる</h2>
    <p>sample4: {{ sample4(3) }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample4: function() {
      return function(arg) {
        console.log('sample4 - 引数を2倍にして返す')
        return arg * 2
      }
    },
  }

上記のような書き方で引数を受け取り処理することができます。

Vue/Nuxt.jsでcomputedで引数を取るのはあり?

結論から書くと、書いてもパフォーマンスアップにはつながらないのでは?というのが僕の意見です。理由をサンプルコードで解説します。

computedとmethodで同じことができる

computedで引数を取ることはできることがわかりましたが、methodで同じ事ができますね。

<template>
  <div>
    <p>sample3: {{ sample3(3) }}</p>
    <p>sample5: {{ sample5(3) }}</p>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を2倍にして返す')
        return arg * 2
      }
    }
  },
  methods: {
    sample5(arg) {
      console.log('sample5 - 引数を2倍にして返す')
      return arg * 2
    }
  }
}

sample3はcomputedで書いた例。

sample5はmethodsで書いた例。少し書き方は違うけど出力した値は一緒です。画面の表示は以下の通り。

computed-methods

computedで書くとパフォーマンスアップにつながる?

methodsでかけることをcomputedで書きたいと考えるのは、冒頭で述べたように「computedは値がかわらなければ、呼ばれないためパフォーマンスアップにつながる」という理由が大きいと思います。

では、引数がある場合、methodで書くよりcomputedで引数を取った方がいいのかという疑問について検証していきます。

このサンプルコードにはボタンが設置されており、クリックするとdataのnumを+2していくというものです。

numの値が変化した時にcomputed, methodsでどのような動きをするのか確認してみます。変化する値、numを使っているのはsample1のみです。

  • sample1: [computed] – dataのnumを返すだけ
  • sample2: [computed] – 固定の文字列を返すだけ
  • sample3: [computed] – 引数を受け取る
<template>
  <div>
    <h2>computed(引数あり)のパフォーマンスを調べる</h2>
    <p>sample1: {{ sample1 }}</p>
    <p>sample2: {{ sample2 }}</p>
    <p>sample3: {{ sample3(3) }}</p>
    <p>sample5: {{ sample5(3) }}</p>
    <p><button @click="countUp()">COUNT UP</button></p>
  </div>
</template>


<script>
export default {
  components: {},
  data() {
    return {
      num: 1
    }
  },
  computed: {
    sample1() {
      console.log('sample1 - numを返す')
      return this.num
    },
    sample2() {
      console.log('sample2 - computed文字列を返す')
      return 'computedで文字列を返すだけ'
    },
    sample3() {
      return (arg) => {
        console.log('sample3 - 引数を2倍にして返す')
        return arg * 2
      }
    }
  },
  methods: {
    sample5(arg) {
      console.log('sample5 - 引数を2倍にして返す')
      return arg * 2
    },
    countUp() {
      console.log('---------------------')
      console.log('ボタンをクリックしました')
      console.log('---------------------')
      this.num += 2
    }
  }
}
</script>

ボタンをクリックした結果

ボタンをクリックすると、以下のような結果になりました。

computed-sample

  • sample1 – numの値が更新されているため再描画される
  • sample2 – numに変更があっても、依存関係がないため呼ばれない
  • sample3 – numと依存関係はないが、呼ばれている
  • sample5 – numと依存関係はないが、呼ばれている

引数ありのcomputedとmethodsは同じ

methodsのsample5は、numと依存関係がないわけですが、methodsなので再描画される仕様です。

けれどもcomputedのsample3は、numと依存関係がないのに再描画されています。キャッシュがきいていないということがわかります。

computedで書く最大のメリットが無効になっているので、わざわざcomputedで書く意味があるのか疑問

アロー関数でシンプルに書きたい、イベント以外はcomputedにまとめたいなどの理由があればそれはありだと思います。パフォーマンスを考えてというのであれば??という結果でした。

まとめ

今回は、computedで引数を受け取ることは可能かという疑問に答える内容でした。

引数を受け取るのは可能ですが、キャッシュがきかないためcomputed本来のメリットが消えてしまうということ。

今回は以上になります。

当サイトで申込の多いプログラミングスクール

TechAcademyの無料体験
マンツーマンでオリジナルアプリの作成ができるテックアカデミーは人気が高いプログラミングスクール。
Webエンジニア輩出実績トップクラスの【ポテパンキャンプ】
転職に強く本気でエンジニア転職を目指す人におすすめ。難易度が高いため身につくスキルも高く企業からの評価も高いのが特徴。
CodeCamp無料体験
講師を選択できるのが特徴のコードキャンプ。チャットでの質問ができないと言われていますが、オプションでチャットサポートを選択できるのがあまり知られていない。講師の評判が高いため質問しながらどんどん進みたい人向け。