8. Copyright Management Service Corp. All Rights Reserved.
1.コンポーネント
• SPAに用いられるコンポーネント開発に向いたフレーム
ワークになっています。
開発者はコンポーネント毎に開発できるようになっています。
8
9. Copyright Management Service Corp. All Rights Reserved.
SPA
• Single Page Applicationの略
1つの画面のアプリケーション。
→今どきの1画面でいろいろできるアプリ。
開発者からすると1つの画面でいろいろな機能を作る必要がある
→1画面1担当者とすると1人の担当者が大変・・・
→1画面の中でも機能ごとに開発したい
→コンポーネント
9
10. Copyright Management Service Corp. All Rights Reserved.
コンポーネント
• 構成要素。部品。画面内の1機能。
部品なので再利用も可能。
下記はA～Dの4つのコンポーネントを使用したイメージ
10
A
B CD D
11. Copyright Management Service Corp. All Rights Reserved.
コンポーネント使わなくても・・・
• コンポーネントを使用せずとも、htmlファイルとjsファイルをimport
すれば同じことできるのでは？
→できる。
あくまで、Vue.jsは、javascriptでできたフレームワークなので使
用しなくても可能。
11
12. Copyright Management Service Corp. All Rights Reserved.
2.DOM操作が楽、早い
• Javascriptの値の紐づけを記載することで、DOMの変更を自動で
行ってくれる。
• 仮想DOMという仕組みを使用することで、表示しているDOMの
中で必要な箇所のみDOMを変更する。DOM操作が必要最小限なので早
い。
12
13. Copyright Management Service Corp. All Rights Reserved.
仮想DOM
• DOM要素生成する前に、Javascript上で仮想的にDOM要素を作成し、
次回以降は、最小限(差分のみ)のDOM操作することで、表示を早くす
る仕組み。
→時間の掛かるDOM操作を最小限にする。
13
14. Copyright Management Service Corp. All Rights Reserved.
仮想DOM前提
１．掛かる時間
仮想DOMの差分抽出 ＜＜＜ DOM操作
※仮想DOMの差分抽出は、プログラム内のオブジェクト操作なので、
DOMに比べ高速。
２．Vue.jsを使わなくても、最小限のDOM操作は可能。
あくまでフレームワークなので可能です。
ただ、開発者はフレームワークにまかせて、ビジネスロジックや使い勝
手の開発に時間を割きましょうよということ。
14
16. Copyright Management Service Corp. All Rights Reserved.
使い方
１．HTMLのscriptタグで読み込む
読み込むファイルは、CDN or ダウンロードしたファイルを指定する
２．Vue.jsのルールに沿ったコーディングをする
16
17. Copyright Management Service Corp. All Rights Reserved.
HTMLのscriptタグで読み込む
• CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
• ダウンロード
<script src=“../vue.js"></script>
17
ダウンロードした
ファイルを指定
18. Copyright Management Service Corp. All Rights Reserved.
Vue.jsのルールに沿ったコーディングをする
フレームワークなのでルールがあります。
ルールに沿うことで、Vue.jsが様々なことを良しなにやってくれます。
ルールの一部を紹介します。
18
19. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
{{ message }}
</div>
19
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
html
JS
html
テンプレート構文(変数の表示)
結果
20. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
{{ message }}
</div>
20
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
html
JS
html
テンプレート構文(変数の表示)
Vueを使用する要素を
指定
二重中括弧で、ｄａｔａで
定義した変数を指定
21. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
{{ hello() }}
</div>
21
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
hello: function() {
return 'hello!'
}
}
})
html
JS
html
テンプレート構文(関数の使用)
結果
22. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
{{ hello() }}
</div>
22
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
hello: function() {
return 'hello!'
}
}
})
html
JS
html
テンプレート構文(関数の使用)
二重中括弧の中で
関数を指定
23. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
<p>{{ num }}回 </p>
<button v-on:click="countUp()">+1</button>
</div>
23
new Vue({
el: '#app',
data: {
num: 0
},
methods: {
countUp: function() {
return this.num++
}
}
})
html
JS
html
テンプレート構文(v-on)
結果
ボタンを押すごと
にカウントアップ
24. Copyright Management Service Corp. All Rights Reserved.
<div id="app">
<p>{{ num }}回 </p>
<button v-on:click="countUp()">+1</button>
</div>
24
new Vue({
el: '#app',
data: {
num: 0
},
methods: {
countUp: function() {
return this.num++
}
}
})
html
JS
html
テンプレート構文(v-on)
①関数呼び出し
②numをインクリメント
③num表示
click以外にもイベ
ント多数あり
25. Copyright Management Service Corp. All Rights Reserved.
テンプレート構文(便利なところ)
• dataの値が変わったら自動でDOM操作をしてくれる。
下記のような書き換え処理不要
1.ピュアのJavascriptの場合
2.jQuerryの場合
25
document.getElementById('number').innerHTML (number)
$(‘#number').text(number)
