SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

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

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ViewModelの定義

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

手島 拓也(LINE株式会社)(テジマ タクヤ)

日本IBM研究所にて検索・テキスト解析ソフトウェア製品の開発に従事した後、現在はLINEにてWebフロントエンド開発を担当。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8363 2015/01/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング