はじめに
連載第1回目記事『お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編）』ではVue.jsの基本について解説しました。今回はVue.jsを使用して再利用可能なモジュールを作るための技術要素、カスタムフィルター、カスタムディレクティブ、コンポーネントについて紹介します（本稿の執筆時点のVue.jsのバージョンはv0.11.5です）。
Vue.jsはVM（ViewModel）インスタンスを定義することにより、View-Model間の双方向データバインディングを容易に実現する機能を提供するライブラリです。シンプルな機能で学習コストが少ないという特徴もあり、お手軽にアプリケーション開発を進めることができます。しかし、次第にアプリケーションの機能要件が多くなってくると、VMインスタンスの定義だけでは$elや$dataの内容が肥大化して煩雑になってしまう場合もあります。
そこで、Vue.jsが提供しているカスタムフィルター、カスタムディレクティブ、コンポーネントを活用するとモジュールの再利用性を高めることができるため、アプリケーション全体を効率的に構築することができます。モジュールの再利用のための要素はそれぞれ以下のような特徴があります。
| 項目 | 説明 |
|---|---|
| カスタムフィルター | 表示のためのデータに対してカスタマイズした特定の処理を挟むことができる仕組み。 |
| カスタムディレクティブ | データの変更に応じたDOMの処理をカスタマイズしたディレクティブとして提供できる仕組み。 |
| コンポーネント | データの定義とDOMの構築などを含めた部品を作成することができる仕組み。親子コンポーネント間でデータのやりとりなども可能。 |
本稿では、上記で挙げている再利用可能なモジュールを作るための3つの手法についてそれぞれの用途説明やサンプルコードを交えて、公式ドキュメントの内容を元に解説します。
カスタムフィルター
Vue.jsにおけるフィルターは渡した値に対して特定の処理を挟むことができる仕組みです。詳しくは前回の記事を参照してください。例えば、文字列を大文字にする”uppercase”などがビルトインのフィルターとして用意されています。
<!-- messageの値を大文字にして表示する -->
<span>{{message | uppercase}}</span>
カスタムフィルターはこのフィルターを自作できる仕組みで、特定の用途に応じて受け取った値を書き換えて表示したい時に便利です。
カスタマイズしたフィルターを作成するにはVue.filter(id, func)を使います。第1引数はHTMLで該当のフィルターを呼び出す際の識別子、第2引数は受け取った値や引数を処理するためのfunctionです。そのfunctionの中でreturnした値が変換後の値として扱われます。
以下にreverseという名前のフィルターを登録する例を示します。カスタムフィルターの呼び出し方法はビルトインのフィルターと同じです。
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('');
});
<!-- messageの値が'abc'の時 => 'cba' --> <span v-text="message | reverse"></span>
カスタムフィルターで変換前のデータであるvalue以外にもパラメーターを引数として渡すことができます。以下の例は引数を2つ受け取って、それぞれ指定された文字の前後に追加する処理を行うwrapというカスタムフィルターを登録しています。
Vue.filter('wrap', function (value, begin, end) {
return begin + value + end
})
<!-- messageの値が'hello'の時 => 'before hello after' --> <span v-text="message | wrap before after"></span>
カスタムフィルター内でのthisは呼び出し元のVMインスタンス自身を表します。例えば、以下の例のようにVMインスタンスのフィルターの引数として渡されるuserInputというプロパティ名にthisからアクセスすることができます。
<div id="app">
<input v-model="userInput">
<!-- userInputという文字列をkeyとして渡す -->
<span>{{msg | concat userInput}}</span>
</div>
<script>
Vue.filter('concat', function (value, key) {
// thisは呼び出し元のVMインスタンスになりmsgの後ろにuserInputの値が追加される
return value + this[key];
});
var vm = new Vue({
el: '#app',
data: {
userInput: '',
msg: 'メッセージ'
}
});
</script>
実行して何かキーワードを入力すると、userInputの値が動的に「メッセージ」というラベルの後ろに追加されます。
