jQueryとVue.jsを比較

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

「jQuery」と「Vue.js」は、JavaScriptフレームワーク(ライブラリ)です。

■「jQuery」とは

jQueryは、Webブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。

Webページに少ないコード量で「イベント処理」「アニメーション」「Ajax」などの機能を簡単に追加できます。jQuery内にある機能を呼び出すことにより、複雑な動作でも簡単に実装できます。

■「Vue.js」とは

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

シンプルであるため機能は少なめですが、学習コストが低いため導入しやすいメリットがあります。拡張することで高機能なシングルページアプリケーションも構築できます。

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

「人気」比較

■jQuery

jQueryはこれまでに登場したJavaScriptライブラリの中で、一番利用されているライブラリです。

近年、他のライブラリの台頭により相対的に人気が落ちていますが、豊富な資産を活用できるため有力な選択肢となります。

■Vue.js

Vue.jsは、「シンプルさ」と「学習コストが低い」点が受け入れられ、急速に普及中で人気が急上昇しています。

「ユースケース」比較

■jQuery

jQueryはセレクタ操作が得意なライブラリで、シンプルなページに低コストで導入できます。

「既にHTMLが存在している状態にjQueryを追加する」などの用途に適しています。

■Vue.js

Vue.jsは「双方向データバインディング」「高速レンダリング」を得意としているため、「データと表示を同期させる処理」を簡単に実装できます。

そのため、「インタラクティブページ」や「状態管理を行うページ」などに向いており、「スキャフォールディング(Scaffolding)」「ルーティング」「状態管理」「アニメーション」などの各種機能を実装できます。

 

参考元サイト

目次

「jQuery」基本情報
■概要
■基本説明
・(参考)「JavaScript」とは
・「jQuery」とは
■経緯
・jQuery登場前
・jQuery登場
■採用事例

主な特徴
■リッチUIを実装
・概要
・リッチ実装例
・操作対象「セレクタ」
・処理内容「メソッド」
・実行タイミング「イベント」
■少ないコード量で記述できる
・Ajax
・jQuery API
■JavaScript言語拡張を行わない
■軽量フットプリント
■クロスブラウザコンテンツ
・サポート対象ブラウザ
・ブラウザ固有コードについて
■オフィシャルドキュメント

jQuery公式プラグイン
■キュレーションセット「jQuery UI」
・概要
・オフィシャルサイト
■モバイル用UI「jQuery Mobile」
・概要
・オフィシャルサイト
■CSSセレクタエンジン「Sizzle」
・概要
・オフィシャルサイト
■ユニットテストフレームワーク「QUnit」
・概要
・オフィシャルサイト
■その他外部プラグイン
・概要
・オフィシャルサイト

補足情報
■同様製品
■オフィシャルサイト
・オフィシャルサイト
・ライセンス情報
・ダウンロード

「jQuery」基本情報

■概要

jQuery(ジェイクエリー)とは、軽量JavaScriptライブラリです。Webページに少ないコード量でリッチ表現を組み込めます。

■基本説明

(参考)「JavaScript」とは

JavaScriptとは、プロトタイプベースのオブジェクト指向スクリプト言語です。

主に、アプリケーション開発/Webブラウザ実装などに使用されており、多くのプログラマーが利用しているプログラミング言語です。

「jQuery」とは

jQueryは、JavaScriptのようなプログラミング言語ではなく、JavaScript用ライブラリ(プログラム集合体)です。jQueryの中身はJavaScriptで構成されたプログラムです。

jQueryは、Webブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリです。Webページに「イベント処理」「アニメーション」「Ajax」などの機能を簡単に追加できます。

jQueryは、Webブラウザでの動作をターゲットとして設計されているため、JavaScriptでの実装と比較して、より快適かつ動的に、WebページにリッチUIを埋め込めます。jQuery内にある機能を呼び出すことにより、複雑な動作でも簡単に実装できます。

■経緯

・2006年、初版リリース---John Resig氏によって開発/公開

