はじめに
こんにちは。
Kojirockの1人アドベントカレンダー Advent Calendar 2018の2日目の記事です。
以下の本を読んで勉強できたことを記載していきます。
今回は第2章です。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
2章 Vue.jsの基本
目次
2.1 Vue.jsでUIを構築する際の考え方
2.2 Vue.jsの導入
2.3 Vueオブジェクト
2.4 Vueインスタンスのマウント
2.5 UIのデータ定義(data)
2.6 テンプレート構文
2.7 フィルタ(filters)
2.8 算出プロパティ(computed)
2.9 ディレクティブ
2.10 ライフサイクルフック
2.11 メソッド(methods)
2.1 Vue.jsでUIを構築する際の考え方
ここでは、旧来のjQueryによるUI構築と、Vue.jsでのUI構築の差が述べられていました。
実際、イベントや要素が少ない場面では、jQueryとVue.jsに大きな差は生まれないのですが、複数のイベントによる複雑な要素変更があるページでは、jQueryによる構築だと辛い場面が出てきます。
こちらの要素は非表示にして、こちらの要素は表示して、こちらの要素はこのinputフォームをdisabledにして...と多種多様な要素の変更があった場合、各イベントリスナーからそれらの要素の変更を追加・削除などをしていく必要があります。
簡単にメンテナンス性が失われてしまうようになります。
実際昔から動いているjQuery中心のwebアプリケーションとかまさに↑の状態なんじゃないでしょうか。
「ここのイベントいらなそうだけど、、、でも消したら要素変わっちゃいそう。。。」
とかおっかなびっくり触りつつみたいなことも経験あると思います(自分はありました)
Vue.jsによるUI構築は、イベントと要素の間に「状態」が挟まる形になるということです。
前述したとおり、要素数やイベント数が少ない場合は恩恵が感じられないかもしれないですが、多くなってきたときに効果が実感できるということです。
実際のコードなどはこのあと出てくると思いますが、現段階での自分の認識では、jQueryでの運用は、各イベントと要素が密接につながっているため、どちらも切り離せず各々を考慮しながら開発しなければいけないが、Vue.jsでの運用は、「状態」が間に挟まることにより、各イベント(アクション)と、要素の各変更を分けて考えることができるというところにとどめておきます。
2.2 Vue.jsの導入
このブロックからは実際にコードを打ちつつ進めていく形になります
一番簡単な導入方法としてscriptタグで読み込む手法が紹介されています。
以下がその例です。
<script src="https://unpkg.com/vue@2.5.17"></script>
jsFiddleでやったのはこちら。
上記の例はあくまでテストとして、紹介されています。
以下のようなscriptタグでの読み込みは、SPAのような複雑なwebアプリケーションを構築する場合では使われず、今回のような学習用や、一部のページのみに適用したい場合に使用されるようです。
実際にサイト全体に適用する場合は、前回の記事でも紹介した Vue CLIなどを使用して周辺ツールを一緒にインストールしたほうが懸命です。
2.3 Vueオブジェクト
前述したscripttタグでの読み込みで、グローバル変数Vueが使用可能になります。
実際に使用する際は、以下のような形になります。
var vm = new Vue({ })
コンストラクタの引数には、オブジェクトとしていろいろな設定値を渡します。
本書で紹介されているものは、主要なものとして以下を紹介してくれています。
オプション名 | 内容 |
---|---|
data | UIの状態・データ |
el | Vueインスタンスをマウントする要素 |
filters | データを文字列と整形する |
methods | イベントが発生したときなどの振る舞い |
computed | データから派生して算出される値 |
その他にも様々なオプションがあるようなので、公式の情報を載せておきます。
2.4 Vueインスタンスのマウント
マウントの説明として本書では以下のように説明されています。
マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えることです。
マウント自体は、前述のオプションオブジェクトで指定することもできるし、あとから指定することも可能とのことです。
- 先に指定する場合
- あとから指定する場合
この2つの使い分けとしては、マウント対象の要素が非同期通信などであとから追加される場合に、あとから追加する方法をとるようです。
2.5 UIのデータ定義(data)
UIの「状態」となるデータのオブジェクトを指定します。
dataプロパティの値が変更されるたびにVue.jsがそれを自動で検知して表示を切り替えるようになります。
例でもよく使われている一方向バインディングでそれはわかるかなと思います。
<div id="app"> <p> {{ message }} </p> </div> <script> new Vue({ el: '#app', data: { message: 'こんにちは' ←ここの値を変えれば表示も変わる } }) </script>
dataはあくまでデータそのものを置いて、関数などはmethodsやcomputedの仕事として分離すべきということのようです。
次に本書では、consoleでのVueインスタンスの状態確認方法が記載されています。
Chrome DevToolでの確認方法なので、このあたりは流し読みしました。
またVue.jsはデータの代入と参照はデータバインディングのため監視を行っています。
なので、console上でdataを修正するとデータが変わり、表示が変わります。
自分が書いた以前の記事でも試しています。
2.6 テンプレート構文
今までも使用してきた {{ }}
を使ったものや、後述するその他の機能を総じてテンプレート構文と呼ぶようです。
Vue.jsのテンプレート構文で重要なのは次の2つとなります。
- Mustache記法によるデータの展開
- ディレクティブによるHTML要素の拡張
ディレクティブについては、後述されるようなので、このブロックではMustache記法によるデータ展開について中心に書かれています。
テキストへの展開
今まで使用してきた {{ }}
のことを指しています。
属性値の展開
自分が書いた以前の記事の属性をバインディングするという項目が該当します。
↑で紹介している方法以外にも本書では、以下のように便利に使える方法も紹介されています。
<script src="https://unpkg.com/vue@2.5.17"></script> <button id="b-button" v-bind:disabled=!canBuy">購入</button> <script> const vm = new Vue({ el: '#b-button', data: { canBuy: false } }) </script>
単にテキストとして出す以外にも、disabledなどの条件としても扱えるようになるという感じです。 こちらの例は汎用性の高い使用方法だなと思いました。
javascript式も展開できるようですが、おすすめはされていませんでした。
複雑になるということもあるし、その仕事を行うのはmethodsやcomputedになるからだと思いました。
2.7 フィルタ(filters)
実際に保持しているdataとページに表示したいテキストは違う場合があると思います。
例えば電話番号をdataで保存していて、表示する場合は-(ハイフン)をつけて表示したいときなどです。
そういったときにこのfilterが使用されます。
以下は本書で紹介されているfilterのメソッドを少し改良しました。
<script src="https://unpkg.com/vue@2.5.17"></script> <div id="app"> <label>電話番号</label> <span>{{ tel|telDelimiter }}</span> </div> <script> new Vue({ el: '#app', data: { tel: '09012345678' }, filters: { telDelimiter: function(value) { return value.replace(/(\d)(?=(\d{4})+$)/g, '$1-') } } }) </script> => 電話番号 090-1234-5678
フィルタは複数セットすることが出来ます。 {{ value | filter1 | filter2 }}
といった感じです。
表示するデータが何らかの金額だとすると、金額フォーマット(3桁区切りにカンマ)にしたあと、最終的に¥
をつけるとかですかね?
2.8 算出プロパティ(computed)
今までも何回か登場していた算出プロパティです。
こちらは以前の自分の記事でも紹介しています。
内容的にもそこまで難しいものではないです。
2.9 ディレクティブ
テンプレート構文のところで紹介されたディレクティブです。
こちらも以前の自分の記事でほぼほぼ、紹介していました。
2.10 ライフサイクルフック
reactでもあったのですが、vueでも各タイミングで処理を差し込めるフック機能があるようです。
本書で紹介されていたタイミングとフック名の表を記載しておきます。
フックの名前 | フックが呼ばれるタイミング |
---|---|
beforeCreate | インスタンスが生成され、データが初期化される前 |
created | インスタンスが生成され、データが初期化された後 |
beforeMount | インスタンスがDOM要素にマウントされる前 |
mounted | インスタンスがDOM要素にマウントされた後 |
beforeUpdate | データが変更され、DOMに適用される前 |
updated | データが変更され、DOMに適用された後 |
beforeDestory | Vueインスタンスが破棄される前 |
destroyed | Vueインスタンスが破棄された後 |
2.11 メソッド(methods)
メソッドは一番わかりやすく、インスタンスにmethodを追加できます。
よくあるajax等によるサーバとの通信などで使用するのが一般的のようです。
ここでも、特に、難しいところはありませんでした。
一点算出プロパティとメソッドどちらも同じような使い方できるんじゃないの?と思ったりしたところがあったのですが、以前自分の記事でも書いていました。
算出プロパティは依存しているデータが変更されない限りは、結果をキャッシュしてくれるようです。
終わりに
今回は以前自分がやったことのある内容がほぼでした。
次章から少し複雑なものになっていくようです。
がんばるぞー!