Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
818
Help us understand the problem. What is going on with this article?
@asip2k25

Vue.js概要?

Vue.js とは

原作者である Evan You氏 が中心となって開発中のクライアントサイド
JavaScirpt(JS)フレームワークです。

MVC の派生種である、GUIライブラリに適した MVVM を設計基盤として
採用し、構築されています。

MVVM を採用していること が、構文の理解しやすさに繋がっています。

MVVM を採用したフレームワークでは、表示そのものであるView、
表示するデータ 及び データを操作する手続き をひとまとめにした View Model
(VM)、が舞台上の役者です、それらを管理するコントローラ(Controller)は、
存在するものの、黒子のような存在で、ユーザからは隠蔽されているため、
コードを書く際に意識する必要はありません。

公式サイトで Vue.js の特徴は Simple、Fast、Composable、Compact、
Powerful、Module Friendlyという6つの言葉で表現されていました。

1)Simple
 HTMLを書き、JSONを掴み、View Modelを作る、Vue.jsを用いたコードを
 書く際に必要な作業はこれだけです。
2)Fast
 DOM操作をまとめ適切なタイミングで非同期更新することで高速な動作が
 実現されています。
3)Composable
 依存のない再利用可能なコンポーネントを作り、組み合わせることができます。
4)Compact
 ミニファイドかつ圧縮すると20kbとコンパクトになります。
5)Powerful
 HTMLに書く式と算出(算出)プロパティは依存するプロパティ(値or変数)が
 自動的にトラッキング(追跡)される等、ユーザにとって面倒な動作の
 多くを肩代わりしてくれます。
6)Module Friendly
 Webpack etcの中から貴方好みのモジュール管理の仕組みを利用できます。

概要

 Vue.jsでは、View Model(VM)と View(HTMLテンプレート) の間で、
 データの連携を行います。

 ViewとVMのひも付けを、ディレクティブ(Directive、属性)で行い、
 Viewを構成するパーツ(UIコンテナ)をコンポーネント(Component)
 として切り出すことで、Viewの再利用のための部品化を行えます。

 VMとViewの間でやりとりするデータは、フィルター(Filter)を用いることで
 VMに格納されているデータを変更することなく、表示用に加工できます。
 ※ 2.xまで、3.0.0からフィルターは廃止されました。
 ※ 3.0.0からは、算出(Computed)プロパティに書き換えることになります。

Class指向

 JavaScript(JS)は、プロトタイプ・ベースのオブジェクト指向、を採用していますが、
 Vue.jsでは、Classベースのオブジェクト指向を採用しています。
 (ES6では、Class構文が導入されていますが、シンタックス・シュガーであり、
 JSのオブジェクト指向は、根本的には、プロトタイプ・ベースのまま、です。)

 Vue.js では Class をオブジェクト・リテラル(ハッシュ(連想配列)の形)で
 表現しています。
 (オブジェクト・リテラル も、JSでは、シンタックス・シュガーです。)

View

 HTMLそのものです。基本的には、HTMLの要素にディレクティブ(属性)を付加し、
 ディレクティブを通じて、VMと連携させることで、VMのデータをViewと連動させ
 ます。

 作成した or 既存の UIコンテナを、コンポーネント(独自タグ)として、パーツ化
 して、(再)利用することもできます。

View Model (VM)

 VMは、プロパティ(データ、値)とメソッド(関数)、で構成されます。
 
 プロパティは、ディレクティブでViewと紐付けることで、Viewに反映
 させたり、Viewへの入力と連動させたりできます。

 メソッドは、ディレクティブで、要素のイベントと紐づけることで、Viewに
 対して操作が行われた際に、ひも付けられたVMのメソッドを実行できます。

 メソッドには、Viewのイベント用のメソッドとVMのライフサイクル・イベント
 用のメソッド、どちらでもないメソッド、の3種類があります。

 算出(Computed)プロパティをつかえば、プロパティの入出力を加工することも
 できます。

Directive (ディレクティブ)

 Viewの要素に付加できる独自属性です。Viewの要素に付加することで、VMのプロパティと
 Viewの要素、VMのメソッドとViewの要素のイベント、を紐付けます。

 ビルトインのディレクティブには、要素の属性とVMのプロパティを紐付けるv-bind
 (旧v-attr)、要素のイベントとVMのメソッドを紐付けるv-on、要素の値と
 VMのプロパティを紐付けるv-model、etcがあります。

 ビルトインのディレクティブの他に、独自ディレクティブを作成することもでき、
 作成したディレクティブをカスタム・ディレクティブと呼びます。

 ディレクティブの定義・作成には Vue.direcitive を用います。

 ディレクティブは、View上の一つの要素に対する操作(DOM操作)のみを行えます。

