速習シリーズ『速習Vue.js』でVue.jsを速習

インターン先でVue.jsを使うので速習してみた。

速習Vue.js 速習シリーズ | 山田祥寛

日本で一番売れているらしいJavaScriptの本『JavaScript本格入門』と同じ著者ということで、安心感が大きい。

目次は以下の通り。

• Part　1：イントロダクション
• Part　2：Vue.jsの基本
• Part　3：イベント処理
• Part　4：フォーム開発
• Part　5：条件分岐とループ
• Part　6：もっとデータバインディング
• Part　7：コンポーネント
• Part　8：ディレクティブ／フィルター／プラグイン
• Part　9：コマンドラインツールvue-cli
• Part　10：ルーティング

CDN経由でシンプルにVue.jsを試すところから始まり、最終的にはvue-cli・単一ファイルコンポーネント・Vue Routerといったところまでカバーしている。

Vue.jsは公式ドキュメントが充実しており、日本語訳もしっかり用意されていることで有名。しかし、この『速習Vue.js』では公式ドキュメントとはまた別の視点から解説されているので理解が深まった。特に今回は「Vue.jsを素早くおさらいする」ということが目的だったので、まさにこの本はうってつけだった。

この本を読むまで忘れていたことがいくつかあったので備忘録を兼ねてまとめる。

value属性は無視される

input, select, textarea 要素などでv-modelを設定するるとき、同時にvalue属性が設定されていたとしても無視される。

チェックボックスの値はtrue-value/false-value属性で変更可能

チェックボックスの値はデフォルトではtrueとfalseになっている。しかしtrue-value, false-value 属性を設定することでBoolean以外の値も設定することができる。

<input type="checkbox" v-model="checked" true-value="yes" false-value="no"></input>

修飾子を使ってv-modelの挙動を制御する

.number

v-modelにバインドされた値はデフォルトでは文字列として認識されるが、.number 修飾子を使うと入力値を数字として扱うことができる。

.trim

.trim修飾子を使うと、入力値の前後にある余分なスペースを除去することができる。

.lazy

デフォルトでは、文字が入力された瞬間にバインドされる。.lazy修飾子を使うと、文字が入力されてフォーカスが外れた後に値がバインドされるようになる。

Vue.jsが拡張した配列メソッド

Vue.jsは配列の要素が代入によって書き換えられても、変更を検出することができない。（配列への参照自体に変化はないため）

配列の変更を検出してもらうためにはVue.set()を使う必要がある。

またVue.jsは以下の配列メソッドをラップしているので、これらのメソッドによる変更はちゃんと検出してくれる。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

感想

総じて読んで良かった。速習ということもあり網羅できていない部分もあるが、ざっくりと全体像を把握するための必要最低限という感じでまとめられている。ボリュームとしても2時間強ぐらいで読み終わるくらいなので、時間がないときにも最適。

Kindle Unlimitedで読めるので、Vue.jsの文法をおさらいしたい人にオススメしたい。