初めてのvue.js(2.x系)

初めてのVue.js(Vue.js 2.x 系) 
＠フロントエンドカンファレンス福岡2019

自己紹介 
- 井関　健人 
- フリーランスのサーバーサイドエンジニア 
- 技術系講師してるということで駆り出される 
- 渋田　達也 
- フリーランスのフロントが得意な、なんでもエンジニア 
- 前実行委員長ということで駆り出される

本資料について 
- 本資料を用いた営利活動はご遠慮ください

本日のスケジュール 
- Vue.js ってなーに？ 
- Vue.js で商品一覧っぽのを作ってみる

進め方 
- 基本的には解説しながら手を動かしてもらいます 
- 手を動かしてもらいたい部分スライドには 
マークを付けています 
- ソースは全部手打ちする必要はなく、基本コピペでOKです 
作業タイム

対象バージョン 
- Vue.js 2.x 系

Vue.js とは？ 
- 読み方 
- びゅーじぇいえす 
- 公式 
- https://jp.vuejs.org/index.html 
- 作者曰く 
- WebUIを構築するための「プログレッシブフレームワーク」

プログレッシブ？ 
- プログレッシブ：漸進的な

フレームワーク？ 
- フレームワーク framework 
- ① 骨組み。骨格。枠組み。 
- ② 体制。組織。 
- つまり、 
「こういう便利な機能を用意した」から 
「こういう方針で作ってね」が整備されたライブラリ

開発の方針があるといいことあるの？ 
- 保守性が向上 
- どのファイルに何を書くかが決まる 
- ルールに則ってソースを書いていれば、 
他の人が見てもどこで何をしているかが理解しやすい

- 特徴(プログレッシブフレームワーク) 
- 既存のサイトにも少しずつ使い始められる 
- おすすめの利用箇所 
- Webサイト内の小規模な機能 
- 入力フォームとフォームの確認画面 
- 小規模なSPA 
- 中大規模なSPAも可能だが、しっかりとした設計が必須 
Vue.js とは？

ページ遷移のたびに HTML, js を取得  
SPA: Single Page Application 
従来のWEB  SPA 
index.html 
list.html 
detail1.html 
/index.html 
/app.js 
/items 
/items/1 
初回のみ HTML, js を取得  
ページ遷移は js による DOMの再構築で実現  
描画に必要な情報は json などで都度取得  
json 
json 
html 
html 
html 
html

- Web UI を作るための 
- 既存のサイトにも、ちょっとずつ組み込める便利な機能 
- イチから全部作り直さなくてOK 
- 何かを作るための骨組みと方針 
- こういう風に作ったら良いよー 
- 本質的には「SPAフレームワーク」ではない(後述) 
つまり、Vue.jsは？

開発環境の準備 
~ローカル開発~

ローカル + ブラウザ 
作業タイム 
1. 自分のPCに任意の場所に、 
vue_workshopという名前のディレクトリを作成 
2. 作ったディレクトリをVsCodeやAtomなどのエディタで開く 
3. vue_workshopの中にファイル index.html と index.js を作成 
- 内容は次のスライド参照

index.html の内容 
作業タイム 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv=”Pragma” content=”no-cache”> 
</head> 
<body> 
<div> 
SAMPLEコード 
</div> 
<script src="./index.js"></script> 
</body> 
</html>

index.js の内容 
作業タイム 
alert("JavaScript is working!!!")

- ファイルを作成できたら、index.html をブラウザで開く 
- Visual Studio Codeであれば、 
ファイル名を右クリックし、「パスのコピー」でコピーできる 
ローカル + ブラウザ 
作業タイム

ブラウザで index.html を確認してみる 
作業結果チェック 
- アラートが出た後、こんな感じになればOK

Vueの作者が考えるフロントエンドのフレームワーク要素 
引用：https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.g5fc474681_041

- Declarative Rendering（宣言的レンダリング） 
- Component System（コンポーネントシステム） 
- Client Side Routing（クライアントサイドでのルーティング） 
- Large Scale State Management（大規模状態管理） 
- Build System（ビルドシステム） 
Vueの作者が考えるフロントエンドのフレームワーク要素

Vue.jsと周辺ライブラリの責任範囲の区分け 
周辺ライブラリ
担当
Vue.js担当

ここからは以下の2つを説明します 
周辺ライブラリ
担当
Vue.js担当

- 単純なテンプレート構文で宣言的にデータを DOM に描画する 
- 詳細はサンプルを見ながら確認 
- Vue.jsの利用には下記のファイルをHTMLに読み込む必要がある 
- https://cdn.jsdelivr.net/npm/vue/dist/vue.js 
Declarative Rendering（宣言的レンダリング）

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div id="app"> 
{{ message }} 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
</body> 
</html>
Declarative Rendering（宣言的レンダリング）の例 
参考元：https://jp.vuejs.org/v2/guide/index.html