Component (コンポーネント)

 View に記述できる独自タグであり、UIコンポーネント(コンテナ)です。

 Vue.jsでは、既存の or 新規作成した UIコンポーネントを組合せて、
 ページを構成することを前提にしています。

 コンポーネントの定義・作成には Vue.component を
 用います。

 Viewの要素とv-componentディレクティブを用いて、
 対応づけることもできます。
 
 Vue.jsで作成したUIコンポーネントは基本、カプセル化され、各々、
 独立しているため、VMオブジェクトのプロパティやメソッドを通じて、
 UIコンポーネント間でのデータのやりとりを行います。

Web Components

 Vue.jsはWeb Componentsで実現できる Model Driven View (MDV)
 を先取りしています。

Vue.js の詳細についてはリンク↓で公式サイトや紹介している記事etcを
ご覧ください。
注) リンク↓は、近々更新予定です。

他のフレームワークとの違い

 軽量AngularJS(1.x)とでも呼ぶべきフレームワーク(FW)と
 なっています。

 AngularJS(1.x)と表面上は似ていますが、設計思想は
 似て非なるモノであり、構文は同じくMVVMを設計基盤
 にするKnockoutJSに似ています。

 後発だけあって、AngularJS(1.x)やKnockoutJSにある
 Viewまわりの課題の多くをほぼ解消しています。

 Angular(JS)はフルスタックのFWであり利用するならAngular(JS)
 にどっぷり浸かるしかありませんが、Vue.jsはViewまわりに
 特化しそれ以外の機能は自由に任意のライブラリを選択可能で
 便利機能はプラグインとして提供のFWですので、既存の既に
 利用してきたFW(Backbone.js etc)と組合せて利用する
 ことも可能です。

 React.jsとは、バックエンドにvDOM(Virtual DOM)を採用している
 点で共通しています。機能的にできることに、違いは、ほぼ、ありません。

 React.jsが、エンジニア・セントリックであるのに対して、Vue.jsは
 デザイナ・フレンドリーです。

 (React.js、サーバーサイド・エンジニアが作った感があります。)

ブラウザ・サポート

 Vue.jsではモダン・ブラウザ(IE9以降)のみをサポートし、
 レガシー・ブラウザは非サポートとなっています。

 モダン・ブラウザのみをサポートすることで、モダン・ブラウザに
 搭載されたJSの新機能をフル活用すると共にブラウザ毎の差異の
 吸収を行うコードを最小限に止め実装をシンプルにすることに成功し
 高速な動作・シンプルでパワフルな構文を実現しています。

 W3CがHTML5策定を機に実装ありきの仕様策定の方針にシフトし、
 仕様内にブラウザに求める挙動の記述がある程度含まれるように
 なった結果、モダン・ブラウザはレガシー・ブラウザに比べ、
 ブラウザ間の差異が少なくなってきています。

 レガシー・ブラウザをサポートすることは一見、長所に見えますが、
 レガシー・ブラウザをサポートするということはレガシー・ブラウザを基準に
 レガシー・ブラウザで提供されている機能で実現できる範囲で設計すると
 いうことでもあります。

 既存のレガシー・ブラウザをサポートしているフレームワークの多くは、
 モダン・ブラウザにて導入されたJSまわりの新機能や改良の恩恵を充分に
 うけることができないという制約、モダン・ブラウザの新機能を利用すれば
 シンプルに実装できる機能をレガシー・ブラウザに搭載済みの機能のみで
 実現せざるをえない、レガシー・ブラウザを含むブラウザ間(バージョン間
 を含む)の差異をフレームワーク内で吸収せざるをえないせいで内部ロジックが
 複雑になるがゆえのパフォーマンス上の足枷等の短所を抱えています。

 (ブラウザの実装の違いをライブラリ?で吸収するPolyfillという実装手法
 もありますが、レガシー・ブラウザに既にある機能のみではモダン・ブラウザで
 ネイティブに実装された機能と同等の機能を実装すること、挙動をあわせる
 ことが難しいのが現実です、Polyfillは万能でも(無から有を生み出す)魔法
 でもありません。)

