更新日: 2022年1月5日
公開日: 2020年12月5日

Ne:Code道場～computedの巻～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのcomputedにおける学習ポイントについて紹介します。

はじめに
computedって何ニャ
computedの書き方や動きについて教えてニャ
computedで書いたものをHTMLで利用する際について聞きたいニャ
最後に

はじめに

この記事ではVue.jsのcomputedについて、概要について取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、Vue.jsのcomputedについて理解を深めてゆきましょう。
（いままでの記事もそうですが、Vue.jsはバージョンは2を用いています。サンプルコードで「vue@2.6.0」という部分でその指定を行っています。Vue.jsの最後で今まで取り上げたものとバージョン3での比較をまとめたいと思っています）

computedって何ニャ

前回の記事では、Vue.jsのv-ifの2つ目の記事として、v-showとの違いを確認しつつ、条件分岐で要素の表示非表示を制御できることをみてゆきましたね。今まで見てきたVue.jsではdataで変数を定義し、それをHTML側で用いていましたが、用いることができるものはdataで設けたものだけではありません。computedを用いることで加工した値をHTML側で用いることも可能になります。まずは、簡単なVue.jsのコードを見るところから初めてゆきましょう。
最初にJavaScriptからです。

new Vue({
  el: "#app",
  data: {
    // 数値エリアにバインドする用の変数ニャ
    count: 0,
  },
  // computedが追加されているニャ！
  computed: {
    // 丸カッコがついていて、メソッドの記載みたいニャ
    evenOdd() {
      // 条件演算子（?）を用いて、三項演算でcountの値から偶数と奇数を取得しているニャ
      // countはただcountと書くのではなく、先頭に「this.」という記載があるニャ
      return this.count % 2 === 0 ? "偶数" : "奇数";
    },
    hasInput() {
      // こちらは、countの値が0以上の場合、「入力あり」と判定するcomputedの定義になっているニャ
      return this.count >= 0;
    }
  }
});

dataとは別に、computedが追加されているのが確認できますね。
細部の確認は次に回すとして、まずはこれを用いるHTML側を確認してしまいましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- ニャ！ここの記載は、以前見たv-modelの時と同じニャ -->
    <!-- dataに定義したcountがv-modelに用いられているニャ -->
    <input type="number" v-model="count">
    <!-- ニャ！ここは、前回までの記事で取り上げられていたv-ifだニャ -->
    <!-- ニャ？v-ifの値に用いられているのは、computedで定義したhasDataになっているニャ！ -->
    <!-- computedでは丸カッコ付きで書いていたけれど、ここではcountと同じ様に丸カッコ無しになっているニャ～ -->
    <p v-if="hasInput">
      <!-- ニャ！hasDataと同じ様に、ここでも丸カッコなしの記載で、computedに書いてあったevenOddが用いられているニャ -->
      入力した正の数字は{{ evenOdd }}ニャ！
    </p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

dataに定義しているcountがv-modelでバインドされているのは、こちらの記事でも取り上げたサンプルのものと同じです。今回computedに記載していたhasInputはv-ifに用い、evenOddについては、その下のメッセージに出力されているのを確認できますね。
実行し入力エリアに数字を入れると、偶数奇数の判定で下のメッセージが切り替えるのを確認できるでしょう。また、負の値が入力されるとメッセージが非表示になることも確認できますね。　

computedの書き方や動きについて教えてニャ

computedは、その名前の通り、dataの値などを元に「計算した結果の値」を動的に取得したい際に用います。今回の例ではcountというdataに記載されていたものの値が変わると、連動してcomputedの値が変更後のcountの値を元に再取得されるのです。
computedでは計算した結果を取得する動きになるため、メソッドのような書き方になっているのも特徴ですね。
計算した結果の値を取得することが目的なので、戻り値ありのメソッドとして、returnが用いられているのを確認できます。
そして、computedの中では、dataのものにアクセスする際に、「count」ではなく、「this.count」と書いているのも重要なポイントです。thisがついていないと、同じメソッド（例：hasInputやevenOdd）内のcountという変数を探しにゆきます。「this.」をつけることで、computedの外に書いてある、dataのcountを用いることができるようになるのですね。
そして、「this.」付きでcomputed内で用いることで、Vue.js側で自動的にその値（ここでは、count）を監視し、値が変わったら、computedを再度実行しなおしてくれるという動きをしてくれるのです。とっても便利ですね。
　
以上の点を踏まえて、猫弟子のコメントを更新したJavaScript側のコードの該当箇所のみを以下に抜粋します。

  computed: {
    // dataの値に連動して取得したい値がある場合はcomputedに記載するといいらしいニャ
    evenOdd() {
      // this.countとすることで、dataのcountにアクセスできるようになるニャ
      // ただのcountにしてしまったら、このメソッド内で定義されているcountをJavaScriptは探しにゆくニャ
      // でも、現時点ではこのメソッド（evenOdd）内にcountっていう変数は無いから、正しく動かなくなってしまうニャ！
      // 計算した結果の値を取得したいから、戻り値ありのメソッドで、returnが定義されているニャ～
      return this.count % 2 === 0 ? "偶数" : "奇数";
    }
  }

computedで書いたものをHTMLで利用する際について聞きたいニャ

HTML側で用いているcomputedは、dataで宣言しているものと同じように利用できているのがポイントですね。computedでの宣言はメソッド形式の丸カッコ付きのものでしたが、HTMLで利用する際にはdataで宣言しているものと同じように変数のように利用できているのが特徴です。
computedを用いなくても、直接その計算式をHTMLに記載することで同様の制御は可能です。（下のサンプルコードでは比較用に計算式を直接書くパターンも設けています）
ですが、computedを利用した結果、その計算式に名前をつけることができるので、読みやすさが上がりますよね。
またhasInputの置き換えならまだしも、「偶数奇数を求める」というような、長い処理は、そのまま書くよりは、computedによるコンパクトっぷりを感じることができるでしょう。
今回の例ではv-modelに用いるcomputedの例はあえて取り上げていません。あくまで読み取り専用としてのcomputedの書き方を見てゆきました。
読み書きができるようにする書き方は次回の「computedについてのその②」の記事にて記載できればと思います。
今のままでは無理ですが、書き方を変えると、v-modelに用いるようなデータバインド用にcomputedを定義することもできるのですね。
　
以上の点を踏まえて、猫弟子のコメントを更新したHTML側のコードの該当箇所のみを以下に抜粋します。

  <div id="app">
    <!-- v-modelでcoumputedの値を用いることもできるけれど、それには専用の書き方があるようニャ！ -->
    <input type="number" v-model="count">
    <!-- dataで宣言されているものを用いるように、v-ifで使うことができているニャ -->
    <!-- ↓のように条件をそのまま書いても同じになるけれど、条件を書くよりシンプルで読みやすくなるニャ～ -->
    <!-- <p v-if="count >= 0"> -->
    <p v-if="hasInput">
      入力した正の数字は{{ evenOdd }}ニャ！
      <!-- computedを使わなかった場合は、長くなって確認しにくくなるニャ～。。 -->
      <!-- 入力した正の数字は{{ count % 2 === 0 ? "偶数" : "奇数" }}ニャ！ -->
    </p>
  </div>

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

Vue.jsのcomputedについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

dataの値だけじゃなく、そのdataの値から処理を加えた結果をcomputedで取得できるニャ
1. 紐付いているdataの値が変更されたら、連動して変わってくれるから便利だニャ～
2. computedとして記載した方がシンプルな記載になっていることを確認できたニャ
computedではメソッドのように定義するけれど、用いる際には変数の様に利用可能ニャ
1. サンプルコードではHTML側で利用する際に、dataの値みたいに、変数のように丸カッコなしで利用できることを確認したニャ
computedで紐付けたいdataの値には、「this.」を使って用いるニャ
1. 「this.」がついていないと、定義しているcomputedの中に該当する変数を探しにいくニャ。dataの方まで探してくれないニャ

Vue.jsの9つ目の記事として、Vue.jsのcomputedについて学びました。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。