new Vue({ 
el: "#app", 
data: { 
message: "Hello Vue!" 
} 
}) 

Declarative Rendering（宣言的レンダリング）の例

Component System（コンポーネントシステム） 
- 宣言的レンダリングはとても便利 
- ただし画面内のいろいろな箇所で利用するとゴチャゴチャする 
- これってプログラミングの昔からの課題 
- ちゃんと責務に分けて、見通しを良くするために必要なのが 
Component System(コンポーネントシステム)

- ほとんどのWEBアプリケーションはコンポーネントに分解できる 
- ヘッダ、フッタ 
- グローバルナビ 
- コンテンツの一覧 
- コンテンツの詳細 
- SNSのシェア 
- などなど

スタバの商品一覧をコンポーネントに分解

スタバの商品一覧をコンポーネントに分解 
ナビ
絞り込みメニュー
見出し SNS
商品一覧
商品詳細

- すごく雑に言えば、開発者で独自のhtmlタグを定義して、 
様々なページでそれを再利用するというもの 
- コンポーネントは「自己完結した小さく再利用しやすい」形にする 
- コンポーネントを組み合わせ、アプリケーションを構築する 
- WEB標準の「WEBコンポーネント」を参考にしている

コンポーネントシステムのイメージ 
<div id="app"> 
<global-nav></global-nav>  
<item-filter></item-filter>  
<sns-button></sns-button>  
<head-title></head-title>  
<items></items>  
<footer></footer>  
</div>
ナ
ビ
見出し SNS
商品一覧
商品詳
細

コンポーネントで構成されたアプリは木構造になる 
ルート
グロナビ
絞り込み
メイン
見出し SNS
一覧
フッタ

ルート
グロナビ
絞り込み
メイン
見出し
リンクリンクリンク
SNS
一覧
詳細詳細詳細
フッタ
リンクリンク
コンポーネントは小さなコンポーネントが集まって作られる

ルート
グロナビ
絞り込み
メイン
見出し
SNS
一覧
詳細詳細詳細
フッタ
リンクリンク
つまり小さなコンポーネントは再利用が可能

コンポーネントはある程度の塊でまたコンポーネントになる 
ルート
グロナビ
絞り込み
メイン
見出し
SNS
一覧
詳細詳細詳細
フッタ
リンクリンク

ルート
グロナビ
絞り込み
メイン
見出し
SNS
一覧
詳細詳細詳細
フッタ
リンクリンク
コンポーネントで構成されたアプリは全体も1つのコンポーネントと捉えられる

Vue.jsの宣言的レンダリングの基本

// index.html 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div id="app"> 
{{ message }} 
</div> 
</body> 
</html>
作業タイム 
- index.htmlを以下の内容で作成

- index.jsを以下の内容で作成 
// index.js 
new Vue({ 
el: "#app", 
data: { 
} 
}) 
作業タイム 

index.htmlを表示するとこんな感じになる 
作業結果チェック

// index.js 
new Vue({ 
el: "#app", 
data: { 
} 
}) 
// index.html 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<div id="app"> 
{{ message }} 
</div> 
</body> 
</html>
サンプルコードの解説

解説するには先のソースでは見づらい…？

宣言的レンダリングの例の重要なところだけ抜粋 
// index.js 
new Vue({ 
el: "#app", 
data: { 
message: "Hello Vue!"  
} 
}) 
 
// index.html 
<div id="app"> 
{{ message }} 
</div>

これからすること 
- index.js の内容を解説 
- index.html の内容を解説

先程のソースで何が起きてるのか(1) 
// index.js 
new Vue({ 
el: '#app', 
data: { 
message: 'Hello Vue!'  
} 
}) 
- Vue.jsを使うための下準備 
- new Vue() は Vue.js の定番パターン 
- Vueインスタンスを作る 
= Vueのコンポーネントを作る 
= '#app' 配下がコンポーネントになる(後述) 
- Vueの定義は「vue.js」ファイルに存在

- Vueインスタンスを作る時に設定をObject 型で渡せる 
- どんなオブジェクトを作りたいかを指定 
- 具体的な説明は次のスライドで 
 
// index.js 
new Vue({ 
el: '#app', 
data: { 
} 
})

- el プロパティ 
- 宣言的レンダリングが適用される要素を指定 
- HTML と Vueインスタンスを紐付ける 
- 例では「id属性がappの要素」に 
「Vueインスタンス」が紐付く 
// index.js 
new Vue({ 
el: '#app', 
data: { 
} 
}) 
先程のソースで何が起きてるのか(3)

- data プロパティ 
- テンプレート構文(HTML)で利用できる変数を宣言 
- 例では変数 message を宣言的レンダリングの 
過程で利用できる 
- つまり、テンプレート構文上にある message という 
記述は Hello Vue! になる 
// index.js 
new Vue({ 
el: '#app', 
data: { 
} 
})

