ここでは、Vue の特徴を学びます。

せっかくのフレームワークでも、間違った使い方をすると、余計なコードが増えたり、動作が重くなったりして、そのメリットを享受することができません。

Vue というフレームワークの特徴や仕組みを知ることにより、効率的かつ質の高いアプリケーションの開発をすることができるようになります。

JavaScript の 3 大フレームワーク

JavaScript のフレームワークとして人気が高いのは、Angular、React、Vue の 3 つです。
Vue は、この JavaScript の 3 大フレームワークのうちの 1 つとされています。

No	名称	GitHub スター数	リリース	説明
1	angular	85,322	2012年 （v2 / 2016年）	Google 社が開発。フレームワークの規模が大きく学習難易度が高い。
2	react	198,770	2013年	Facebook（Meta）社の Jordan Walke 氏が開発。Instagram、Twitter などで使用。
3	vue	201,112	2014年	Google 出身の Evan You 氏が開発。Angular の主要な機能のみを取り入れており軽量。

Vue は、Google において AngularJS を使用した開発に携わっていたエヴァン・ヨー（Evan You）氏が「Angular の良いところを抽出し、軽量なフレームワークを作る」という考えのもとに開発されたものです。

そのため、Vue は軽量で学習コストが低く、GitHub のスター数も他のフレームワークを上回るほどの人気があります（表中の GitHub スター数は 2022 年 12 月時点）。

Vue のメリット

以上の比較を踏まえ、Vue のメリット（特長）を挙げると次のようなものがあります。

① 学習コストが低い
② シンプルな構成のため自由度が高い
③ シングルページアプリケーション（SPA）の開発に向いている（※）
④ リアルタイムの更新に適する（MVVM モデルを部分的に採用※）

基本的には、Vue が軽量でシンプルであることが、そのメリットに現れています。
そのほか、日本語のドキュメントが充実していること、プログラムを部品化（コンポーネント化）し易いなどのメリットも挙げられます。

なお、SPA、MVVM モデルという見慣れない言葉が出てきていますが、これについては後ほど解説します。

Vue のデメリット

Vue のデメリットとしては、シンプルであるがゆえに「大規模開発に向かない」ということが挙げられます。 大規模な開発には、Angular や React の方が適しています。

SPA（シングルページアプリケーション）

SPA（シングルページアプリケーション）とは、簡単に言うと「単一のページで構成される Web アプリケーション」のことです。
その反対である、複数ページで構成されるアプリケーション（MPA）との違いを確認してみましょう。

SPA と MPA の違いを図で確認する

① MPA（複数ページの Web アプリケーション）

従来、Web アプリケーションは、複数のページで構成するのが一般的でした。
下図のように、表示するページごとに URL があり、その URL に応じて Web ページを表示するという仕組みです。

なお、複数ページのアプリケーションも年々進化しており、SPA の長所を取り入れたりしながら、現在でも多くの Web サイトで使用されています。

② SPA（シングルページアプリケーション）

次に、SPA（シングルページアプリケーション）です。
下図のように、基本的にページ（URL）の移動を伴わず、最初に読み込んだ HTML と JavaScript をベースに、Web サーバとの通信や画面遷移を行う仕組みになっています。

なお、実際は、SPA でも画面ごとの URL を指定したりすることができ、MPA（複数ページのアプリケーション）と近しい構成を取ることもできます。

SPA の特長

ここまでで、SPA がどういうものか、一応のイメージはできたのではないかと思います。
次に、SPA を使用することのメリットとデメリットを見ていきましょう。

① SPA のメリット

SPA の特長（メリット）としては、次のようなものが挙げられます。

・ ネイティブアプリ（※）と遜色ないアプリケーションが作成できる
・ 高速な画面遷移を実現できる
・ Web で表現できることの幅が広くユーザー体験の向上につながる

SPA は、基本的な画面処理はフロントエンド側で行い、サーバとの通信は必要な時に必要なデータのみ行う形となるため、高速で柔軟な表現が可能となっています。

