前書き
Vue.js は公式ドキュメントとチュートリアルが充実していると言われています。本当にそうだと思います。
「はじめに」のページを読んだときは感動しました。Hello World だけでなく、「Vue.js によってどんなことができるか」を体験し、想像できるからです。いや～、ウキウキしますね。Vue.js であんなことやこんなことができそうだと期待が膨らみますね。
そんなワクワク感を胸に次のドキュメントを読み進めようとするじゃないですか。突然インスタンスとか色々とカタカナが乱舞しはじめるじゃないですか。もうね、心が折れました。公式ドキュメントを一から十まで隅々に渡ってそのまま読むのは、ゆるふわフロントエンドエンジニア yshimizu にとってちょっと難しすぎた。うん。
でも、Vue.js であれこれ試したい気持ちは変わりません。もっと噛み砕いた表現のドキュメントがあったらいいのになあ……。
という訳で、公式ドキュメントから「何をどうすれば、どれが動くのか」みたいな、最小限のルールや構文を自分なりに解釈しながらつまみ食いして、記事に書き下そうと思います。
分からない部分は実際にコードを書いたり躓いたりして理解を深めるスタイルであることと、何より自分の理解のために書いているので、ドキュメント全部は記事にできないと思います。ご了承ください。
また、なにぶん感覚的に生きてきた人間なので、間違った解釈をしていたり、不足していることがあるかもしれません。そのときは、優しくマサカリを投げ……コメント欄に置いていっていただけますと幸いです。
それでは Vue.js のドキュメントを自分なりの解釈で読み進めていきましょう！
はじめに
このドキュメントは Vue.js のチュートリアルみたいなものです。
HTML と JSファイルを用意して、ドキュメント内のコードをコピペしながら読み進めるなりコンソールで弄れば何となく Vue.js の良いところが分かると思います。
個人的には、下記3点に大変な魅力を感じます。
宣言的レンダリングについては、やめ太郎さんの記事 が結構わかりやすく書いてあるので、こちらも合わせて読むと楽しいと思います。
Vue インスタンス
Vue インスタンスの作成
要は、Vue という関数を使うことで、Vue.js が使えるようになるよ！……ってことだと思います。
Vue 関数の中には、オプションオブジェクトと呼ばれるものを渡します。オプションオブジェクトというのは、チュートリアルのコードにもあった data とか props、 template といったもののこと。API リファレンスで一覧が見れます。
ルート Vue インスタンスについては上手く説明できそうにないので割愛。
この辺は実際にコードを書いてみて、理解が深まってから加筆しようと思います。
データとメソッド
data で設定したプロパティは、リアクティブシステムといって、値を変更するとビュー側がそれに応じて更新されるようになります。
「宣言的レンダリング」のチュートリアルで、app.message の値を変えると更新がかかったのは、data で設定した message プロパティがリアクティブシステムとして追加されたからなんですね。
ただし、後から新しいプロパティを追加してもリアクティブシステムには追加されません。これは、data プロパティは、インスタンスが作成されたときに存在していた場合のみリアクティブだからです。
なので、後々プロパティが必要になると分かっている場合は、空でも存在しない場合でも初期値を設定しておきましょう。突然プロパティが必要になったときはどうするんだろう？対処法があるのかな？という疑問は一旦置いておく
既存のプロパティの変更を防ぐ Object.freeze() を使うと、変更が更新されなくなります。リアクティブシステムが変更を追跡することができなくなるからです。
例として挙げられているコードで、どのような挙動をするのか実際にみてみましょう。
まずは Object.freeze() を使う前は、こんなコードです。
var obj = {
foo: 'bar'
}
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<button v-on:click="foo = 'baz'">Change it</button>
</div>
ボタンを押すと、表示されていた「bar」が「baz」に変わりました！
では、Object.freeze() の部分を追加してみます。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- これは `foo` を更新しなくなります! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
今度は、ボタンを押しても「bar」は「bar」のままです。
Object.freeze() で、変更が追跡されなくなったからですね。
data プロパティの他にも、便利なプロパティとメソッドがあります。ユーザ定義のプロパティと区別するために、頭に $ がつけられています。
……ちょっと掲載されているコードがいまいち分からなかったので、これも理解が深まり次第加筆しようと思います。
インスタンスライフサイクルフック
読んだだけじゃよく分からなかった……（無念）
要はデータをセットしたり、更新したときの一連の流れの中で、要所要所のタイミングでコードを追加して実行させることができる……ということ、なのでしょうか。
そんでもって、そのタイミングはライフサイクルダイアグラムに示されてる……って理解で良いんですかね。
ここもコードを書いていくうちに必要となる部分なのでしょう。理解が深まってからの加筆にご期待ください。
次回予告
もうだいぶ記事が長くなってしまったので、今回はここまでにします。
次回はお待ちかねのテンプレート構文を読み進めていこうと思います。