- id属性が app の中で宣言的レンダリングしたい 
- テンプレートの中では 
- 変数 message は "Hello Vue !" 
- 上記内容で描画をしてください 
index.js の内容まとめ 
// index.js 
new Vue({ 
el: '#app', 
data: { 
} 
})

これからすること 
- index.js の内容を解説 
- 画面を描画するために必要な情報を宣言 
- index.html の内容を解説

- id属性が app のタグを用意 
- index.jsの記述により、 
この中が宣言的レンダリングの対象となる 
index.html では何を書いているのか(1) 
// index.html 
<div id="app"> 
{{ message }} 
</div>

- {{ message }} 
- テンプレート構文 
- {{ }} で囲まれた内容が評価され 
文字列として埋め込まれる 
- 「data要素で指定した値」や「式の戻り値」 
などを指定できる 
- 例ではindex.js で宣言した、要素dataのmessageが埋め
込まれる 
index.html では何を書いているのか(2) 
// index.html 
<div id="app"> 
{{ message }} 
</div>

- 宣言的レンダリングの対象範囲の指定 
- index.jsと合わせて、 
<div id="app"> の中はテンプレートになる 
- index.jsで用意した変数の利用 
- message には index.jsで指定した値を埋め込む 
index.html の内容まとめ 
// index.html 
<div id="app"> 
{{ message }} 
</div>

- html上に描画したい内容や適用範囲を 
テンプレート構文、HTMLタグを利用し宣言 
- js上で描画に必要となる内容を宣言 
- テンプレートとして扱うHTML要素 
- テンプレート上で使う変数、関数など 
 
テンプレートとその中で利用する値(など)を宣言し、描画してもらう 
宣言的レンダリングって何なの？ 
ポイント

宣言的レンダリングのうまみ 
- ビューと値の記述を明確に分離できる 
- 変数化し抽象度を上げることで、テンプレート全体の見通しが良い 
- 「表示のON/OFF」や「繰り返し」のようなロジックを宣言的に書ける 
- DOMのappend、remove地獄から抜け出せる 
ポイント

- 画面の再レンダリングコストが低い 
- 仮想DOMという仕組みで、 
純粋なJavaScriptのappendChildなどよりも低コスト（らしい） 
- Reactでも仮想DOMを利用しているので、Vue.js の専売特許じゃない 
Vue.jsを利用した宣言的レンダリングのうまみ

商品一覧っぽいものを作りながら学ぶ 
Vue.jsの宣言的レンダリング

- index.html と index.js を書き換えてください 
- 内容は以降のスライドに掲載 
- index.cssを作成してください 
- 場所は index.htmlと同じフォルダ 
- 内容は以降のスライドに掲載 
これから商品一覧っぽいものを作ります

- かなり長いので以下のURLにある内容をコピペしてください 
- https://gist.github.com/take2webservice/1e32992c49fa7eb9988210a1ef0
cd72c 
index.html の内容 
作業タイム

- Raw を押すと、index.htmlだけを表示してくれます 
[補足]index.html の内容 
作業タイム

index.js の内容 
作業タイム 
// index.js 
new Vue({ 
el: '#app', 
data: { 
} 
})

index.css の内容 
作業タイム 
- 長いので以下のURLにある内容をコピペしてください 
- https://gist.github.com/take2webservice/fc83bab849c0e32103edeb087c4
73947

編集した index.html をブラウザで開くとこんな感じ 

- 商品一覧部分の<li>タグの部分が繰り返しで見通しが 
悪いのでなんとかする 
- 追加読み込みボタンを押したら動くようにする(未実装) 
- 価格で並べ替えできるようにする(未実装) 
これからすること

Vue.jsには繰り返し表示の仕組みがあるらしい

配列を用いたタグ繰り返し(1) 
- v-for を v-for ディレクティブという 
- 配列の要素数分タグを描画 
- v-for をつけたタグを複数回描画する 
- 取り出した要素はタグの中で利用できる 
<タグ v-for="取り出した値を格納する変数名 in 配列" v-bind:key="一意な値"> 
... 
</タグ> 
ポイント

- v-bind:key を v-bind:key ディレクティブという 
- v-for ディレクティブを使うときは基本セットで使う 
- 配列の中の各要素を特定する一意な値を渡す必要がある 
配列を用いたタグ繰り返し(2) 
<タグ v-for="取り出した値を格納する変数名 in 配列" v-bind:key="一意な値"> 
... 
</タグ> 
ポイント

- まずは思い切って、liタグを最初の1つだけにする 
まずは繰り返すタグを選ぶ 
実演のみ 
<ul class="items"> 
<li class="item"> 
<img src="https://dummyimage.com/200.png/09f/fff" alt="dummy"> 
<div class="title">title1</div> 
<div class="price">1000円</div> 
</li> 
</ul>