jQuery登場前

jQuery登場前は、Webページでリッチ表現を行うためには数十行も記述する必要がありました。

また、各ブラウザで仕様/動作が異なるため、開発者は常にブラウザ互換についても考えながらコードを書く必要がありました。

jQuery登場

jQueryは、比較的に後発に登場したJavaScript用ライブラリですが、それまでの手間を大幅に削減できる有用性により、「Web開発革命」「JavaScriptライブラリのデファクトスタンダード」と言われるほどの人気を得ました。

■採用事例

jQueryは、多くの世界的企業/コミュニティが支持しています。
・Microsoft---「Visual Studio」ツールに採用
・IBM
・Amazon
・Dell
・Twitter

Ruby用開発フレームワーク「Ruby on Rails」は、バージョン3.1から、標準JavaScriptライブラリとしてjQueryを採用しています。

主な特徴

■リッチUIを実装

概要

jQueryを使用すると、HTMLやCSSでは実現できないような、Webページに動きをつけるリッチUIを実装できます。

CSSでも簡単なアニメーションを作成できますが、レイアウト用の仕組みであるため複雑な機能を実装するのは難しい面があります。

jQueryはリッチUIを実装するために設計されているため、簡単なコーディングで実装できます。

リッチ実装例

jQueryを利用することで、各種効果/アニメーション/ユーザーインターフェース要素など、次のようなリッチUIを実装できます。
・時間によってページの色を変更
・クリックによる画像入れ替え
・フォームの中の要素を動的に変更
・ユーザー動作によりCSSを変更してレイアウトを変える
・マウスオーバーによるアニメーション効果
・スクロール量による見た目の変更
・テキストボックスの色を変更 など

操作対象「セレクタ」

「セレクタ」とは「操作対象」を指します。

例えば、色を変更したい場合に「どの部分の色を変えるか?」について指定します。複数指定も可能で、基本的にCSSにおけるセレクタと同様の概念です。

セレクタ対象として以下のようなものを選択できます。
・idセレクタ
・classセレクタ
・要素セレクタ
・子孫セレクタ など

「CSS3セレクタ」をサポートしており、スタイルプロパティの操作だけでなく、要素の検索も行えます。

処理内容「メソッド」

次に、「メソッド」として処理内容を記述します。

セレクタに対して「.(ドット)」で接続してメソッド指定を繰り返すことにより、数珠つなぎで処理を記述できます。UNIXシェルで連続して処理を行なうパイプ処理と同様の記述を行えます。

jQueryでは、「セレクタ」と「メソッド」により、「何をどうするか」という形でコードを記述します。

実行タイミング「イベント」

実行タイミング選択を「イベント」と呼びます。

イベントにはさまざまな種類が用意されています。
・クリックイベント
・マウスオーバーイベント
・マウスアウトイベント など

設定したイベントが発生すると、セレクタに対するメソッドが実行されます。

■少ないコード量で記述できる

jQueryを利用すると、JavaScriptでは数十行かかる処理を1つの命令文のみで実行できます。jQueryのロゴに「write less, do more」と表記されている通りに、少ないコード量でリッチなUIを実現できます。

主なメリット
・プログラミングに精通していなくても利用しやすい
・全体的なコード量が激減するため効率的 など

Ajax

jQueryの功績とされるものとして「Ajaxを簡潔かつ容易に記述できる」という点があります。

Ajaxとは「Asynchronous Javascript+XML」の略称です。JavaScript組み込みクラス「XMLHttpRequest」を利用した非同期通信を利用することで、Webブラウザ上で既存の枠組みにとらわれないインターフェースを実現するための技術です。

以前は「ページ遷移を行わずにサーバとクライアント間の通信を行う」処理のためには複雑なコーディングが必要でしたが、jQueryにより簡単に実装できるようになりました。

それに伴い、SPA(シングルページアプリケーション)構築も容易になっています。

jQuery API

jQueryには豊富なAPIが用意されています。

