また、良く分からない単語が出てきたと、嫌がらないでください。
算出プロパティは非常に便利な機能です。
算出プロパティは、dataの数字に何か変化があった時に動きはじめます。
変化を自動的に察知して、指定の処理を走らせるのです。
例えば、inputフォームに「ドル」で金額を入力します。
それを「円」で計算してくれる仕組みを作ったとしましょう。
まずinputフォームに数字を入力するという動作が発生します。
通常、数字を円に変えるためには、inputフォームをチェックする処理を書かなければなりません。
ところが、Vue.jsではまったく必要ないのです。
変化を自動的に察知して、円に変えてくれたら。
さらにソースコードを書くのが楽になりますよね。
そこで、今回のミッションです。
今回は、ドルを入力したら自動で円に変えてくれる機能を作ってみましょう。
ただ、レートは決め打ちで構いません。
今回のミッション
では、さっそく今回作ってみるサンプルです。
下記のURLを再現してみてください。
ドルのinputフォームに数字を入力しましょう。
すると、円に換算されて出力されるはずです。
今回の場合、レートは固定してあります。
まず、ソースコードの解説を見ながら、実際に作ってみてください。
どうしても作れなければ、下記の解答ファイルを見てみましょう。
今回の軸は、算出プロパティ「computed」です。
最初はピンとこないかもしれませんが、何度も試してみてください。
色々試しながら試行錯誤していると、少しずつ理解が深まってきます。
ソースコードの解説はこちら
まず、下記が全てのコードになります。
1行1行、コメントを見ながら目を通してみてください。
<div id="app">
<h1>ドル円変換(1ドル109.89円の時)</h1>
<!--v-modelはbadgetと連動し、リアルタイムで格納された価格を変更できます-->
<!--badgetにはscriptの中で初期の金額が設定されています-->
<input type="text" v-model="badget" />ドル
<div>
<h2>円に変えると</h2>
<!--badgetchangeに109.89円かけられた数値が入ります-->
<!--どうやって109.89円をリアルタイムにかけるのでしょうか-->
<!--script内の算出プロパティcomputedに書かれた関数がかけています-->
<p>{{badgetchange}}円の価値があります</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
//初期の費用を決めます。
badget : 10000
},
//算出プロパティ「computed」は「data」に変化があった時に起動します。
//input経由でbadgetに変化があったら、下記内容が実行されます。
computed:{
//badgetchangeの中に、109.89がかけられた数値が入ります。
badgetchange: function () {
return this.badget * 109.89
}
}
})
</script>
コメントで、大体流れはお分かり頂けましたでしょうか。
badgetの値をcomputedが感知。
computed内にある関数の処理が実行される、という流れです。
算出プロパティは、簡易的なアプリやフォームを作る上で非常に有効です。
フォームのエラーメッセージの出し方など、よりシンプルに書けますね。
ご自身でも、色々試してみてください。