monga3日記

Java＋SpringでWebシステムの構築をやっていきます。

『Vue.js入門』輪読会 #4

輪読会 資料

gihyo.jp

5. Vue.jsの高度な機能

５章の内容

UXやコードの保守性。再利用性を高める際に用いる機能の説明。

必須ではないが、クオリティを高めるには覚えておきたい機能。

 

目次

 

5.1 トランジションアニメーション

Vue.jsは要素の表示・非表示をトリガーにして、CSS3、Web AnimationAPIと連携してトランジションアニメーションを容易に実装することができる。


5.1.1 transitionラッパーコンポーネント

<transition>タグで囲んでいるコンポーネント、要素の表示状態によって、アニメーションに関する処理を行うコンポーネント。

コンポーネント、要素が出入り（enter/leave）する際にトランジションを追加します。

 

出入りが起きるタイミング

  • v-ifの条件が変わった時
  • v-showの条件が変わった時
  • 動的コンポーネントのis属性値が変わった時

5.1.2 トランジションクラス

開始と終了の状態、開始の状態から終了の状態へどのように遷移するかを定義するためのクラス。

  1. v-enter: enter の初期状態。
  2. v-enter-to:  enter の終了状態。
  3. v-enter-active: enter の初期状態から終了状態。
  4. v-leave: leave の初期状態。
  5. v-leave-to:  leave の終了状態。
  6. v-leave-active: leave の初期状態から終了状態。

5.1.3 fadeトランジションの実装

フェードイン、フェードアウトの確認

以下のURLで「表示の切り替え」をクリックした時の動きを確認。

https://jsfiddle.net/vwsx7e80/

 

ブレークポイントを設定して、Elementsタブでトランジションアニメーションを行う要素の確認をしてみよう。

  1. v-enterの追加
  2. v-enter-activeの追加
  3. v-enterの削除、v-enter-toの追加（アニメーションの開始）
  4. （アニメーションの終了）
  5. v-enter-toの削除、v-enter-activeの削除
Column Vue Routerのトランジション

Vue Routerでも<router-view>タグを使用してトランジションが使える。


Column カスタムトランジションクラス

外部ライブラリを使用する場合は、そのライブラリが定義するクラス名に変更する必要がある。

Animate.cssを使用する場合の例「enter-class ⇒leave-class」

以下のURL先で動作を確認。

https://jsfiddle.net/kitak/t29ag6hf/

fadeInUp
slideOutRight

 

5.1.4 JavaScriptフック

要素の大きさや画面上での位置、コンポーネントの状態などの動的な値を用いる場合はJavascriptを使う必要がある。

transitionコンポーネントにはJavaScriptによる処理をアニメーションの過程でフックできる機能がある。

フック・・・ひっかけるようなイメージ

 

メニューのアニメーションで動作の確認

https://jsfiddle.net/kitak/r84y9c1v/

 


5.2 スロット

テンプレートタグ内の文字列をslotタグへ入れ替えること。
親側のコンポーネントから子のコンポーネントに『テンプレートの一部を差し込む機能』の事。テンプレートをカスタマイズしたい時に利用する。

 

5.2.1 単一スロット

templateの中にある<slot>タグで囲った中が、コンテンツを差し込まれる場所となっている。
コンテンツが指定されていない場合は、slotタグで指定した値がデフォルトとのコンテンツとなる。


5.2.2 名前付きスロット

slotのname属性で、名前を指定できる。
これにより名前で指定した箇所にスロットを挿入することが可能。
単一スロット（名前なしスロット）は1箇所にしかコンテンツを渡せなかったのに対して、名前付きスロットは複数箇所にコンテンツを挿入できる。


5.2.3 スロットのスコープ

親のコンポーネントで行われるデータバインディングはスロットとして挿入されるコンテンツであっても、
親のコンポーネントのスコープが適用される。


5.3 カスタムディレクティブ

開発者のニーズに合わせて作成できるディレクティブ

 

グローバルディレクティブ
　アプリケーション全体、任意の要素で使用できる