→jQuery →jQuery API

■JavaScript言語拡張を行わない

jQueryはJavaScriptに対する独自言語拡張を行っていないため、他のJavaScriptライブラリで発生しがちな思わぬ誤動作の発生を抑止できます。

■軽量フットプリント

jQuery本体はコンパクトサイズ(30KB程度)であるため軽快に動作します。

■クロスブラウザコンテンツ

jQueryは、各ブラウザが提供しているDOM(Document Object Model)などのAPIを1つのメソッドにまとめることで、ブラウザ間の差異を吸収し、クロスブラウザコンテンツを実現できます。

サポートしているブラウザであれば「どのブラウザでも」「どのPC/タブレット/スマートフォン」でも同様に動作します。
※一部最適化が必要な場合もあります。

サポート対象ブラウザ

jQueryは以下のブラウザをサポートしています。

デスクトップ
・Chrome
・Edge
・Firefox
・Internet Explorer
・Safari
・Opera

モバイル
・Android---ブラウザ
・iOS---Safari

→jQuery →Browser Support

ブラウザ固有コードについて

jQueryを使用しているWebページにおいてブラウザ固有の動作を利用するコードがある場合、他のブラウザでは動作しない可能性があります。

「ブラウザを完全にサポートするためにはテストが不可欠」とされています。

■オフィシャルドキュメント

オフィシャルサイトでは、初めてjQueryに接するユーザー用のチュートリアルドキュメントとして「ラーニングセンター」が用意されています。

jQueryを使用してWebサイトやアプリケーションを構築する方法として、「基本的説明」「一般的な問題の回避策」「ベストプラクティス」などについて理解を深めることができます。

→jQuery →Learning Center

jQuery公式プラグイン

jQueryには、jQuery本体「jQuery Core」の他に、jQuery公式プラグインが用意されています。

■キュレーションセット「jQuery UI」

概要

「jQuery UI」は、ユーザーインターフェースの「インタラクション」「エフェクト」「ウィジェット」「テーマ」などのキュレーションセットです。jQuery JavaScript Libraryの上に構築されています。

相互作用や相互効果などについて効果的に動作するように設計されています。

オフィシャルサイト

→jQuery UI

■モバイル用UI「jQuery Mobile」

概要

「jQuery Mobile」は、特にスマートフォン/タブレットなどのモバイルデバイスで、応答性の高いWebサイト(Webアプリケーション)を作成するために設計されたHTML5ベースのユーザーインターフェースシステムです。

タッチ操作に最適化されたWebページを作成できます。

オフィシャルサイト

→jQuery Mobile

■CSSセレクタエンジン「Sizzle」

概要

「Sizzle」は、ホストライブラリに簡単にドロップできるように設計されたJavaScriptのCSSセレクタエンジンです。

ライブラリに依存しないスタンドアロン動作が可能で、イベント委任で最適なパフォーマンスが得られるように設計されています。

オフィシャルサイト

→Sizzle(Sizzle JavaScript Selector Library)

■ユニットテストフレームワーク「QUnit」

概要

「QUnit」は、パワフルで使いやすいJavaScriptユニットテストフレームワークです。

「jQuery」「jQuery UI」「jQuery Mobile」の各プロジェクトで使用されており、ジェネリックJavaScriptコードをテストできます。

オフィシャルサイト

→QUnit

■その他外部プラグイン

概要

上記公式プラグインの他に、豊富な外部プラグインを利用できます。

オフィシャルサイト

→jQuery →The jQuery Plugin Registry

補足情報

■同様製品

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

オープンソース製品:「React」「Vue.js」「Dojo Toolkit」など。

■オフィシャルサイト

オフィシャルサイト

→jQuery

ライセンス情報

jQueryのライセンスは「MIT License」です。

詳細について、こちらを参照ください。
→jQuery →License

ダウンロード

→jQuery →Downloading jQuery

 

参考元サイト

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


「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 →インストール

 

参考元サイト

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