② SPA のデメリット

一方デメリットとしては、次のようなものが挙げられます。

・ 初回のページ読み込み時に時間が掛かる
・ 開発コストが掛かる（フロントエンド側で複雑な処理が必要なため）

SPA は、一度読み込めば高速な処理が可能となりますが、初回の読み込み時に全てのデータを取得するため時間が掛かるという欠点があります。

Vue の開発においては、SPA を採用することも多いため、その特長を正しく把握しておきましょう。

MVVM パターン

各種のフレームワークでは、ある設計思想（アーキテクチャ※）に基づき、機能や構成を整理していくのが通常です。
土台となる設計思想がなければ、ファイルやコードが見通しの悪いものとなり、開発の効率化を妨げ、メンテナンス等に悪影響を及ぼしてしまうためです。

このカリキュラムで学習する Vue.js は「MVVM（Model-View-ViewModel）」というアーキテクチャの影響を受けています。
この MVVM パターンを通して、Vue の設計思想について見ていきましょう。

Model・View・ViewModel の各要素について

MVVM は、ユーザーインターフェースを実装するために用いられる設計思想で、次のように Model・View・ViewModel の3つの要素から構成されています。

つまり、次のようにファイルやコードを切り分けて、見通しを良くするという設計思想になります。

「View」は HTML などの画面表示部分を実装し、データもロジックも持たせない。
「ViewModel」は View と一体化し画面表示するデータやロジック部分を実装する（※）。
「Model」は、サーバとの通信や、各画面間で共有するデータ管理などを行う。

Vue における MVVM パターン

Vue は、厳密には MVVM パターンではないため「Vue のどのコードがどの要素に該当する」と言うことは難しいのですが、簡単に表にすると次のとおりです。

No	名称	説明	Vue の該当部分
1	View	画面表示テンプレート部分を担当 データは保持しない 入力等のアクションを ViewModel に送信する	Vue コンポーネントの <template> 部分が該当
2	ViewModel	画面表示のロジックを担当 画面表示データの保持・変換 Model と View 間のデータを橋渡しする	Vue コンポーネントの <script> 部分（アプリケーションインスタンス）が該当
3	Model	画面表示以外のロジックを担当 サーバ側との通信ロジックの実装 データ管理（状態管理）の実装	状態管理の store などが該当

まだ、実際に Vue を扱っていないので、イメージするのは難しいかもしれません。

このチャプターで覚えておいていただきたいのは、アプリケーションの開発においては「役割ごとにファイルやコードを適切に分ける」ということです。
これは簡単なようで、なかなか難しいのですが、コードの見通しを良くして、効率的かつメンテナンスし易い実装を心がけることが大事です。

リアクティブ

先ほどの MVVM についてのセクションで、Vue には ViewModel での変更が View に自動的にバインドされる仕組みがあることについて学びました。 その仕組みの正体が、今回学ぶリアクティブです。

リアクティブ（reactive）とは、「反応的な」という意味の言葉ですが、Vue においては「データが監視され、変更が検知されると自動的に画面に反映される状態」のことを指します。

例えば、エクセルなどの表計算ソフトで「セルA」と「セルB」の合計を計算する式を「セルC」に定義すると、「セルA」や「セルB」の変更を検知し、「セルC」の再計算が自動で行われます。 それと同じような動作が Vue の内部でも行われているイメージです。

変更の検知には getter や setter、JavaScript の Proxy という仕組みを利用しています。
これらの詳細や、リアクティブなデータの定義方法については後のレクチャーで詳しく説明しますので、ここではまずこのような仕組みがあるということを覚えておきましょう。

このチャプターでは、Vue がどのような概念に基づいたフレームワークなのか、また、Vue を用いてアプリケーションを作るとどのような利点があるのかについて説明しました。
具体的なイメージはまだ難しいかもしれませんが、これらを頭の片隅に置きつつ、次回以降のチャプターで実際のコードの書き方を学んでいきましょう。