Vue.jsの基本を使って簡単な無駄遣いチェックページを作成する。

半年くらい前に買って積まれてた"Vue.js入門 基礎から実践アプリケーション開発まで"を読み出した。
2章まで終わったけど、学習コストが低いと言いつつもやっぱし覚えることが多くておなか一杯になったので、ここまでをまとめる。
今回は簡単な無駄遣いチェックページを作る。

Vue.js入門 基礎から実践アプリケーション開発まで

作ってみたもの

1週間の無駄遣いチェック画面を作成してみた。
画面としてはこんな感じ。

初期画面

節約できているとき

使いすぎのとき

要求・要件としては以下を想定した。

要求：

・ビール、ボルダリング、銭湯にかかった金額が使いすぎかわかるようにしたい。
・まさか出費が0円のはずがないので、0円だったら入力を促してほしい。
・合計金額も出してほしい。

要件：

・ビール、ボルダリング、銭湯にかかった金額を入力するボックスを作る。
・合計金額が2000円以上だったら"使いすぎ！"を表示する。それより少なければ"節約できてる！"を表示する。
・全項目が0円なら”入力してください！”と表示する。

コード

jsFiddleを使って動かしてみる。

Vue.jsのプロパティとディレクティブ

Vue.jsは学習コストが低いので良いとされるが、それでもやっぱりある程度覚える点がある。本や公式だとパッと全体像が認識できなかったので学習に時間がかかった。
今回使ったのは以下のプロパティとディレクティブだが、これだけでも数が多い。一度自分で画面を作ってみて挙動を見るとある程度分かってきた。

Vueインスタンスのプロパティ

プロパティ名	用途
el	Vueインスタンスのマウント先を指定する
data	UIの状態やデータを保持する
filters	データを整形するなど
computed	dataの変更を検知して計算処理をする
methods	データ変更、HTTPリクエスト発行

ディレクティブ

ディレクティブ名	用途	備考
v-bind	データのバインディング	":"で省略可
v-for	属性値をリストレンダリング	:key=xxx（一意なキー）と併用
v-if	要素の表示/非表示	ほとんど切り替わらないとき
v-show	要素の表示/非表示	頻繁に切り替わるとき
v-on	イベント発生時に属性値を実行	"@"で省略可
v-model	フォーム入力

感想

まだぴんと来ないところも多いが、プロパティやディレクティブに関することはなんとなく分かった。自分は理屈っぽいところがまだ見えてこないので、手を動かしてみて慣れていくと学習効率がよい印象を持った。この調子でコンポーネントもマスターしてゆくぞ～。

参考資料

Vue.jsの公式ガイド

非常にわかりやすいが、ちょっと分量が多い（見ように自分は見えた）。
ある程度進んで雰囲気が分かればVue.js入門で手を動かしてもよいかも。
jp.vuejs.org

JSFiddle

言わずと知れたJavaScriptのウェブ実行環境。
jsfiddle.net