«
»

Vue.jsで簡単ページング実装

2015 年 7 月 21 日 by unod

SPA(=Single Page Application)の構築などに必要不可欠なJavaScriptのフレームワークですが、
今回は、その中でも後発でシンプルな作りの「Vue.js」を触ってみたので、ご紹介します。

■Vue.jsでできること

Vue.jsはHTML表示要素とJavaScriptのデータを紐付ける、双方向バインディングを行うライブラリです。

以下はVue.js公式サイトトップ(http://jp.vuejs.org/)に掲載されている「10秒でわかる例」です。

【HTML】

<div id="demo">
 <p>{{message}}</p>
 <input v-model="message">
</div>

【JavaScript】

var demo = new Vue({
 el: '#demo',
 data: {
  message: 'Hello Vue.js!'
 }
})

表示(HTML入力フォーム値)が変更されたら自動的にJavaScriptのデータに反映されます。

そして、データが変更されたら自動的に表示が変わります。

まずはVue.jsがどういったものか、お分かり頂けたでしょうか。

■ページングを実装してみる

Vue.jsの「データが変更されたら自動的に表示が変わる」機能を利用して、ページングの実装をしてみます。

Ajaxでデータを取得して記事一覧に反映させる場合のソースは以下になります。

【HTML】

<div id="target">
 <h1>記事一覧</h1>
 <dl v-repeat="article : articles">
  <dt v-text="article.title"></dt>
  <dd v-text="article.body"></dd> 
 </dl> 
</div>

【JavaScript】

var is_init=false;
function updateList(_limit, _offset){
 $.ajax({
  type: "GET",
  url: "/api/getlist",
  dataType: "json",
  data:{
   'limit':_limit,
   'offset':_offset,
  },
  success: function(_data){
   if(!is_init){
    //ViewModelの初期化(HTMLとデータの紐付けを定義)
    vm = new Vue({
     el: '#target',
     data :{
      'articles':_data
     }
    });
    is_init = true;
   }else{
    //2回目以降は、ViewModelのデータを差し替える→HTMLに反映されます。
    vm.$set('articles',_data);
   }
  }
 });
}

関数updateListを任意の引数で呼び出すことで、ページングが可能となります。

ViewModelに対して、データの更新を行うと、HTML表示も自動的に切り替わります。

Vue.jsを使わずjQueryのみで実装する場合と比べ、HTML要素へのid設定が不要になります。

また、DOM操作のためのJavaScriptコードが不要になっていることがわかります。

■ まとめ

・メリット

Vue.jsの機能がシンプルであるため学習コストが低く、データバインディングの恩恵をすぐに実感できます。

その他のフレームワークと比べて軽量なので、既存システムにも、リッチなUIが必要なページのみ対象に部分的に導入できそうです。

・デメリット

対応ブラウザがIE9以上なので、レガシーブラウザに対応する必要があるシステムでは採用できません。

タグ:

TrackBack