Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

お手軽データバインディングライブラリ「Vue.js」を使いこなそう(コンポーネント編)

LINEフロントエンドレンジャーのWeb開発術 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/04/10 14:00

 本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。今回は連載第4弾として、第1弾で紹介したJavaScriptのデータバインディング(MVVM)ライブラリである「Vue.js」のコンポーネントに関するトピックを紹介します。

目次

はじめに

 連載第1回目記事『お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編)』ではVue.jsの基本について解説しました。今回はVue.jsを使用して再利用可能なモジュールを作るための技術要素、カスタムフィルターカスタムディレクティブコンポーネントについて紹介します(本稿の執筆時点のVue.jsのバージョンはv0.11.5です)。

 Vue.jsはVM(ViewModel)インスタンスを定義することにより、View-Model間の双方向データバインディングを容易に実現する機能を提供するライブラリです。シンプルな機能で学習コストが少ないという特徴もあり、お手軽にアプリケーション開発を進めることができます。しかし、次第にアプリケーションの機能要件が多くなってくると、VMインスタンスの定義だけでは$elや$dataの内容が肥大化して煩雑になってしまう場合もあります。

 そこで、Vue.jsが提供しているカスタムフィルター、カスタムディレクティブ、コンポーネントを活用するとモジュールの再利用性を高めることができるため、アプリケーション全体を効率的に構築することができます。モジュールの再利用のための要素はそれぞれ以下のような特徴があります。

表1. Vue.jsにおけるモジュール再利用のための仕組み
項目 説明
カスタムフィルター 表示のためのデータに対してカスタマイズした特定の処理を挟むことができる仕組み。
カスタムディレクティブ データの変更に応じたDOMの処理をカスタマイズしたディレクティブとして提供できる仕組み。
コンポーネント データの定義とDOMの構築などを含めた部品を作成することができる仕組み。親子コンポーネント間でデータのやりとりなども可能。

 本稿では、上記で挙げている再利用可能なモジュールを作るための3つの手法についてそれぞれの用途説明やサンプルコードを交えて、公式ドキュメントの内容を元に解説します。

カスタムフィルター

 Vue.jsにおけるフィルターは渡した値に対して特定の処理を挟むことができる仕組みです。詳しくは前回の記事を参照してください。例えば、文字列を大文字にする”uppercase”などがビルトインのフィルターとして用意されています。

リスト1. フィルターの例
<!-- messageの値を大文字にして表示する -->
<span>{{message | uppercase}}</span>

 カスタムフィルターはこのフィルターを自作できる仕組みで、特定の用途に応じて受け取った値を書き換えて表示したい時に便利です。

 カスタマイズしたフィルターを作成するにはVue.filter(id, func)を使います。第1引数はHTMLで該当のフィルターを呼び出す際の識別子、第2引数は受け取った値や引数を処理するためのfunctionです。そのfunctionの中でreturnした値が変換後の値として扱われます。

 以下にreverseという名前のフィルターを登録する例を示します。カスタムフィルターの呼び出し方法はビルトインのフィルターと同じです。

リスト2-1. 文字列を逆順に表示するカスタムフィルター(JavaScript)
Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('');
});
リスト2-2. 文字列を逆順に表示するカスタムフィルター(HTML)
<!-- messageの値が'abc'の時 => 'cba' -->
<span v-text="message | reverse"></span>

 カスタムフィルターで変換前のデータであるvalue以外にもパラメーターを引数として渡すことができます。以下の例は引数を2つ受け取って、それぞれ指定された文字の前後に追加する処理を行うwrapというカスタムフィルターを登録しています。

リスト3-1. 文字列の前後に引数で受け取った値を追加するカスタムフィルター(JavaScript)
Vue.filter('wrap', function (value, begin, end) {
    return begin + value + end
})
リスト3-2. 文字列の前後に引数で受け取った値を追加するカスタムフィルター(HTML)
<!-- messageの値が'hello'の時 => 'before hello after' -->
<span v-text="message | wrap before after"></span>

 カスタムフィルター内でのthisは呼び出し元のVMインスタンス自身を表します。例えば、以下の例のようにVMインスタンスのフィルターの引数として渡されるuserInputというプロパティ名にthisからアクセスすることができます。

リスト4. カスタムフィルターでの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の値が動的に「メッセージ」というラベルの後ろに追加されます。

図1. カスタムフィルターの実行例
図1. カスタムフィルターの実行例

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5