- v-forディレクティブを使ってみる 
- ディレクティブの " " の中は式として評価される 
v-forディレクティブで要素を繰り返してみる 
<li class="item" v-for="i in [1,2,3,4,5,6,7,8,9]" v-bind:key="i"> 
</li> 
</ul> 
実演のみ

- タイトルがすべて title1 になっている 
実演のみ

でもこのままじゃ全部の商品名が同じ‥

{{ 変数 or 式 }} 
<div> 
{{ 変数 or 式 }} 
</div> 
ポイント 
- 「テンプレート構文」と呼ばれる 
- new Vue 実行時の引数内のdataプロパティの値や、 
その他のv-for ディレクティブで取り出した変数、 
JavaScriptの式の結果などを埋め込める

- v-forディレクティブで配列から取り出した値を使ってみる 
- title の後ろに、 {{ }} で i を出力してみる 
タイトルをv-forディレクティブの値を元に表示 
<li class="item" v-for="i in [1,2,3,4,5,6,7,8,9]" v-bind:key="i"> 
<div class="title">title{{ i }}</div> 
</li> 
</ul> 
実演のみ

- タイトルがすべて異なるようになっている 
実演のみ

いやいや、値段とかも変えたいよね…？

v-for ディレクティブに dataプロパティの値を渡せる？

ならば商品情報をdataプロパティに持たせよう！

- `new Vue` するときの引数の dataプロパティを書き換える 
index.js の書き換え 
作業タイム 
new Vue({ 
el: '#app', 
data: { 
items: [ 
{title: 'title1', price: 1000, id: 1}, 
{title: 'title9', price: 600, id: 9} 
] 
} 
})

- まずは思い切って、liタグを最初の1つだけにする 
index.html の書き換え(1) 
作業タイム 
<li class="item"> 
</li> 
</ul>

- 今まで配列を v-for ディレクティブの中で配列を宣言していたが、 
そこを data プロパティの中にある items に置き換える 
作業タイム 
<li class="item" v-for="item in items" v-bind:key="item.id"> 
</li>

- タイトルと価格を itemsから取り出した変数 item を利用して表示 
- itemはオブジェクトなのでドットでtitleとpriceを指定 
作業タイム 
<div class="title">{{ item.title }}</div> 
<div class="price">{{ item.price }}円</div> 
</li>

- タイトルと価格が JavaScriptから取得できた 
- html の内容がスッキリした 

ボタンクリックしたら動く仕組みが必要だな

- DOM要素にイベントを配置する際は、v-on ディレクティブを利用 
- clickの場合は、v-on:clickとなる 
- 他にもkeyup, mouseover, blur のような馴染みのイベントも有る 
- その場合、v-on:keyup や v-on:mouseoverとイベント名の 
部分を書き換える必要がある 
イベントの配置のディレクティブ 
<タグ v-on:イベント名="実行する処理" ></タグ> 
ポイント

- ボタンを押したらアラートを出してみる 
- alert ではなく this.window.alert なのは変数スコープが 
通常のHTML上のJavaScriptとは異なるため 
index.html の書き換え 
作業タイム 
<div class="btn_wrap"> 
<button class="more" v-on:click="this.window.alert('ボタン押した')">さらに読み込む</button> 
</div>

- さらに読み込むボタンを押すとアラートが表示される 

次は追加読み込みの関数が必要だな

- メソッドの宣言はVueインスタンス生成時
に渡すObjectの中にmethodsプロパティに
用意 
- methodsはelやdataと同列 
 
- メソッド内でdataプロパティの値にアクセス
する場合はthis.変数名と書く 
Vue.jsでのメソッドの定義 
new Vue({ 
el: '#app', 
data: { 
}, 
methods: { 
関数名(){ 
関数の処理 
}  
} 
}) 
ポイント

... 省略 
{title: 'title9', price: 600} 
] 
}, 
methods: { 
loadItems() { 
alert('ボタン押した in メソッド') 
} 
} 
... 省略 
- 関数名は loadItems 、中の処理は先程のアラートを出すもの 
- methodsの中ではスコープが異なり、今度はthis.windowが不要 
作業タイム

- methodsで定義した関数は、dataプロパティに定義した値と同様に 
テンプレート上で参照できる 
作業タイム 
<button class="more" v-on:click="loadItems">さらに読み込む</button> 
</div>

- 読み込むボタンを押すとアラートが表示される 

methods: { 
loadItems() { 
const items = [ 
{title: 'title13', price: 1100, id: 13} 
] 
this.items.push(...items) 
} 
} 
- ボタンを押したら商品が増えるように関数を書き換えます 
- dataプロパティのitemsにアクセスするには this が必要になります 
作業タイム

