AngularJSとVue.jsを比較

    「AngularJS」と「Vue.js」の概要

    「AngularJS」と「Vue.js」は、JavaScriptアプリケーションフレームワークです。

    ■「AngularJS」とは

    AngularJSは、Googleとコミュニティにより開発されているオープンソースJavaScriptアプリケーションフレームワークです。

    ブラウザ上で動作するWebアプリケーション開発にMVCアーキテクチャを取り入れることを目的としています。

    テンプレート言語としてHTMLを使用して、アプリケーションコンポーネントを分かりやすく簡潔にするためにHTML文法を拡張します。「データバインディング」と「DI(依存注入)」を通して大部分の余計なコードを排除でき、複雑なWebアプリのフロントエンドも効率よくシンプルに実装できます。

    ■「Vue.js」とは

    Vue.jsは、シンプルで拡張性に優れているJavaScriptフレームワークです。ユーザーインターフェース構築に利用でき、学習コストが低いため導入しやすいメリットがあります。

    Vue.jsの特徴として「リアクティブデータバインディング」「再利用性の高いコンポーネント」「仮想DOMによる高速レンダリング」「シンプルAPI」などがあります。

    習得コスト比較

    ■AngularJS

    AngularJSは高機能であるため、Vue.jsと比較すると習得に時間がかかる傾向にあります。

    ■Vue.js

    Vue.jsは、APIとアーキテクチャの両方の観点から、AngularJSよりもシンプルに利用できます。

    少ない学習コストで複雑なアプリケーションを構築できるようになります。

    柔軟性比較

    ■AngularJS

    AngularJSは「開発するアプリケーションはどのような構成になるべきか」という点について強い思想が反映されるため柔軟性は低くなります。

    ■Vue.js

    Vue.jsはモジュラーアーキテクチャにより、アプリケーションを柔軟に構築できます。

    一方で、柔軟すぎるために規約が必要となるケースもあります。

    データバインディング比較

    ■AngularJS

    AngularJSは「スコープ間による双方向バインディング」を使用しています。

    ■Vue.js

    Vue.jsはコンポーネント間では「一方向のみのデータフロー」を使用しています。

     

    参考元サイト

    ※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。

    基本情報

    概要

    AngularJS(アンギュラージェイエス)とは、Googleとコミュニティにより開発されているオープンソースJavaScriptアプリケーションフレームワークです。ブラウザ上で動作するWebアプリケーション開発にMVCアーキテクチャを取り入れることを目的としています。

    基本説明

    AngularJSは、テンプレート言語としてHTMLを使用して、アプリケーションコンポーネントを分かりやすく簡潔にするためにHTML文法を拡張します。「データバインディング」と「DI(依存注入)」を通して大部分の余計なコードを排除できます。複雑なWebアプリのフロントエンドも効率よくシンプルに実装できます。

    AngularJSの思想として、『UI構築とソフトウェアコンポーネントを同時に行う際には、 命令形のコードはビジネスロジックが表現するのに優れてはいるものの、 命令形のコードより宣言コードのほうが優れている』という信念のもとに構築されています。

    AngularJSは、クライアント側JavaScriptのコントローラでデータモデルを管理し、画面(ビュー)とリアルタイムにデータを交換するようなアプリケーションに適したフレームワークです。

    AngularJSは人気が高く、Googleが開発に携わっていることにより、安心して学習できるフレームワークです。

    得意分野/不得意分野

    AngularJSを使うと、設計/実装ルールがある程度強制されるため、それに従うことで、コード量削減や、品質の差を小さくするなど、生産性が大きく向上することが期待できます。

    AngularJSはCRUDアプリケーション構築を念頭において設計されています。マスターメンテのようなCRUD系アプリ/業務系アプリなどの、各機能が独立した画面として存在し、フォームでデータ送受信を行うようなアプリに向いているとされています。

    AngularJSは、高階層での抽象化により、アプリケーション開発を簡素化します。 ただし、抽象化は柔軟性を犠牲にするという一面もあるため、 すべてのアプリケーションがAngularJSに適しているわけではありません。

    ゲームアプリ(変化するデータが大量、速度重視)や、シングルページアプリケーション(画面遷移しないWebアプリ)は、あまり向いていないとされています。

    経緯

    2009年 初版発表

    2012年6月 バージョン1.0.0がリリース

    TOPに戻る

    主なポイント

    ■フルスタックフレームワーク
    ■HTMLテンプレート
    ■テンプレートエンジン(モデルの値をレイアウトするための機能)
    ■双方向データバインディング(モデル/ビュー間での値の変更を互いに反映させる機能)
    ■MVWパターン(MVCの派生パターン)
    ■ディレクティブ(条件分岐、繰り返し、イベント処理など、ビューで利用する定型的な機能を提供するカスタムタグ/属性)
    ■カスタムディレクティブ(再利用可能なコンポーネントと独自のマークアップ)
    ■ディープリンク(動的ページにリンクを設定)
    ■DI(依存性注入)
    ■フィルター(ビューに出力すべき値を加工する機能)
    ■ルーティング(URLに応じて適用するテンプレートを切り替え)
    ■Ajax通信機能
    ■REST志向
    ■フォームバリデーション
    ■サーバとの連携
    ■ローカライゼーション
    ■テスト環境(ユニットテスト、e2eテスト)

    TOPに戻る

    同様製品(概要情報)

    同様な機能を提供する製品として、次のようなものがあります。

    「Backbone.js」「Knockout.js」「Ember.js」など。

    TOPに戻る

    導入事例

    世界中で人気が高まっています。

    TOPに戻る

    ライセンス情報

    AngularJSのライセンスは、「MIT License」です。このライセンスに従うことを条件として、ソースコードの改変と公開が許可されています。

    TOPに戻る

    ダウンロード

    ダウンロードページ

    TOPに戻る

    ※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。


    「Vue.js」基本情報

    ■概要

    Vue.js(ビュージェイエス)とは、シンプルで拡張性に優れているJavaScriptフレームワークです。学習コストが低いため導入しやすいメリットがあります。

    ■基本説明

    Vue.jsは、ユーザーインターフェースを構築するためのJavaScriptプログレッシブフレームワークです。

    シンプルであるため機能は少なめですが、簡単にフレームワークの恩恵を受けることができます。拡張することで高機能なシングルページアプリケーションも構築できます。

    Vue.jsの特徴として「リアクティブなデータバインディング」「再利用性の高いコンポーネント」「仮想DOMによる高速レンダリング」「シンプルAPI」などがあります。

    ■経緯

    ・2014年 初版リリース

    主な特徴

    ■プログレッシブフレームワーク

    Vue.jsは全体的に非常にシンプルに設計されています。

    アプリケーションは、多くの場合、リリース後にも開発が続けられます。新機能追加/仕様変更などを繰り返すアプリケーション成長段階において、採用したフレームワークが要件に合わなくなってくるケースはよくあります。

    Vue.jsは、プログレッシブフレームワークとして、「アプリケーションの成長に適切かつ柔軟に対応できるフレームワーク」を目指して開発されています。

    大規模フレームワーク「AngularJS」の場合

    主要な大規模JavaScriptフレームワークとして「AngularJS」があります。
    →OSSxCloudNews →オープンソースのフレームワーク/AngularJSとは

    フルスタックフレームワークであるAngularJSは高生産性/高機能ですが、AngularJS独自のルールに則ってWebアプリケーションを構築するため、途中で他のフレームワークに切り替えできないデメリットになります。

    「Vue.js」の拡張型開発

    Vue.jsは、ライブラリとフルスタックフレームワークの間で徐々に拡張できるフレームワークです。AngularJSのように一枚板(モノリシック)なフレームワークとは異なり、Vue.jsは少しずつ適用していけるように設計されています。

    中核となるライブラリは view層だけに焦点を当てているため、他ライブラリや既存プロジェクトとの統合を容易に行なえます。

    他ライブラリとの組み合わせを自由に選ぶことができるため、足りない機能は他ライブラリを導入して、高機能なアプリケーションに成長させていくことが可能です。

    ■低い学習コスト

    Vue.jsは、構造がシンプルで学習コストが低いため、「HTML」「CSS」「JavaScript」の基礎を学習すれば使い始めることができます。

    詳しく解説されたドキュメントも充実しています。

    オフィシャル日本語ドキュメント

    →Vue.js →はじめに

    補足情報

    ■同様製品

    同様な機能を提供する製品として、次のようなものがあります。

    オープンソース製品:「Knockout.js」など。

    ■オフィシャルサイト

    オフィシャルサイト

    →Vue.js(The Progressive JavaScript Framework)

    ライセンス情報

    Vue.jsのライセンスは「MITライセンス」です。

    詳細について、こちらを参照ください。
    →Vue.js →Vue.js の開発を支援する

    ダウンロード

    →Vue.js →インストール

     

    参考元サイト

    ※定期的にメンテナンスを実施しておりますが、一部情報が古い場合がございます。ご了承ください。