Vue.jsのキーコンセプト
Vue.jsの本「基礎から学ぶ Vue.js」を読んでたけど、途中でやめてたので復習！
最初に読んだ部分を忘れたので、少し戻りますｗ
- データをDOMに変換するのがVue.jsの役目
- データ駆動、リアクティブ・プログラミング
- テンプレート、ディレクティブ
- データバインディング
- コンポーネント
- Vuex、Vue Router（コンポーネントの管理）
データをDOMに変換するのがVue.jsの役目
(p.26)
はじめてVue.jsを使う時に意識すべきなのが、画面を描画する構造の本体はDOMではなくJavaScriptのデータということです。
先にDOMが存在してそれを読み込んだり操作するのではなく、Vue.jsでは最初にデータが存在してそのデータ状態に適したDOMを構築します。
- JSのデータを
- Vue.jsがDOMに変換して
- Webページの画面が描画される
これがVue.jsの基本的な仕組みなんですね。
（参考）DOMの復習
データ駆動、リアクティブ・プログラミング
データの状態によって描画は更新され、ときには自動的にアクションを起こしたり、いろいろな振る舞いが変わることもあります。このようなデータを中心とするアプリケーション設計のことを「データ駆動」と呼びます。
データが変わると表示内容も連動して変わる仕組みを、一般的に「リアクティブ・プログラミング」と呼ぶらしいです。
JavaScriptのフレームワークでは、Facebookで開発されている「React.js」がその代表例みたいです。
全てのコンポーネントインスタンスは対応する ウォッチャ (watcher) インスタンスを持っていて、これはコンポーネントを描画する間に “触れた (touched)” プロパティを全て依存性として記録しています。
その後、依存性の setter がトリガされると、ウォッチャに通知してコンポーネントの再描画が起動します。
Vue.jsは、ユーザーの操作やアニメーション等によって、データ（画面の元ネタ）が変わると、連動して表示内容も自動的に変わる仕組みになっているようです。
（詳しい仕組みはまだよく分かりませんが、説明図を見ると）「ウォッチャー」というアプリの監視役が常駐しているみたいです。
こいつが裏で活躍して、自動的に画面を再描画させているんですね？
テンプレート、ディレクティブ
Vue.jsでは、DOMを構築する手段として一般的に「テンプレート」を使用します。
このテンプレートの構文は、HTMLベースになっているためエディタとの親和性が高く、エンジニアとデザイナーの共同作業を円滑に行うことができます。
テンプレートとロジックを関連付けるのが「ディレクティブ」という機能で、テンプレート内では独自の属性で記述します。
様々な「ディレクティブ」の使い方を理解することが、Vue.jsの肝みたいですね？
データバインディング
データと描画を同期させる仕組みのことを「データバインディング」と呼びます。HTMLで作られたUIを操作するのに必要不可欠なのが、viewの管理つまりDOMの更新や状態の管理です。
◆DOMの更新はフレームワークに任せよう
データバインディングは、簡単にいえばJavaScriptのデータとそれを使用する場所を紐付け、データに変化があれば自動的にDOMを更新します。
Vue.jsもデータバインディングに関する多くの機能を持ち、ディレクティブによってHTMLを扱うときと同じ感覚でそれらの機能を使用することができます。
データバインディング（データ結合）とは、XMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを静的または動的に結合する技術である。
分離されたデータソースとユーザインタフェースの間を橋渡しする役割を果たし、データが変更されるとそれに応じてユーザインタフェースが変更される一方向なデータバインディングと、併せてユーザインタフェースの変更または操作に応じてデータが変更される双方向のデータバインディングがある。
生のJavaScriptでDOMを更新する処理を書いていたら、膨大なコード量になるところを、Vue.jsを使えば簡潔に書ける、ということですね？
コンポーネント
Vue.jsの「コンポーネント」は、機能ごとにJavaScriptとテンプレートを１つのセットにして、他の機能とは分離して開発できるようにする仕組みです。
コンポーネント化されたコード
部品を構成するHTML＋JS＋CSSはセットで管理
例えば、ヘッダー、サイドバー、およびコンテンツ領域のコンポーネントがあり、それぞれには一般的にナビゲーションリンク、ブログ投稿などの他のコンポーネントが含まれています。
ヘッダーならヘッダー部分で一まとめにして管理できるのが「コンポーネント」ですね？
画面を構成しているパーツを、個別に作成・管理できる、と。→便利そうだな～！
Vuex、Vue Router（コンポーネントの管理）
◆コンポーネントが増えても大丈夫！
コンポーネントはVue.jsのもっとも強力な機能の１つで、コンポーネントをネストしてページを構造化することも可能です。
コンポーネントが複雑に構造化された場合は「Vuex」や「Vue Router」といった拡張機能を導入することで目的に応じたスケールアップもできます。
コンポーネントが増えて複雑になったら、「Vuex」「Vue Router」という拡張機能を追加すればOKみたいです。
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。
状態管理に関わる概念を定義、分離し、特定のルールを敷くことで、コードの構造と保守性を向上させることができます。
これが Vuex の背景にある基本的なアイディアであり、Flux、 Redux そして The Elm Architectureから影響を受けています。
Vue Router は Vue.js 公式ルータです。
Vue.js でシングルページアプリケーションを構築します。
以上で、Vue.jsの基本を復習できました。
新しい用語や概念が出てくると混乱しがちなので、Vue.jsの基本を頭に叩き込んでおきましょう！
迷ったときは常に原点回帰で、p.26の「Vue.jsのキーコンセプト」を忘れないようにしよう…。
