【入門】Vue.jsを学ぶべき10の理由

こんにちは、チロルです^_^

今回はWebアプリケーション開発で人気のあるフレームワーク、Vue.jsを学ぶべき10の理由を紹介します。

Vue.jsとは？

Vue.jsはオープンソースのJavaScriptのフレームワークです。
Vue.jsは非常に軽く動作し、様々なユーザーインターフェース（UI）を備えたSPA（Single Page Application）開発に適したフレームワークです。

Vue.jsは2014年2月頃にリリースされ、今では世界中の数多の企業が利用してWebアプリを開発しています。

上の表は、世界中のプログラマが利用する質問サイトのStack OverFlowで質問件数をJavaScriptフレームワークごとに時系列で表したものです。これを見ると、Vue.jsがとても人気のあるフレームワークであることがわかると思います。

JavaScriptには多くのフレームワークがありますが、Vue.jsは学習コストが低く、また、開発に役立つ多くのライブラリが用意されています。

そんなVue.jsを学ぶべき10の理由を東証一部のIT企業に勤めて、Webアプリ開発に携わっている私チロルから紹介させていただきます！

この記事を読むとわかること

この記事を読むと次の内容がわかります。

Vue.jsを学ぶべき10の理由

1つ目：仮想DOMで効率的にDOM描画できる

仮想DOM（Virtual DOM）とは、DOM（Document Object Model）を効率的に描画するための仕組みです。

簡単に説明すると、実際にブラウザに描画しているDOMと、Vue.jsアプリケーションの処理で描画するDOM（仮想DOM）の差分を算出し、差分のみを描画します。

そのため、Webアプリでも安定して動作し、高速で動作するアプリを実現できるのです。

2つ目：双方向データバインドでユーザビリティの良いアプリが簡単に開発できる

Vue.jsはMVVM（Model-View-View Model）アーキテクチャを採用しており、その特徴として双方向データバインドを備えています。

MVVMとは簡単に言うと、画面上での入力がデータに作用すると、データの変更がリアルタイムで画面側に反映される事を設計思想に持つアーキテクチャを指しています。
MVVMについては、次のサイトが分かりやすかったのでMVVMが分からない方は是非見てみてください。

Vue.jsでは、「（双方向）データバインド」という機能を有しており、次の機能を持っています。

この機能はVue.jsのメイン機能の１つということができ、他のJavaScriptフレームワーク、例えば Reactと比較して、簡単に柔軟なアプリケーションを開発することができます。

３つ目：CSSトランジションを利用したアニメーションを簡単につけられる

Vue.jsではDOMに新たな要素が追加される場合、またはDOMから要素が削除される場合に簡単にCSSトランジションを利用したアニメーションを付けることができます。

CSSトランジションとは、CSS属性が変化する際にその変化する速度を調整することで、属性値の移り変わりをアニメーションのように表す手法です。

例えば、CSS属性「display」を「hidden」に3秒かけて変更する場合、対象の要素はゆっくり3秒かけて見えなくなっているように見えます。

CSSトランジションはユーザビリティ向上に寄与して、アプリケーションのクオリティを底上げするのに役立ちます。Vue.jsでは非常に簡単にトランジションをつけられる仕組みが整っています。

４つ目：コンポーネントごとに切り分けて再利用可能な形で効率的に開発できる

コンポーネントとは、HTML要素を再利用可能な形で拡張した概念のことで、コンポーネントごとに独立して定義できます。

Vue.jsではコンポーネントを組み合わせていくことでアプリケーションを作成していきます。

コンポーネントは、prop（属性）やevent（イベント）と呼ばれる機能を利用して互いにデータをやり取りして、動的にDOMを切り替えていきます。

Vue.jsのコンポーネントは独立して定義可能となっており、例えばCSSもコンポーネント毎に定義し、そのCSSが他のコンポーネントに影響を及ぼさない様にすることが可能です。

また、この独立性のおかげで複数人開発の大規模な開発時にも機能を切り分けることで効率よく開発できます。

５つ目：API通信を活かした汎用的なアプリ開発ができる

Vue.jsはデータドリブン（データが変わることで動的に画面が切り替わる設計思想のこと）のフレームワークの為、APIを通じたデータ取得によって汎用的なアプリの開発を行うことができます。

例えば、サーバにPHPのフレームワークであるLaravelを利用する場合、Vue.jsと組み合わせることで認証周りの処理を簡単に実装できます。会員登録して、その後ログインする様なアプリが簡単に作れます。

６つ目：ブラウザを気にせず Modern JavaScriptが利用できる

JavaScriptはEcma Internationalという団体で標準化がされています。

というのも、JavaScriptはブラウザ上で動作する言語ですがブラウザ間で文法や機能などに差異があると開発する際に困ってしまうからです。

その為、JavaScriptは標準化がなされており、Ecma Internationalによって標準化されたものをEcma Scriptと呼びます。Ecma scriptにはタイミングよってバージョンがつけられており、最新のEcmaScriptはES2021です。

ただ、最新のJavaScriptを利用する際、ブラウザによっては利用できない文法などが含まれている場合があります。

そこで、Vue.jsでは、Babelというコンパイラを利用して、最新の JavaScriptを利用しても、指定したバージョンに自動で変換する事でブラウザ間の際を意識することなく開発ができます。

７つ目：学習コストが低い

Vue.jsはライフサイクルという設計思想を持っており、すべてのコンポーネントはこのライフサイクルに則って開発することができます。

HTMLにディレクティブという形でVue.jsを組み込むことができるので、新たに学ぶというよりも、HTML、JavaScriptを利用した通常のWeb開発の延長線上で学習することができます。

８つ目：他のアプリと組み合わせて柔軟にアプリを開発できる

Vue.jsは他のJavaScriptベースのアプリと親和性が高く、エンジニアにとても人気があります。

Vue.jsはCDN（Content Delivery Network）を利用して簡単に導入できます。

特段何かをインストールする必要はなく、headタグにscriptタグを含めることで利用できます。

その為、Vue.jsを利用したライブラリを使いたいと思った場合は、気軽にその機能を利用することができます。npm(node package manager)などのインストールは不要です。

この事から、新しいアプリを開発する際は、既存アプリを少しづつ改良していくことでその真価を発揮します。

９つ目：テンプレートを利用してアプリ開発できる

Vue.jsでは、HTMLのフォーマットで記載されたDOMとコンポーネントを結びつけることができ、これをテンプレートと呼びます。

このテンプレートは仮想DOMとして取り扱い、実際にDOMを生成する機能の中で処理されます。

そして、現在のバージョンのVue.jsでは、テンプレートは必ず１つのタグに含まれる必要があるという制限があります。

つまり、次のように複数タグをトップに持つテンプレートは許容されていません。

<template>
    <h1> テンプレート1</h1>
    <div>
        <h2>テンプレート1の内部</h2>
    </div>
</template>


<template>
    <h1> テンプレート2</h1>
    <div>
        <h2>テンプレート2の内部</h2>
    </div>
</template>

テンプレートはtemplateタグで囲まれた領域のDOMを指していますが、一番トップのタグは１つである必要があるため、上記のような記載は許容されないのです。

しかし、Reactではこの複数のタグを許容しており、多くの開発者がVue.jsでも同様に複数タグの許容を求めた結果、Vue.js 3.0では、実際に複数タグが認められるようになっています。（仮想DOMのロジックを大きく修正する必要があったらしく、困難な機能追加であったとのこと）

10つ目：算出プロパティが利用できる

算出プロパティ（computed properties）とはVue.jsの重要な機能の一つで、Vue.jsのコンポーネントに保持するプロパティの変化を監視し、そのプロパティに変化があった場合に連動するように算出プロパティに設定したプロパティの値を再算出する仕組みのことです。

そのため、難しい実装もなく、プロパティの依存関係を定義することができるとともに、画面上のDOMレンダリングも自動で実施してくれるため、効率よく開発を進めることができます。

例えば、ショッピングサイトの購入金額合計を算出プロパティに設定した場合、「購入する商品の情報（金額と数量）」を依存するプロパティに設定しておけば、あとは 「購入する商品の情報（金額と数量）」 を画面上で選択すると自動で合計金額が算出され、値が画面に描画されるようになります。