Vue.jsとは
- Evan You氏の個人プロジェクト
- 2014年にリリースされた比較的新しいフレームワーク
- 2015年にはPHPフレームワークのLaravelのフロントエンジンとして採用され、知名度が上がった
- 2016年後半にリリースされたバージョンでは仮想DOMを採用したことにより、レンダリングパフォーマンスを向上させた
- Adobeや任天堂、LINEやGitLabで使われている
なぜVue.jsなのか
- 学習コストの低さ
- スケールの柔軟性
- 公式ドキュメントの充実
が多くの人々に支持されているのではないかと思われる
導入のしやすさと学習コストの低さ
- Vue.jsは必ずしもwebpackなどのハンドルツールやコンパイルを必要としていない
- ファイルを1つ読み込むだけですぐにコードを書き始めることができる
スケールの柔軟性
- Vue.js本体はviewに関わる面倒な処理を人間に代わって管理することが仕事
- スクリプトタグで読み込むスタンドアロン版を使用してページの一部だけをインタラクティブ化するなど、小さな要件に気軽に導入できる
- 拡張機能や開発サポートツールも数多く提供されていてシングルページアプリケーションのような大きなプロジェクトにも対応できるフレームワークとして注目されている
ドキュメントの充実
- Vue.js本体のドキュメントではなく、スタイルガイドやエコシステムといった公式ドキュメントの多くが日本語に翻訳されている
- Vue.js日本ユーザーグループによってサポートされている
Vue.jsのキーコンセプト
- 構造の本体はDOMではなく、Javascriptのデータである
- データが存在してそのデータの状態に適したDOMを構築する
- データの状態によって描画は更新されたときには自動的にアクションを起こしたり、振る舞いが変わったりする。このようなデータを中心とするアプリケーション設計のことを「データ駆動」と呼ぶ
テンプレート
- DOMを構築する手段として一般的に「テンプレート」を使用する
- HTMLベースになっているためエディタとの親和性が高く、エンジニアとデザイナーの共同作業を円滑に行うことができる
- テンプレートとロジックを関連づけるのが「ディレクティブ」という機能で、テンプレート内では独自の属性で記述する
<div v-if="show">Hello World!</div>
v-から始まるディレクティブ
- 先程のコードに
v-ifと出てきたが、Vue.jsにはv-bindやv-keyといった見慣れない属性が登場する このv-から始まる属性は先述の「ディレクティブ」都呼ばれ、主にデータバインディングを行うために使用される - ディレクティブの値はJavascriptの単一な式ということがポイント
- このような書き方は仮想DOMを作るための単なるテンプレート記法で、DOMへ反映される前にVue.jsによってコンパイルされ、その後は内部でのみ利用される
①<div key="id"></div>
②<div v-bind:key="id"></div>
①と②はどちらもkey属性にidという値を指定したものだが、内容は異なる
① 単純に「id」という文字列を表す
② v-bind:key つまり名前が v-で始まるディレクティブになっているため、値は「idというJavascriptの変数」を表す 厳密に言えばプロパティ
データバインディング
- データと描画を同期させる仕組みのことを「データバインディング」と呼ぶ
- HTMLで作られたUIを操作するのに必要不可欠なのが、DOMの更新や状態の管理
ライブラリを利用せずにJavaScriptでテキストを更新したいときは次のように書く必要がある
var el = document.getElementById('text') // 要素を探す
el.innerText = '新しいテキスト' //要素を更新する
一見するとシンプルに見えるが、更新する場所が多くなればなるほどこの処理が増えていくため、テキストの更新だけで処理の大半を埋め尽くしてしまう。面倒な作業の上にちょっとしたミスでバグを生み出す要因になりかねない。
DOMの更新はフレームワークに任せる
- そこで注目を浴びることになったのがデータバインディング型のライブラリやフレームワーク
- データバインディングはJavaScriptのデータとそれを使用する場所を紐付け、データに変化があれば自動的にDOMを更新する
- Vue.jsもデータバインディングに関する多くの機能を持ち、ディレクティブによってHTMLを扱う時と同じ感覚でそれらの機能を使用することができる（HTMLタグにv-から始まる属性を記述するため）
コンポーネント指向の画面構築
- Vue.jsの「コンポーネント」は、機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組み
- コンポーネントのデフォルト機能としてHTMLとJavaScriptをセットにできるが、ので.jsを使用できる環境ならJavaScriptとHTML、さらにCSSをまとめることができる（環境構築の際にNode.jsを入れるので基本入っている状態）
- このようにセットしてしまえば、関連するソースコードを容易に見つけることができる
- ロジックをほとんど描かなくても、単にHTMLのコーディングを効率化するためだけにコンポーネントを利用することもある
- コンポーネントをネストしてページの構造化をすることも可能
- コンポーネントが複雑に構造化された場合は「Vuex」や「Vue Router」といった拡張機能を導入することで目的に応じたスケールアップもできる
総括
普段はサーバーサイドを担当してますが、ふとしたきっかけでフロントエンドを学びたいと思って今流行りのVue.jsに手を出してみました。確かに理解しやすさと運用のしやすさは中々良いと思っています。
javascriptのフレームワークはVue.jsが初めてなので他のフレームワークとの比較はできませんが、これだけ見ると運用コストも高くないように思えます。