Help us understand the problem. What is going on with this article?

Vue.jsガイドの用語整理

はじめに

Vue.jsのガイドを触った際に、いろんな用語が出てきたので、ここで整理したいと思います。

リアクティブシステム

さらに深く見ていきましょう!Vue の最大の特徴の1つは、控えめなリアクティブシステムです。モデルは単なるプレーンな JavaScript オブジェクトです。それらを変更するとビューが更新されます。

リアクティブシステムって何でしょう?

ざっくり説明すると、

  • 即応性 (Responsive)
    • ユーザのためにシステムの応答を早くしたい!
  • 耐障害性 (Resilient)
    • 応答を早くするためには障害起こしちゃだめだよね。
  • 弾力性 (Elastic)
    • 応答を早くするためにはシステム負荷が増大してもなんとかしたいよね。
  • メッセージ駆動 (Message Driven)
    • 耐障害性/弾力性を実現するために、各処理をコンポーネントに分けよう
    • コンポーネント間は非同期でメッセージ送って、効率よく処理しよう。

といった内容でした。

リアクティブ

これで初めての Vue アプリケーションが作成できました!一見するとただテンプレートを描画しているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM は関連付けられ、そして全てがリアクティブになっています。

なるほど。全てがリアクティブになるんですね。(全然理解してない)

データを「ストリーム」と捉えて、ストリームが流れてきたら処理する(操作が必要なデータを自分で取得して処理しない)という、リアクティブプログラミングという考え方があるようです。

ここで言うリアクティブとは、ストリーム(データ)に対してすぐ処理を行う。即応的に対処するということを指しているようです。

バインディング(束縛)

文字列の展開に加えて、以下のように要素の属性を束縛(バインディング)することもできます:

コレはプログラミングにおける束縛ですね。オブジェクト指向プログラミングでは、動的束縛、静的束縛、遅延静的束縛などの用語でお馴染みですね。

変数やメソッドには名前(識別子)を定義しますが、名前を使ってそれらを呼び出す際にスコープ、継承関係などによって実際に呼び出す処理、値が決定します。名前と、実際に呼び出す処理、値の結びつきを束縛(バインディング)と呼びます。

MVVM

Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。

MVCの派生パターンみたいですね。

Model/ViewはMVCと役割があまり変わらないようですね。Controllerの代わりにViewModelというものに置き換わっているようです。また、データの流れが変わっており、ユーザはControllerではなくViewにアクセスしていたり、双方向バインディングという機能でデータをやり取りしています。

仮想 DOM

React と Vue には多くの類似点があります。それらは両方とも:
・仮想 DOM を活用しています

仮想DOMはReactなどでよく聞きますね。

リアルDOM

HTMLなどの文章構造を操作するためのAPI。直接HTMLなどの文章を書き換える。

仮想DOM

HTMLなどの文章構造を操作するが方式が異なる。仮想DOMというオブジェクトを用意して、差分だけをリアルDOMに反映させる。

終わりに

すべての用語を理解していなくても、なんとなく触れますが、やっぱり用語を整理するとより理解が進みますね。

Why do not you register as a user and use Qiita more conveniently?
  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
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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