Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

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

目次

はじめに

 Vue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。2014年11月27日にリリースされたLINEスケジュールは、Vue.jsを使って実装しているSPA(Single Page Application)の代表例です。

 本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します(執筆時点のバージョンであるv0.11の内容です)。

Vue.jsとは

 Vue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー(MVVMパターン)」を提供するJavaScriptのライブラリです。

 Vue.jsの基本概念は以下のようになっています。

  • 極力シンプルにしたAPI設計
  • リアクティブなデータバインディング
  • コンポーネント化容易な仕組み
  • 他ライブラリへの依存がなく柔軟かつ軽量(約52KB)

 他のライブラリと比べてVue.jsは後発で登場し、AngularJSKnockoutJSRactive.jsRivets.jsの良さを踏まえた上で、機能性とシンプルさを追求して作られています。そのシンプルな性質から学習コストが少ないのも特徴です。

 Vue.jsはコンポーネント化にも力を入れています。例えば、Web Componentsのコンセプトに沿った仕組みの提供や、WebpackBrowserifyなどのモジュールのビルドシステムへの対応も積極的に行っています。

 AngularJSを代表とするデータバインディングを提供する他のJavaScriptのフレームワークと比較すると、Vue.jsは機能やサポート対象の多さという観点では劣る面もあるかもしれません。しかし、Vue.jsの設計は、ある程度シンプルなアプリケーションや迅速性を求められるプロトタイプ開発などに適しているため、そのような局面では開発の効率性を特に高めることができます。

Vue.jsのパフォーマンスについて

 Vue.jsはレガシーブラウザのサポートを落とし(IE8以下はサポート外)、バインディングにECMAScript 5のObject.definePropertyで提供されるgetter/setterを利用して、イベントベースの監視の仕組みを実現しています。そのため、例えばAngularJSが持つ変更検知のためのdirty checkingなど、コストのかかる機構を必要とせず高速と言われています。他のライブラリとの機能比較に関してはVue.jsの作者であるEvan You氏がFAQページで解説しています。

 

 また、Vue.jsは他のMV*系のライブラリと比較して最もパフォーマンスに優れているというベンチマークテストの結果ページが公式ページに公開されていました。しかし、他ライブラリの作者から計測基準がフェアではないなどいくつかの意見があり、現在はそのパフォーマンスに関するページは削除されています。


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

著者プロフィール

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5