ローカルディレクティブ
　ローカルディレクティブを登録したテンプレート内でのみ使用できる

Column コンポーネントやミックスインとの違い

ミックスイン、コンポーネント、カスタムディレクティブはコードの再利用を促すという
共通点はあるが、再利用をどのような観点で行うかという点に違いがある。


5.3.1 作成するカスタムディレクティブの定義
カスタムディレクティブの登録方法
Vue.directive('focus', {
  // ひも付いている要素が DOM に挿入される時...
  inserted: function (el) {
    // 要素にフォーカスを当てる
    el.focus()
  }

カスタムディレクティブの利用方法

<div v-focus></div>

 

 


5.3.2 ディレクティブ定義オブジェクト

カスタムディレクティブがDOM要素に紐づいたタイミングでフックして、

実行する関数の事。

 
5.3.3 フック関数の引数

ディレクティブ定義オブジェクトのオプションに渡す関数をフック関数と呼ぶ。

 

引数名 内容
el ディレクティブに紐づく要素、DOM操作に利用
binding バインドされた値、引数、オブジェクト

bindingのプロパティでよく使われるもの

  • name
  • value
  • expression
  • arg
  • modifiers

5.3.4 image-fallbackディレクティブの機能追加

Column DOM操作を行うライブラリをラップする

DOM要素を扱う処理をカスタムディレクティブに委譲して、

コンポーネントでは直接DOM要素は扱わないようにする。


5.4 描画関数

templateオプションの代わりに、renderオプションで描画関数を指定できる。
基本的にはテンプレートを利用するべきだが、場合により描画関数を直接定義した方が良い時（記述が簡潔になる）がある。


5.4.1 描画関数を用いないと書きづらい例

描画関数を用いないと難しい例の問題点
１コンポーネントの出しわけの条件式が読みづらい
２テンプレートに同じ記述が並んでいて冗長
３ボタンとして表現する要素の種類が固定になっていて、他の要素(input等)を追加する場合は、テンプレートに追加していく必要がある


5.4.2 描画関数による効率化

テンプレートを用いずに、renderオプションと描画関数で同じ振る舞いを実現できる。
柔軟性が高いので、プログラムの力に頼り、描画関数に複雑なロジックを書いてしまうことになることもあるので、
使用する際は注意する。

テンプレートは静的で描画関数は動的のイメージ


5.4.3 createElement関数

createElementの第一引数には要素の要素名（タグ）、第二引数にはオブジェクトで要素の属性指定のためのデータオブジェクトを渡します。
第三引数には子ノードを文字列か配列で指定する。

 

第一引数は必須で、第二、第三引数はオプション。

 

公式のドキュメント

createElement 引数 — Vue.js

データオブジェクト詳解 — Vue.js

Column h関数

 createElementをhにエイリアスしている。

JSXの仕様に由来している。

Column JSX

Reactで採用されていて、JavaScript内にHTMLを書けるようなもの。
JSXで描画関数を記述することで、プログラムによる柔軟さとマークアップによる宣言的な記述の両方の良いところを取り入れることが出来る。

 

5.5 ミックスイン

汎用的な機能を取り出して、共通処理にすること。

ライブラリの様に取り込んで利用することが可能な部品にするイメージ。


5.5.1 ミックスインで機能を再利用する

ミックスインの機能をコンポーネントに追加するにはコンポーネントオプションのmixinsプロパティの配列の要素として、オブジェクトに渡す。
ミックスインとコンポーネントで同じプロパティが存在している場合はコンポーネントのオプションが優先されるので、注意する。


5.5.2 グローバルミックスイン

アプリケーション全体に適用できるミックスインのこと
一度、グローバルにミックスインを適用すると、それはその後に作成する全ての Vue インスタンスに影響するので注意！

 １つのミックスインに機能を詰め込みすぎない。
ミックスインにつける名前はどのような機能がコンポーネントに取り込まれるかわかりやすい名前にする。
「動詞＋able」、「～出来るようになる」という名前にする。