後発ゆえの優位性

 Vue.jsは先発のフレームワークの良いところを吸収し、また、その短所を
 反面教師とすることで、先発のフレームワークよりも洗練されています。

 メジャーバージョンアップの度に、既存のフレームワークの良いところを
 吸収し、ブラッシュアップ&進化し続けています。

学習コスト

 初期学習コストは、それなりに掛かります、が、そこを抜けてしまえば、
 レールが敷かれている(感がある)ので、劇的に?、開発時間、及び、
 周辺ライブラリを含めた 学習コスト(時間)、を圧縮できます。

AngularJS(1.x)との違い

 本文はこちら

KnockoutJSとの違い

 本文はこちら

他の VirtualDOM (VDOM) ベースFW との違い

 本文はこちら

構造

ビュー周りをコア(本体)とし、ルーター等の便利機能は本体から
切り離し、プラグインとして実装する構成を取っています。

プラグインは既存の外部のセンスの良いライブラリを実装に
利用する形で提供されています。

プラグインについては現在、公式・サードパーティのプラグイン
があります。

vue-router etc プラグインについては
実装が公開されています。

プラグイン

vue-router、vuex はv2.x、v3.0に対応済みです。

Router

vue-router (Vue0.12以降)
https://github.com/vuejs/vue-router

vue-routerの他に
ロードマップで紹介されたことのあるrouter or directorか
ロードマップのコメントで紹介されているDispatch.jsか
Router.js、Warden.js を使うのも良さそうです。

router
https://github.com/ianstormtaylor/router
director
https://github.com/flatiron/director
Dispatch.js
https://github.com/olav/dispatch.js
Router.js
http://www.ramielcreations.com/projects/router-js/

Warden.js
https://github.com/mizchi/warden
via Vue.jsの足りない機能を補うために死活管理付きのルーター作った
http://mizchi.hatenablog.com/entry/2014/05/03/181642

vueui-router
https://github.com/vueui/router

Resource

Kong/swrv
Vue版SWR
v2.x & v3.x 対応。

他には、AxiosやGuide#Building Larger Appsで
紹介されている Super Agent を
使うのが良さそうです。

Axios
https://github.com/mzabriskie/axios
Super Agent
https://github.com/visionmedia/superagent

Vue.jsとAxiosなら驚くほど簡単に作れる!外部APIを使ったWebアプリの実例
https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/
jQuery.ajaxの代わりにSuperAgentを使う
http://qiita.com/hashrock/items/3113690bb3de5bba639b

pagekit/vue-resource
PageKitというCMS向けに開発されていたvue-resource実装。v2.x対応。
一時期、公式採用されていました。
2016/11に公式→非公式になっています。

Validation

VeeValidate
v2.x & v3.x 対応。

validate.js
http://rickharrison.github.io/validate.js/
validator.js
https://github.com/guillaumepotier/validator.js

Firebase + Validation Example
http://vuejs.org/examples/firebase.html

kazupon/vue-validator
v1.0で公式に取り込まれましたが、v2.0対応できずでパージされました。)

touch

jerrybendy/vue-touch-events
v2.xに対応しています。

vue/vue-touch
v2.0対応できず、廃止されました。

State Management (状態管理)

Vuex

ES6 Class Style Component

Vue Class Component
v2.x対応。v3.x対応はbeta。

Vue Property Decorator
v2.x対応。

DI(Dependency Injection)

Vue.jsでは上述したとおりDI(Dependency Injection)機能は
標準搭載されていません、また、vue-diプラグインの提供予定も
ありません。

di-lite.jsやinjector.js等と組み合わせることにより、DIを
簡単に導入できます。

di-lite.js
http://nickqizhu.github.io/di.js/
injector.js
https://github.com/mizchi/injector.js
via http://d.hatena.ne.jp/mizchi/20130421/1366541175

現在

v2.0.0がリリースされてから約4年、v2 をTypeScriptで書き直して、
新たなAPIを追加した v3.0.0 が、RCフェーズを経て、リリースされました。

v3.0.0では、構文の拡張、APIの変更・追加・廃止が
行われています。

v2.0.0では、バックエンドでのVirtual DOMの採用に伴い、
フル・スクラッチでの書き直しが行われました。

v2.0では、バックエンドへのVDOMの採用に
より、構文の変更・拡張が行われています。
https://github.com/vuejs/vue/issues/2873

(v1.0でObject.observe(O.o)対応が囁かれていましたが、
ES(ECMA Script)仕様の策定において、進捗が芳しくないこともあり、
見送られました。その後、O.oの提案者であるGoogleが提案の取り下げを
行い、O.o自体がES仕様から消滅しています。
v2.0以降では、ES2015からES仕様に追加されたProxyを利用する
形に書き直されているはずです。)

v0.11では、フル・スクラッチでの書き直しが行われました。

v0.11.0では構文の拡張・変更が行われました。
https://github.com/yyx990803/vue/blob/master/changes.md
(Vue.js v0.11の変更点(予定)まとめ
http://blog.koba04.com/post/2014/10/07/vue-js-v011-changes/)

今後(ロードマップ)

v3.1でV3.0に実験的機能として導入された新機能Suspenseが
正式版になります。

時間的制約があり、v3.0.0では見送られたIE11サポートが
3.0.x or 3.1以降で追加される予定でした。

v3への移行を容易にするための移行パスが追加されたv2.7が
2021 Q1にリリースされる予定となっています。

MSがIE(&旧Edge)のフェードアウトを決定したこともあり、v3.x以降は
IE11サポートは行われず、IE11に対応する最後のバージョンとなるv2.7
へのv3.x互換機能のバックポートにより多くの開発リソースが割り当て
られることになりました。

サーバーサイドFWとの連携

RubyならRails、PHPならLaravelが良さそうです。

Railsは5.1 から Webpacker を介して Vue.js を
サポートしています。

Laravelは Vue.js を公式サポートしています。

Node.jsでは frourio or Nuxt.jsが良さそうです。

frourio
 https://frourio.io
 Nuxt.js対応のフルスタックFW。

Nuxt.js
 https://ja.nuxtjs.org
 v2.x対応。v3.x対応のv3はプライベート・リポジトリで
 開発中。

リンク

公式

vue.js
http://vuejs.org/
https://jp.vuejs.org/

Guide

http://vuejs.org/guide/
https://jp.vuejs.org/guide/

Api

パフォーマンス比較

紹介

実装まわり

[v0.10.x〜1.x]
データバインディング
http://efcl.info/2014/0209/res3658/
JavaScript フレームワークがデータバインディングを実現する4通りの手法
http://tech.nitoyon.com/ja/blog/2014/07/18/data-binding/
Backbone.jsなどのライブラリのgetter, setterがダサい理由と、その解消方法
http://qiita.com/tekkoc/items/eb5ab65524c3e5b4a11c

簡易リファレンス

[v0.10.x〜1.x]
Vue.js note(v0.10.3)
https://gist.github.com/asip/342d458986b44240f742
vue.js book
http://koba04.github.io/vuejs-book/
Vue.js v0.10.4の変更点まとめ
http://qiita.com/koba04/items/275b50e78a270cc86ea7
Vue.js v0.10.5の変更点まとめ
http://qiita.com/koba04/items/e2555d2967964bc4760e
Vue.js v0.11の変更点(予定)まとめ
http://blog.koba04.com/post/2014/10/07/vue-js-v011-changes/

他のFWとの比較

エグザンプル

vue.js/Examples
http://vuejs.org/examples/

サーバーサイドFWとの連携

[v2.x]
Laravel 5.4で Vue.js開発環境を手軽に作る
http://blog.asial.co.jp/1496

他のJSライブラリとの連携

Vue.jsでView ModelにjQueryプラグインを統合する
http://qiita.com/asip2k25/items/920567d957ea1aacc2d3

UIフレームワーク

25+ Best Vue.js Frameworks » CSS Author
https://cssauthor.com/vuejs-frameworks/

TypeScript

環境まわり

ChromeAppとかExtensionsでVue.jsを使うために
http://qiita.com/koki_cheese/items/f568f15556fadc939ef3

採用サイト

CasperBox via https://twitter.com/casperboxapp/status/493898834188460033
http://casperbox.com/
LINEスケジュール
https://schedule.line.me/ via
http://codezine.jp/article/detail/8363

イベント・勉強会

Vue.js Meetup
http://connpass.com/event/10862/

Vue.jsを推す理由

 本文はこちら

最後に

この記事は常?にβです、内容は随時更新する予定です。
間違い等があれば、ご指摘ください。
指摘いただいた間違いについては間違いと判断すれば、修正します。

818
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
818
Help us understand the problem. What is going on with this article?