📘
Vue.jsの特徴・導入事例
Vue.jsとは
webサイト・webアプリケーション構築のための、javascriptフレームワークのこと。
vue.jsの特徴
1リアクティブ機能
ユーザーが文字などを入力したら瞬時に画面上に情報が表示されることを「リアクティブ機能」という。データとUIの同期が行われるので、データの変更がすぐにUIにあらわれる。
2軽量で高速
Webサイトの画面を表示する際には、DOMと呼ばれるHTMLを構築する仕組みを利用してHTMLを解析して表示する。したがって、HTMLの内容が変更されると、Webブラウザはその都度DOMからHTMLを読み込む必要があり、画面表示の時間がかかりがち。しかしVue.jsには、「仮想DOM」という機能が搭載されていることで素早い画面表示を行うことが出来る。
3プログラムの部品化
Vue.jsはコンポーネント指向のフレームワークで、開発に必要なコンポーネント(部品)を組み合わせて開発していく手法を用いる。コンポーネント同士は独立しており依存関係がないので、自由に組み合わせたり、再利用したりすることができ、開発効率を向上させることが出来る。
4学習コストの低さ
構文がシンプル、直感的なAPIで学習しやすい。
5エコシステムが豊富
豊富なプラグイン・ライブラリで開発がしやすい。代表的なプラグインとして以下のものがある。
vue.jsの導入事例
- MyNintnedo
https://my.nintendo.com/?lang=ja-JP
文字を入力する際に「必須項目が入力されていない」「正しいメールアドレスが入力されていない」などのエラーがすぐに表示される。 - Trivago(トリバゴ)
ホテル検索サイト「Trivago」
https://www.trivago.jp/?msockid=13117fd4f4db6cd5072f6e4df5156d86
Discussion