Vue.jsのComputedプロパティ　【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

jsstudy.hatenablog.com

4-3-1　Computedプロパティ
まとめ

4-3-1　Computedプロパティ

(p.132)

Vue.jsには、ViewModelをより深く使いこなすための機能が多数盛り込まれています。

基本的な使い方がわかったところで、覚えておくと役に立つVue.jsの機能について一通り説明していきましょう。

まずは、Computedプロパティ（算出プロパティ）についてです。

Computedプロパティとは？

プロパティは、基本的に値を保管するだけのものですが、場合によっては値に何らかの処理を施したいこともあります。

単純に保管した値を取り出すのではなく、必要に応じて処理した結果がプロパティの値として渡るようにしたい、ということですね。

このような場合に用いられるのが「Computedプロパティ」（算出プロパティ）です。

Computedプロパティは、メソッドを使って演算した結果を値として取り出すプロパティです。

これは、「computed」という項目として用意されます。
computed: {
  プロパティ名 : function(){……処理……}
}

Computedプロパティは、「計算プロパティ」「算出プロパティ」とも呼ばれています。

単に値を保持するのではなく、計算結果を取得する特別なプロパティです。

特別とは言っても、中身は単なる関数です。

（参考）Computed Properties – Ember.js入門(11) ｜ Developers.IO

Computed PropertiesはObserverの応用的な機能

Computed Propertiesとは、関数（function）として振る舞うようなプロパティを定義する機能です。

SwiftのComputedプロパティ

iOS アプリ開発言語の「Swift」にも、Computedプロパティの機能があります。

（参考）Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (p.138)

コンピューテッドプロパティ ― 値を保持せずに算出するプロパティ

コンピューテッドプロパティは、プロパティ自身では値を保存せず、すでに存在するストアドプロパティなどから計算して値を返すプロパティです。

それでは、Vue.jsのComputedプロパティを使ったサンプルコードを試してみましょう！

(p.133)

合計計算のプロパティ

では、簡単なサンプルを作成してみましょう。

例として、数字（整数）を入力すると、1からその数字までの合計を得られるプロパティを作成してみます。

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>{{ result }}</p>
    <input type="text" v-model="number">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

JavaScript

main.js

function initial() {

  new Vue({
    el: '#msg',
    data: {
      number: '0'
    },
    computed: {
      result: function () {
        var total = 0;
        for (var i = 0; i <= this.number * 1; i++) {
          total += i;
        }
        return total;
      }
    }
  })
}