Vue.jsに算出プロパティと言うのがありますよね。
分かるようで分からない算出プロパティ。
今回はそんな算出プロパティを掘り下げていこうと思います！
関連記事
最近話題のVue.jsですが、全くの初心者にはどういったものなのか分からないですよね。 僕もクライアント側は詳しくないので、Vue.jsについて勉強してみました。 ということで今回は、Vue.jsの基本的な使い方をサンプルコード[…]
目次
算出プロパティとは
任意に処理を含めることのできるデータです。
算出プロパティを使うメリット
Vue.jsには、MustacheやディレクティブにJavaScriptが使用できます。
ただし、やたらに式を書き込むと可読性の悪いソースコードが出来上がります。
ですので、式を算出プロパティに記述することで可読性を向上させることができます。
算出プロパティを使ってみよう！
では、早速算出プロパティを使ってみましょう！
算出プロパティは「computed」オプションに定義します。
前提として、index.htmlとmain.jsは同階層にあるものとします。
算出プロパティの簡単なサンプル
下記の算出プロパティは、widthプロパティの半分のサイズを計算してその結果を値にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>{{ width }} の半分は {{ halfWidth }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var app = new Vue({ el: '#app', data: { width: 800 }, computed: { // 算出プロパティhalfWidthを定義 halfWidth: function() { return this.width / 2 } } }) |
算出プロパティを組み合わせる
算出プロパティを組み合わせてみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <p>X: {{ halfPoint.x }}</p> <p>Y: {{ halfPoint.y }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var app = new Vue({ el: '#app', data: { width: 800, height: 600 }, computed: { halfWidth: function() { return this.width / 2 }, halfHeight: function() { return this.height / 2 }, // 「width × height」の中心座標をオブジェクトで返す halfPoint: function() { return { x: this.halfWidth, y: this.halfHeight } } } }) |
リストの絞り込み
算出プロパティには「キャッシュ機能」があります。
このキャッシュ機能を利用することで、リストの絞り込み機能を簡単に実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="app"> <input v-model.number="budget">円以下に絞り込む <input v-model.number="limit">件を表示 <p>{{ matched.length }} 件中 {{ limited.length }} 件を表示中</p> <ul> <!-- v-forでは最終結果、算出プロパティのlimitedを使用する --> <li v-for="item in limited" v-bind:key="item.id"> {{ item.name }} {{ item.price }}円 </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var app = new Vue({ el: '#app', data: { // フォームの入力と紐づけるデータ budget: 300, // 表示件数 limit: 2, // もとになるリスト list: [ { id: 1, name: 'りんご', price: 100}, { id: 2, name: 'ばなな', price: 200}, { id: 3, name: 'いちご', price: 400}, { id: 4, name: 'おれんじ', price: 300}, { id: 5, name: 'めろん', price: 500} ] }, computed: { // budget以下のリストを返す算出プロパティ matched: function() { return this.list.filter(function(el) { return el.price <= this.budget }, this) }, // matchedで返ったデータをlimit件返す算出プロパティ limited: function() { return this.matched.slice(0, this.limit) } } }) |
まとめ
算出プロパティをうまく活用することで、可読性の高いソースコードを書くことができます。
可読性が増すことで保守性・メンテナンス性が上がるので、Vue.jsを利用している方は是非活用していきましょう！
おすすめ本
僕がVue.jsの勉強をする際に購入した本になります。
この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ！