「Vue.js」の「算出プロパティ」と「フィルター」を学ぼう！
これまでの学習で「Vue.jsインスタンス」について少しずつ理解が出来てきたような気もします。
まだまださまざまな機能があるため、プログラムを書きながら学んでいきたいと思います。
算出プロパティ
今回は「算出プロパティ」から学んでいきたいと思います。
「HTML」の中に「複雑な処理」を作ると、「コードの可読性（読みやすさ）」が下がってしまいます。
「算出プロパティ」を利用すると「複雑な処理」を「Vueインスタンス」にまとめることができ、「HTMLコード」の可読性を保つことができます。
まず「算出プロパティ」を使わないで「食費」を計算して表示する「Vue.js」のプログラムを作成してみました。
<div id="app">
<p>食費の合計</p>
<p>{{ foodExpense[0]['morning'] + foodExpense[0]['lunch'] + foodExpense[0]['dinner'] +
foodExpense[1]['morning'] + foodExpense[1]['lunch'] + foodExpense[1]['dinner'] }}</p>
</div>
<script>
let foodExpenseDataArray = [{
'day': 1, //日
'morning': 320, //朝食
'lunch': 680, //昼食
'dinner': 830 //夜食
},
{
'day': 2,
'morning': 370,
'lunch': 730,
'dinner': 1020
}
];
let app = new Vue({
el: '#app',
data: {
foodExpense: foodExpenseDataArray,
}
})
</script>
・・・ツッコミどころ満載なプログラムですね。
配列を使ってるのに「繰り返し処理」を使わずに配列の「キー」を指定して「食費の値」を取り出しているあたりとか。
そもそも「HTML」の中に「計算式」が入っているので、読みづらくなっています。
そこで「算出プロパティ」を使っていきます。
「算出プロパティ」は、「計算などの処理ロジック」を「プロパティ」として扱えるようにする機能です。
先ほど作成した「食費計算プログラム」を「算出プロパティ」を利用して書き直してみると、
<div id="app">
<p>食費の合計</p>
<p>{{ totalFoodExpense }}</p>
</div>
<script>
let foodExpenseDataArray = [{
'day': 1, //日
'morning': 320, //朝食
'lunch': 680, //昼食
'dinner': 830 //夜食
},
{
'day': 2,
'morning': 370,
'lunch': 730,
'dinner': 1020
}
];
let app = new Vue({
el: '#app',
data: {
foodExpense: foodExpenseDataArray
},
computed: {
totalFoodExpense: function () {
return this.foodExpense.reduce(function (acum, current) {
return (acum['morning'] + acum['lunch'] + acum['dinner']) + (current['morning'] + current['lunch'] + current['dinner']);
})
}
}
})
</script>
のようになります。
HTML内には「算出プロパティ名」の「totalFoodExpense」のみを書いておき、実際の処理は「Vueインスタンス」の「computedプロパティ」に書いています。
このプログラムを実行すると、
のようになり、「算出プロパティ」の処理の流れは、
のようになります。
「複雑な計算処理」などは「算出プロパティ」を利用することで、「HTMLコード」が読みやすくなっていますね。
他にどのような使いどころがあるのかをこれからも考えていきたいと思います。
フィルター
「文字列」をフォーマットに基づいて加工できる「フィルター」について学んでいきたいと思います。
今回は「携帯電話番号の数値」に「ハイフン」が入った形式に変化させる「フィルター」を作ってみました。
<div id="app">
<p>携帯電話番号</p>
<p>{{ number | mobileNumberFormat }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
number: '01234567890'
},
filters: {
mobileNumberFormat: function (number) {
return number.substring(0, 3) + '-' + number.substring(3, 7) + '-' + number.substring(7, 11)
}
}
})
</script>
フィルターを使用しているのは、
<p>{{ number | mobileNumberFormat }}</p>
の部分です。
「number」は「携帯電話番号」を保存している「Vueインスタンス」の「dataプロパティ」です。
「|」の左にある値は「|」の右側にあるフィルターへ渡されます。
つまり、「number」の値が「mobileNumberFormat」というフィルターへ渡されることになります。
「number」には「01234567890」という数値が入っているため、この値が「mobileNumberFormatフィルター」へ渡されて「012-3456-7890」がフィルターから返されてきます。
自分でプログラムを書いて実行すると理解もどんどん進んでいきますね。
まだまだ基礎部分の学習ですが、「Vue.js」の機能の活用方法が少しずつ見えてきた気がします。