- さらに読み込むボタンを押すとアイテムがどんどん追加されます 

おや？itemsへの変更が画面に即時反映されるぞ？

リアクティブデータバインディング 
- Vue.jsは dataプロパティへの変更を自動
検知 
 
- 変更があった場合などはwatcherという監
視人に通知が行われる 
 
- watcherへの通知がトリガーとなり、DOM
の再描画が行う 
引用: https://jp.vuejs.org/v2/guide/reactivity.html
ポイント

毎回ランダムなアイテム名と価格にしたいな

methods: { 
loadItems() {  
this.addItems(5) 
}, 
createItem() {  
return { 
id: Math.random(),  
title: 'title' + Math.round(Math.random() * 100),  
price: Math.round(Math.random() * 100) * 100  
} 
}, 
addItems(count) {  
const newItems = [...Array(count)].map(() => this.createItem()) 
this.items.push(...newItems)  
}, 
} 
作業タイム 
- メソッドの中でメソッドを呼ぶ場合も this が必要になる

- 追加読み込み分がランダムになった 

最初に読み込む部分もランダム生成にできる？？

`created`フック 
- new Vue() が呼ばれたあと、 
データの変更検知の準備が終わった状態で呼び
出される処理を記述 
 
- まだテンプレートに変数などがマウントされる前
に処理が実行される 
 
- 描画する初期データの取得が実行されることが
多い 
ポイント 
new Vue({ 
el: '#app', 
data: { 
}, 
created(){ 
データマウント前の処理 
}, 
... 
})

data: { 
items: [] 
}, 
created () { 
this.addItems(9) 
}, 
作業タイム 
- data プロパティにある items を「空の配列」にしておく 
- createdフックの中で items を初期化 
- 関数の中では this をつけて data と methods の中を参照

- 最初の読み込み分もランダムになった 

並べ替えなら、dataを毎回書き換える感じかな？

もっといい方法があるらしい

- 自動的に値の再計算してくれる機能 
- 内部で利用する値の変更を検知し 
自動で再計算してくれる 
- リアクティブ 
- 関数と似ているが、引数をとれない 
算出プロパティ 
new Vue({ 
el: '#app', 
data: { 
}, 
computed: { 
算出プロパティ名(){ 
return 値 
}  
} 
}) 
ポイント

- sortedItemsという名前で算出プロパティ定義 
- 内容は、itemsを価格の安い順に並べ替えるというもの 
data: { 
items: [] 
}, 
computed: { 
sortedItems(){ 
return this.items.sort((a, b) => a.price - b.price) 
} 
}, 
作業タイム

- 並び順が安い順になるよう、v-for ディレクティブでは  
items ではなく、sortedItems を使うように変更 
作業タイム 
<li class="item" v-for="item in sortedItems" v-bind:key="item.id"> 
</li>

- 価格が安い順になった 

高い順、安い順、読み込み順で切り替えたいな

フォームの値の変更を検知 → computedで並べ替え

- 「入力フォームの値」と「dataプロパティの変数」の紐付けには 
input タグや select タグと v-model ディレクティブを利用 
- フォームの変更に対応し、v-modelで指定した値が書き換わる 
- 値の型については注意が必要 
入力フォームの値と dataプロパティの変数の紐付け 
<input v-model="変数名" ></input> 
 
<select v-model="変数名" ></select> 
ポイント

- フォームと紐付けるための値 order を定義 
data: { 
items: [], 
order: 'normal' 
}, 
作業タイム

- v-model ディレクティブでフォームと値 order を紐付け 
- 値の変更を目視で確認できるようにテンプレート構文で 
orderの内容を表示する 
<div> 
<select class="order" name="order" v-model="order"> 
<option value="normal">読み込み順</option> 
<option value="low">価格が安い順</option> 
<option value="high">価格が高い順</option> 
</select> 
{{ order }} 
</div> 
作業タイム

- selectの切り替えに応じて、normal, low, highと表示が切り替わる 

optionタグも v-for で書き換えられそう

- HTMLタグの属性にコンポーネントのプロパティを埋め込む 
- v-bind:~ のことは v-bind ディレクティブと呼ぶ 
- 固定の値であれば、普通のHTMLのように指定してOK 
HTMLタグの属性の付与 
<タグ v-bind:属性名="コンポーネントのプロパティ" ></タグ> 
 
ex. <タグ v-bind:value="dataプロパティに定義した変数 " ></タグ> 
ポイント

- 並べ替え用のselectのオプションも値として定義 
v-forディレクティブで書き出すようにする 
data: { 
items: [], 
order: 'normal', 
orderOptions: [ 
{ text: '読み込み順', value: 'normal' }, 
{ text: '価格が安い順', value: 'low' }, 
{ text: '価格が高い順', value: 'high' } 
] 
}, 
作業タイム

<div> 
<option v-for="option in orderOptions" v-bind:key="option.value" v-bind:value="option.value"> 
{{ option.text }} 
</option> 
</select> 
{{ order }} 
</div> 
作業タイム 
- v-bind:value で optionタグの value属性を設定 
- v-for で取り出した値は、v-forを適用したタグ上でも利用できる

- 外見上は変わらないが、 
selectの切り替えに応じて、normal, low, high と表示が切り替わる 

orderの値に応じて算出プロパティで並べ替える

- order を参照し並べ替えのロジックを分岐 
- sortは破壊的メソッドなので、[...this.items]で別オブジェクトを生成 
sortedItems() { 
switch (this.order) { 
case 'low': 
return [...this.items].sort((a, b) => a.price - b.price) 
case 'high': 
return [...this.items].sort((a, b) => b.price - a.price) 
default: 
return this.items 
} 
} 
作業タイム

- selectの変更に応じて並べ替えが行われるようになった 
- 追加読込しても並び替えした状態になる 

- 宣言的レンダリングのいいところ 
- Viewの構成の見通しがいい 
- テンプレートにロジックが入りづらい 
まとめ

Vue.jsでコンポーネントシステム

- 宣言的レンダリングはとても便利ですが、 
画面内のいろいろな箇所で利用するとゴチャゴチャする 
- 変数や関数宣言が増えすぎる 
- これってプログラミングの昔からの課題 
- ちゃんと責務に分けて、見通しを良くするために必要なのが 
Component System(コンポーネントシステム)

さっきまで作った一覧っぽいページなら

さっきまで作った一覧っぽいページなら 
商品一覧
商品詳細
追加読み込み

コンポーネントシステムのイメージ 
<div id="app"> 
<order-select></order-select>  
<item-list></item-list>  
<show-more-button></show-more-button>  
</div>
商品一覧
追加読み込み

少しずつ「一覧」をコンポーネント化してみよう

- コンポーネントの定義 
- 定義したコンポーネントを使う旨の宣言 
- コンポーネントをテンプレート上で使う 
コンポーネント化と利用のステップ

- 最低限templateプロパティに描画したいhtmlの記述があればOK 
- dataプロパティは「オブジェクトを返す関数」でなければならない 
コンポーネント定義 (Object型の変数) の用意 
ポイント 
{ 
template: `コンポーネントが描画するHTML(テンプレート)`, 
data(){ 
return {} 
} 
}

const ItemList = { 
template: `<div>{{message}}</div>`, 
data(){ 
return { 
message: "ここがコンポーネント" 
} 
} 
} 
以下の内容で item_list.js を index.js と同じ階層に作る 
作業タイム

親コンポーネントで、子コンポーネントに名前を付け、使えるようにする 
- Vueインスタンス生成時の引数にcomponentsプロパティを定義 
- componentsプロパティは Object型の値 
- プロパティ名：「テンプレートで利用するタグ名」 
- 値：先程作った「コンポーネント定義」 
ポイント 
components: { 
テンプレート上でのタグ名: コンポーネント定義 
},

index.js を書き換える 
作業タイム 
data: { 
items: [], 
order: 'normal', 
orderOptions: [ 
] 
}, 
components: { 
'item-list': ItemList 
}, 
- dataプロパティの後ろに、componentsプロパティを定義 
- Object中のプロパティは item-list という名前に対して、ItemList を定義

</div> 
<item-list></item-list> 
<li class="item" v-for="item in sortedItems" v-bind:key="item.id"> 
</li> 
</ul> 
index.html を書き換える(1) 
作業タイム 
- 既存の <ul> タグの上に <item-list>というタグを用意

- item-list コンポーネントが表示できている 

ここまでの作業内容のまとめ 
- ItemList 変数にコンポーネントの定義をつくる 
- Vue インスタンスを作る時に、 
<item-list> タグを使えるように、先程の ItemList を渡す 
- index.html 上で <item-list>タグを記述 
- index.html 上で、item_list.jsを読み込む

- タグ名の定義はケバブケース 
- 例）my-component-name 
- 理由）HTML の属性名は大文字小文字を区別しないから 
- タグ名は2単語以上で構成することが推奨される 
コンポーネント定義の注意点

コンポーネントの内容が固定ならここまでの方法でOK

でも、今のままじゃ一覧の機能としてはデグレ 
- 初回表示時に一覧が動的に描画されない 
- 追加読み込みが動かない 
- ソートが効かない

これからやること 
- 初回表示時に一覧が動的に描画させる 
- 追加読み込みが動くようにする 
- ソートを有効にする

商品情報は index.js、item_list.js どっちに持つ？

- コンポーネント内でのみ完結 
- コンポーネント内の data プロパティで保持 
- 初回読み込み時に生成 or ajax で読み込むだけ 
- 値が定数で変更されない 
 
- コンポーネント外から影響を受ける 
- 影響範囲が最小となる親コンポーネントのdata プロパティで保持 
- 後述の方法で親コンポーネントから値を受け取る 
コンポーネントで利用する変数の所在 
ポイント

- 商品情報には以下のような制約がある 
- 追加読み込みの際に値が更新される必要がある 
- 並び替えの際に、order 変数を参照する必要がある 
- つまり 
- 商品情報は item-list コンポーネント内で完結しない 
- よって 
- 商品情報は item_list.js ではなく index.js で管理する 
商品情報はどこにあるべき？

- 親コンポーネントから子コンポーネントに渡す値を Prop と呼ぶ 
- テンプレート上で v-bindディレクティブを利用し、 
Prop として「変数や式」を渡す 
<コンポーネント v-bind:Prop名="変数名や式"></コンポーネント> 
子コンポーネントへの値の渡し方 
ポイント

<div> 
<option v-for="option in orderOptions" v-bind:value="option.value" v-bind:key="option.value"> 
</option> 
</select> 
{{ order }} 
</div> 
 
<item-list v-bind:items="sortedItems"></item-list> 
index.html を書き換える 
作業タイム 
- 既存の商品一覧の ul タグを削除する 
- item-list コンポーネントに items という名前でsotedItems を渡す

- 親コンポーネントから子コンポーネントが受け取る値を Prop と呼ぶ 
- 子コンポーネントの定義ではtemplateプロパティなどと並列に、 
propsプロパティを用意する 
- 「受け取るProp名」と「受け取るPropのデータ型」のペアを与える 
親コンポーネントからの値の受け取り方 
props: { 
受け取るProp名: 受け取るPropのデータ型 
} 
ポイント

...(省略)... 
}, 
data(){ 
return { 
} 
}, 
props: { 
items: Array 
} 
- dataプロパティは空のObjectを返させる 
- props プロパティで「items Prop」を受け取る 
item_list.js を書き換える(1) 
作業タイム

template: ` 
</li> 
</ul> 
`, 
...(省略)... 
- templateプロパティの内容を、index.htmlのulタグに置き換える 
- v-for ディレクティブで扱う値が items になっている点に注意 
作業タイム

- 要素が動的にだせるようになった 
- 追加読み込みも、ソートもできるようになってる 

v-bind:component-prop="items" 
 
props: { 
componenProp: String 
} 
- v-bindディレクティブで渡す時の Prop名は「ハイフンつなぎ」 
- propsプロパティで受け取る時の Prop名は「キャメルケース」 
Prop 名の注意点 
ポイント

他の要素もコンポーネント化してみよう 
追加読み込み

これからやること 
- 追加読み込みコンポーネントを作る 
- （絞り込みメニューコンポーネントは尺の都合で省略）

show_more_button.js を index.js と同じ階層に作る 
const ShowMoreButton = { 
template: ` 
<button class="more" v-on:click="onClick">さらに読み込む(c)</button> 
</div> 
`, 
methods: { 
onClick() { 
} 
} 
} 
作業タイム 
- onClick メソッドは後で実装する

作業タイム 
- 用意した ShowMoreButton をテンプレート上で  
<show-more-button> タグで、利用できるようにする 
data: { 
order: 'normal', 
orderOptions: [ 
] 
}, 
components: { 
'items-component': ItemList, 
'show-more-button': ShowMoreButton 
}

</div> 
<items-component ref="items" v-bind:component-order="order"></items-component> 
<show-more-button></show-more-button> 
</div> 
<script src="./show_more_button.js"></script> 
作業タイム 
- 既存の <div class="btn_wrap"> を <show-more-button> 
に置き換える 
- show_more_button.js を index.js の前に読み込むようにする

- 無事コンポーネント化できたら、 
ラベルが「さらに読み込む(c)」となっている 

コンポーネント間の指示ってどうするんだ？

- メソッドなどでイベントを発行することで、 
親コンポーネントでイベントを取得することができる 
カスタムイベントの発行 
ポイント 
this.$emit(カスタムイベント名)

show_more_button.js を書き換える 
const ShowMoreButton = { 
template: ` 
<button class="more" v-on:click="onClick">さらに読み込む(c)</button> 
</div> 
`, 
methods: { 
onClick(){ 
this.$emit('click') 
} 
} 
} 
作業タイム 
- onClick メソッドで click イベントを発行する

- カスタムイベントを発行する子コンポーネントのタグには、 
v-onディレクティブで親コンポーネントが実行するメソッドを指定可能 
親コンポーネントでのイベントの取得 
ポイント 
<タグ v-on:カスタムイベント名="実行するメソッド名"></タグ>

- click イベントを発行する show-more-button に 
v-onディレクティブでイベント発行時に実行するメソッド名を指定 
作業タイム 
</div> 
<items-component ref="items" v-bind:component-order="order"></items-component> 
<show-more-button v-on:click="loadItems"></show-more-button> 
</div> 
<script src="./show_more_button.js"></script> 
<script src="./index.js"></script>

- さらに読み込むボタンで追加読み込みができたらOK 

- コンポーネントのポイント 
- 今回はやらなかったが、 
コンポーネントをページごとに使い回せる 
 
- ただし、上手にコンポーネントを分けないと 
不要なイベントの発行などが増えて読みづらくなる 
Vue.jsのコンポーネントまとめ

- Vue.js での開発を高速に行うためのシステム 
- 様々な既存のエコシステムを 
- 最近は Vue.js をフル活用した開発で、主に使って行われる(はず) 
- 手軽に Vue CLI の機能の一部を体験できる資料はこちら 
- https://docs.google.com/presentation/d/1TkUZ9xYM8-9qvDmEeePcRE_DO1kZuxlPzg
Lr8_eceAo/edit?usp=sharing  
Vue CLIとは?

- 時間の関係でこちらに置き換えたものをおいています 
- https://github.com/take2webservice/ItemList 
- 帰宅後に今日ご自身で書いたソースコードと見比べてみてください 
一覧画面をVue CLI用に置き換えるとどうなるか

- Vue.js のミニマムな使い方を足早に行いました 
- 今回のワークショップはVue.js の「触り」の部分になります 
- ぜひ家に帰ってからも手を動かしてみてください 
Vueワークショップまとめ

書籍の紹介(1) 
- https://www.amazon.co.jp/dp/4863542453/ 
- Vue.js の基本的な話が載っている

書籍の紹介(2) 
- https://www.amazon.co.jp/dp/B07TB87P7M 
- コンポーネントの分け方に関するいい本

ひきつづき
フロントエンドカンファレンスを
お楽しみください
おわり

商品がない場合にメッセージを出したい

- v-if ディレクティブをつけた、タグ自体の表示の出し分け 
- 値がfalseの場合の処理を書きたい場合、続くタグに v-elseタグをつける 
- falseの処理が不要なら省略可 
表示の出し分けをする方法 
ポイント 
<タグ v-if="真偽値を返す値">trueの場合に表示</タグ> 
<タグ v-else>falseの場合に表示</タグ>

作業タイム 
- itemsに商品があるかを判断する算出プロパティhasItem を用意 
props: { 
items: Array 
}, 
computed: { 
hasItem() { 
return this.items.length > 0 
} 
},

- template プロパティを書き換え、 
v-if ディレクティブとv-else ディレクティブで出し分ける 
作業タイム 
template: ` 
<ul class="items" v-if="hasItem"> 
</li> 
</ul> 
<div v-else>商品がありません</div> 
`,

- crated フックでの初期処理を削除し、 
最初の表示時に商品がない状態にする 
作業タイム 
created () { 
},

- 最初には「商品がありません」と表示されればOK 

- 「さらに読み込む」ボタンをおして、 
「商品がありません」が消え、一覧が表示されればOK 

v-if に似たディレクティブで v-show ディレクティブがある 
- v-if 
- false の場合DOM上からタグを消す 
- v-show 
- false の場合DOM上には残る 
- スタイルでdisplay:none; を付与し見た目から消す 
v-if と v-show 
ポイント

最初に一瞬表示されるテンプレート構文は嫌だな

- v-cloak ディレクティブ 
- Vue インスタンスのコンパイルが終了するまでの間残存し、 
コンパイルが終わるとDOM上から消える 
- CSS と組み合わせて、Vue インスタンスのコンパイルが終わるまで 
表示を隠せる 
初期表示を隠すテクニック 
<タグ v-cloak></タグ> 
ポイント

作業タイム 
<body> 
<div id="app"> 
<div> 
<select class="order" name="order" v-model="order" v-cloak> 
<option v-for=" option in orderOptions" v-bind:key="option.value"
v-bind:value="option.value"> 
</option> 
</select> 
</div> 
- v-cloakディレクティブを 
「テンプレート構文の表示を隠したい要素」に付与する

- v-cloak 属性があるタグを表示しないスタイルを追記する 
index.css を書き換える 
作業タイム 
.order { 
font-size: 1.3em; 
} 
 
[v-cloak] { 
display: none; 
}

- 最初に一瞬、{{ option.text }} が表示しなくなればOK 

ひきつづき
フロントエンドカンファレンスを
お楽しみください
今度こそおわり

初めてのvue.js(2.x系)

More Related Content

What's hot

Similar to 初めてのvue.js(2.x系)

More from 健人 井関

Recently uploaded

初めてのvue.js(2.x系)

More from 健人井関