VueはGoogleにおいてAngularJSを使用した開発に携わった尤雨溪（エヴァン・ヨー）によって開発され、2014年2月にリリースされました。

2024年4月16日時点の最新バージョンは3.4.22です。

Vue.jsはWebアプリケーションのUI部分などを開発する際に使われる、オープンソースのJavaScriptフレームワークになります。

JavaScript用のフレームワークは他にも数多くの種類がありますが、その中でもTOP3に入るほどに高い採用率を誇ります。


Vue.jsはユーザーから見えている部分をシンプルかつ高速に処理することができるフレームワークです。

画面描画に対する新しい考え方とデータ管理の仕組みを実現しています。

また、チーム開発において作業の分担がしやすくなる形式のファイルを扱えるなど、開発を効率化できるのも特徴となっています。

1.技術の習得が比較的容易

Vue.jsは、学習コストが低く、技術を比較的容易に習得できます。

AngularやReactと比較すると、Vue.jsで実現できることは限定的です。

そのため、新たに覚えるべきことはあまり多くありませんが、一般的なWebサービス構築で必要な機能はほぼ網羅されています。


また、Vue.js独自の文法がほとんどないことも、スムーズに学習できる理由となっています。

基本的な書き方はHTMLと同様であるため、JavaScriptエンジニアでHTMLに関する一般的な知識があれば、概ね理解できると考えます。

2.柔軟性が高い

Vue.jsは非常に柔軟性が高いのが特徴で、他のJavaScriptライブラリと組み合わせて使うことができます。

部分的にVue.jsを取り入れてアプリを開発したり、既存のアプリケーションの一部分をVue.jsで再構築したりといったことが可能なため、新規開発や既存アプリの拡張などさまざまな場面で導入できます。

3.高パフォーマンスかつリアクティブな表示更新が可能

Vue.jsは、データの変更を検出して画面表示を自動的に更新するリアクティブ機能を備えています。

このリアクティブ機能により、内部データの更新がリアルタイムで画面表示に反映されたり、画面上でのユーザー操作（クリックや入力など）がリアルタイムでデータに反映されたりといったことが自動で行われます。


さらに、データの変更を検出して画面表示を更新する際には、仮想DOM（画面の表示状態のデータのコピーをメモリ上に展開したもの）を使って関連するUIのみを再レンダリングする仕組みを採用しています。

Vue.jsでは、データが変更された場合にまず仮想DOMを更新し、更新後の仮想DOMと現在の画面表示の差分を計算して、差分のみを実際の画面表示に反映させます。

そうすることによって、データ更新のたびに画面全体を再レンダリングする必要がなく、画面更新がスムーズに行えるようになります。

この仮想DOMとリアクティブ機能により、高パフォーマンスでリアクティブな画面更新が可能となっています。

4.開発コストの削減が可能

Vue.jsはフレームワーク自体にアーキテクチャや基本機能の実装が備わっているうえに、プロジェクト固有の機能が導入されているため、実装するだけでWebアプリの開発にかかる工数を大幅に短縮できます。

また、プロジェクト固有の機能の実装においても、コンポーネントを再利用することで、短時間で実装することが可能になります。

さらに、Vue3ではコンポジションAPIという新しいAPIがサポートされ、関数単位で機能をまとめられるようになったことで、コンポジションAPIにより再利用性がますます向上し、コード実装の手間をさらに削減することができます。


保守の面においても、SFCによってコンポーネント単位でのコード管理がしやすくなるため、保守工数を削減できます。

5.コードの可読性が高い

可読性の高さが、Vue.jsが多くのプロジェクトで採用される理由の1つです。

Vue.jsでは、コンポーネントという小さな単位に分けて開発を行います。

正しく設計されたコンポーネントは、必然的に行数が短くなり可読性が高まります。


可読性の高さは、バグの特定、機能の拡張、コードの再利用など、さまざまな面でメリットになると考えられます。

1.大規模アプリの開発には向いていない

Vue.jsは小・中規模アプリ向き、React（リアクト）は大規模アプリ向きと言われています。

その理由は、コンポーネント間のデータフローの仕組みにあります。

Reactのデータフローは、親コンポーネントから子コンポーネントへの単方向のデータフローです。

単方向データフローには、アプリの規模が大きくなってもデータの流れがシンプルで管理しやすい特徴があります。


一方、Vue.jsは親コンポーネントと子コンポーネントの間で相互にデータをやりとりできる双方向のデータフローです。

双方向データフローは、設計の自由度が高く素直に設計できる反面、アプリの規模が大きくなるとデータの流れが複雑になり管理が大変になってしまいます。

そのため、Vue.jsはReactに比べると大規模アプリ開発には向いていません。

2.モバイルアプリの開発には向いていない

Vue.jsはWebアプリの開発に使用される技術であるため、ネイティブアプリ（iOSアプリ/Androidアプリ）開発用のライブラリやツールの提供が後れている傾向があります。

しかし、Webアプリの開発が目的のプロジェクトであればまったく問題ありません。

しかし、ネイティブアプリ開発が目的の場合は、その方面のツールやライブラリが豊富な他のフレームワークを選択した方が、開発効率が上がる可能性があります。

3.ほかのライブラリを採用される可能性もある

2022年の調査結果によると、Vue.jsは3位となっています。

2位がAngularで、1位がReactになっています。


デメリットではないかもしれませんが、JavaScriptで使用されるライブラリはVue.jsよりもAngularやReactを採用することが多くあります。

メリット・デメリットを考慮した場合、大規模開発ならAngularやReactで、小規模開発ならVue.jsを採用といった感じになるかと考えられます。

Vue.jsには、インスタンスの生成〜破棄までの状態の変化（ライフサイクル）により発火する様々な関数（ライフサイクルフック）が用意されており、以下のコンポーネントの状態に応じて色々な操作ができるようになっています。

■ライフサイクルフック：説明

　・beforeCreate：インスタンス初期化時に実行されます。プロパティ（dataなど）は生成前のためアクセスできません。

　・created：インスタンス作成後に実行されます。プロパティへのアクセスが可能になります。

　・beforeMount：マウント前に実行されます。この時点ではDOM要素にはアクセスできず、ディレクティブなども実行前になります。

　・mounted：マウント後に実行されます。この時点でDOM要素へのアクセスが可能になります。ただし、全ての子コンポーネントがマウントされていることは保証されていません。

　・beforeUpdate：データが変更される時、DOM更新前に実行されます。例）v-ifで要素を消した場合

　・update：DOM更新後に実行されます。ただし、全ての子コンポーネントも再レンダリングが完了していることは保証されていません。

　・beforeDestroy：Vueインスタンスが破棄される直前に実行されます。この時点でプロパティへのアクセスが可能になります。

　・destroyed：インスタンスが破棄された後に実行されます。この時点からプロパティへのアクセスができません。