📑

今流行りのjavascriptフレームワークのVue.jsとは

2021/04/29に公開

JavaScript

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が初めてなので他のフレームワークとの比較はできませんが、これだけ見ると運用コストも高くないように思えます。