この記事を書くにあたって
私は都内のWeb制作会社で働くエンジニアです。今の現場ではPHPを使ったスクラッチ開発をしています。今後モダンな企業への転職を考えているので勉強面ではLaravelを学んでおり、その延長線上でVueの勉強もしているので記事にまとめてみました。
Vue.jsとは
Vue.js公式サイト
Evan You氏が創始者である Javascriptのフレームワークです。リリースは2014年にされました。
Vue.jsは、他のjavascriptのフレームワークと比べてシンプルであり、学習コストが低いと言われています。
実際にVue.jsを使ってみた
インストール
今回はCDNを使って実装しました。インストールの必要はないので、とても簡単にVue.jsを、使うことができます。
中規模開発ではnpmやyarnを利用して、インストールする必要があるみたいですね。
<script src="https://unpkg.com/vue"></script>
Hello Worldを出力
シンプルにHello Worldを表示させてみます。
<!DOCTYPE html>
<html>
<head>
<title>stady Vue</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="/app.js"></script>
</body>
</html>
const app = new Vue({
el: '#app',
data: {
message: 'Hello world'
}
})
ソースコードについて
HTMLのscriptのCDNからVueのソースコードを取得しています。javascriptのロジックはapp.jsに切り出しています。
app.jsでは、Vueオブジェクトのインスタンスをnewで生成しています。Vueオブジェクトのインスタンスが生成されることで、Vueアプリケーションが起動します。
設定オブジェクトによって、どのデータ（変数）がDOMのどの要素と関連づけられるのか、どの関数がどのイベントと関連づけられるのか、この設定オブジェクトから取得します。
✅el
まず一つ目のプロパティはelです。
el: '#app'
elには、#appのように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリケーションの範囲、Vueの管轄領域を表します。今回は<div id="app">タグ内部がVueアプリケーションとして認識されるということです。
✅data
二つ目のプロパティはdataです。
data: {
message: 'Hello world'
}
dataは、Vueアプリケーション内で利用できるデータ（変数）を表します。Vueアプリケーション内とはつまりelでした範囲です。変数名とその値を組みにしてオブジェクトが指定されます。
✅テンプレート
<div id="app">
<h1>{{ message }}</h1>
</div>
<h1>{{ message }}</h1> に注目してみてください。
- 二重括弧で指定することによって値が表示される。
- 設定オブジェクトのdataプロパティに指定したオブジェクトに含まれている、messageがアプリケーション内で使用できる
- Vueインスタンスが起動すると
{{ message }}の部分がHello Worldに書き換えられ、<h1>Hello world</h1>というDOMが生成された。
まとめ
-
#appのように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。 -
dataは、変数名とその値を組みにしたオブジェクトが指定されます。Vueアプリケーション内で利用できるデータ（変数）を表します。