14:00本連載はLINEのフロントエンドエンジニアのチームがWeb開発において注目・活用している技術を紹介します。連載第1弾として、JavaScriptのデータバインディング(MVVM)ライブラリである「Vue.js」について紹介します。最後にはじめにVue.jsは、シンプル・軽量・高速という特徴を持つデータバインディングライブラリとして最近注目を集めています。LINE社でもアプリ内WebViewの実装技術の選択肢の一つとしてVue.jsを採用しています。Application)の代表例です。本稿は日本語記事がまだ少ないVue.jsの基本機能の紹介を目的とした「基礎編」として、公式ドキュメントの内容を元に解説します(執筆時点のバージョンであるv0.11の内容です)。Vue.jsとはVue.jsは、双方向バインディングによるModelとViewをつなぐ仕組み「ViewModelレイヤー(MVVMパターン)」を提供するJavaScriptのライブラリです。Vue.jsの基本概念は以下のようになっています。シンプルにしたAPI設計リアクティブなデータバインディングコンポーネント化容易な仕組み他ライブラリへの依存がなく柔軟かつ軽量(約52KB)他のライブラリと比べてVue.jsは後発で登場し、AngularJS、KnockoutJS、Ractive.js、Rivets.jsの良さを踏まえた上で、機能性とシンプルさを追求して作られています。そのシンプルな性質から学習コストが少ないのも特徴です。Vue.jsはコンポーネント化にも力を入れています。Componentsのコンセプトに沿った仕組みの提供や、WebpackやBrowserifyなどのモジュールのビルドシステムへの対応も積極的に行っています。AngularJSを代表とするデータバインディングを提供する他のJavaScriptのフレームワークと比較すると、Vue.jsは機能やサポート対象の多さという観点では劣る面もあるかもしれません。Vue.jsの設計は、ある程度シンプルなアプリケーションや迅速性を求められるプロトタイプ開発などに適しているため、そのような局面では開発の効率性を特に高めることができます。5のObject.definePropertyで提供されるgetter/setterを利用して、イベントベースの監視の仕組みを実現しています。checkingなど、コストのかかる機構を必要とせず高速と言われています。You氏がFAQページで解説しています。Vue.jsは他のMV*系のライブラリと比較して最もパフォーマンスに優れているというベンチマークテストの結果ページが公式ページに公開されていました。他ライブラリの作者から計測基準がフェアではないなどいくつかの意見があり、現在はそのパフォーマンスに関するページは削除されています。タクヤ)日本IBM研究所にて検索・テキスト解析ソフトウェア製品の開発に従事した後、現在はLINEにてWebフロントエンド開発を担当。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。