飴屋

Vue.js/日記001

学習指針

Vue.jsの学習にあたって教材はどうしようかと思ったのですが、とりあえず公式サイトの資料でもたくさん学べそうにみえたので、そこからはじめてみようと思います。

はじめの一歩

Vue.jsのHello World!的なものが最初のサンプルとしてありましたので、それを実行してみて、概要を掴むことにしました。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
{{ message }}
</div>

<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

一行目はVue.jsのコアライブラリへのリンクですね。

次のdiv要素(#app)が実行結果の描画領域を表しているようです。最初から{{ message }}というテキストが入っていますが、このテキストが実行結果と置き換わるのですね。括弧の中が変数名といったところでしょうか。テンプレート機能として使えますね。

二番目のscript要素の中でVueクラスのインスタンスが作られています。どうやらこのVueクラスが肝で、そのインスタンスが一つのUIを規定するということになりそうです。Vueクラスのコンストラクタには一つのObjectが引数として渡され、その内容が「div#appの{{ messaga }}のところに'Hello Vue!'を出力せよ」という命令を表しているっぽいです。引き渡す内容に「el」「data」と名前がついてますが、それぞれ「表示部位」「表示内容」が分かれて記されていることになります。Vue.jsを学習するにあたって小耳にはさんでいたのですが、Vue.jsではMVVMという設計構造が意識されているそうです。

Modelデータ構造data
View表示部el
ViewModelViewとModelをつなぐものVue.jsのコアライブラリがやってくれる？

コンストラクタをみての通り、否が応でもModelとViewを意識して分ける必要がありますので、パッと見て何が何を表しているのかわかりやすいというのはメリットですね。個人で開発しているとあんまり気にならないのですが、チームで作業するときには人の手が加わることも考えてソースを書く必要がでてきますから、それが必然的にできるVue.jsを使ったUIは読みやすいソースになりそうです。

データバインディング

最初のサンプルでは、ViewModelの部分は一度データ（message）をテンプレート({{ message }})に挿入してその役割を終えてしまいましたが、ViewとModelはそれ以降もしっかりとつながっているそうです。Vueのインスタンス（app）はapp.messageにdataとして渡されたModelを保持しているので、コンソールからapp.messageを書き換えると

app.message = 'Hello World!'

Viewの{{ message }}の内容が'Hello World!'に変わりました。この辺がこのフレームワークを利用するにあたっての最重要部分で、あとはその応用と考えれば理解が早まりそうです。

日記一覧