コンテンツにスキップ

JQuery

出典: フリー教科書『ウィキブックス（Wikibooks）』

jQuery（ジェイクエリー）は、JavaScriptライブラリの一つで、HTMLドキュメントの操作、イベント処理、アニメーション、そしてAjax通信を簡単に実装できるツールです。2006年にJohn ResigによってリリースされたJQueryは、Web開発を大幅に効率化します。

jQueryの歴史

[編集]

誕生と初期の発展

[編集]
  • 2006年8月: John Resigが最初のバージョンのjQueryを発表
  • 当時、ブラウザ間の互換性の問題が深刻で、クロスブラウザ対応が非常に困難だった
  • JavaScriptの複雑な操作を簡素化することを目的として開発

主要な進化の時期

[編集]
  • 2007-2009年: コミュニティの急速な成長と普及
  • 2010年: jQuery 1.4リリース - 大幅な機能追加と性能改善
  • 2011年: jQuery Foundation設立
  • 2013年: jQuery 2.0リリース - IE 6/7/8のサポート廃止

モダンWeb開発における位置づけ

[編集]
  • 2010年代中盤: Single Page Application (SPA)フレームワークの台頭
  • React、Vue.jsなどの登場により、jQueryの使用頻度が徐々に減少
  • しかし、多くの既存プロジェクトでは依然として重要な役割を果たす

最近の動向

[編集]
  • 2020年以降: メンテナンスモードへ移行
  • コアチームによる新機能の追加よりも、既存の安定性維持に注力
  • Web標準の進化により、多くの機能がネイティブJavaScriptで実現可能に

インストール方法

[編集]

jQuery を使用するには、以下の方法があります：

CDNを利用する方法

[編集]

モダンブラウザと下位互換性を考慮したCDN読み込み方法： 

<!-- モジュール対応ブラウザ向け -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" type="module"></script>
<!-- 非モジュール対応ブラウザ向け -->
<script nomodule src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

解説：

  • `type="module"`: モダンブラウザ向けのモジュールスクリプト
  • `nomodule`: 古いブラウザ向けのフォールバックスクリプト
  • 最新のブラウザは最初のスクリプトを、古いブラウザは2番目のスクリプトを読み込む

ローカルファイルを使用する方法

[編集]
  1. jQuery公式サイトからダウンロード
  2. プロジェクトディレクトリに配置
  3. HTMLファイルでリンク
<script src="path/to/jquery-3.7.1.min.js"></script>

基本的な文法

[編集]

jQuery の基本的な文法は以下のようになります： 

$(セレクタ).アクション();

セレクタの例

[編集]
  • $("p"): すべての段落タグ
  • $("#myId"): 特定のID
  • $(".myClass"): 特定のクラス

DOM操作

[編集]

要素の追加と削除

[編集]
  • .append(): 要素の末尾に追加
  • .prepend(): 要素の先頭に追加
  • .remove(): 要素を削除
  • .empty(): 要素の中身を削除

イベント処理

[編集]

主要なイベントメソッド

[編集]
  • .click(): クリックイベント
  • .hover(): マウスオーバー/アウトイベント
  • .submit(): フォーム送信イベント
  • .keypress(): キー入力イベント

イベント処理の例

[編集]
$("#myButton").click(() => {
    alert("ボタンがクリックされました！");
});

Ajaxリクエスト

[編集]

基本的なAjax通信

[編集]
$.ajax({
    url: "https://api.example.com/data",
    method: "GET",
    success: (response) => {
        console.log(response);
    },
    error: (xhr, status, error) => {
        console.error("エラーが発生しました");
    }
});

アニメーション

[編集]

要素の表示・非表示

[編集]
  • .show(): 要素を表示
  • .hide(): 要素を非表示
  • .toggle(): 表示/非表示を切り替え

カスタムアニメーション

[編集]
$("#myElement").animate({
    opacity: 0.5,
    left: "250px"
}, 1000);

プラグイン

[編集]

jQuery には豊富なプラグインがあり、機能を拡張できます。代表的なプラグインには以下があります：

  • Validate: フォーム入力検証
  • DataTables: テーブルデータの高度な操作
  • Slick: レスポンシブなスライダー

注意点

[編集]
  • モダンなWeb開発では、純粋なJavaScriptやReact、Vueなどのフレームワークが好まれる傾向があります
  • パフォーマンスに注意が必要
  • 最新バージョンの jQuery を使用することを推奨

jQueryが国際規格に与えた影響

[編集]

DOM操作の標準化

[編集]
jQueryは、ブラウザ間の一貫したDOM操作を可能にした先駆者
  • .addClass(), .removeClass() などのメソッドは、後のWeb標準に大きな影響を与えた
  • 現代のネイティブJavaScriptに classList APIとして取り入れられた多くの概念がjQueryに由来

セレクタAPI

[編集]
jQueryのセレクタエンジン（Sizzle）は、CSS3セレクタの実装を大幅に前倒しで実現
  • document.querySelectorAll() メソッドの仕様策定に間接的に貢献
  • ブラウザベンダーがネイティブでより柔軟なセレクタ選択を実装する契機となった

Ajax通信の標準化

[編集]
  • XMLHttpRequestの複雑な実装を簡略化
  • クロスブラウザ対応のAjax通信パターンを確立
  • Fetch API仕様策定の土台を提供
  • 非同期通信の抽象化モデルを業界に提示

イベント処理モデル

[編集]
  • .on() メソッドによるイベント登録方法が業界標準に
  • イベント委譲（Event Delegation）の概念を広く普及
  • HTML5のイベントモデル設計に影響を与えた

ブラウザ間の互換性

[編集]
  • 異なるブラウザ間の差異を吸収する抽象化レイヤーを提供
  • ベンダープレフィックスの問題を解決するモデルを示す
  • CSS3とJavaScriptの互換性における業界の指針となった

Web標準化団体への貢献

[編集]
  • W3Cのワーキンググループに多くのjQuery開発者が参加
  • ECMAScriptの仕様策定に間接的に貢献
  • Web標準の進化に開発者コミュニティの視点を反映

長期的な影響

[編集]
  • モダンJavaScriptの設計思想に大きな影響
  • 簡潔で読みやすいAPIデザインの模範
  • オープンソースコミュニティによる技術革新のモデルケース

Prototype.js との比較

[編集]

背景

[編集]

Prototype.jsとjQueryは、どちらも2006年前後に登場した代表的なJavaScriptライブラリであり、当時のWeb開発に大きな革命をもたらしました。両ライブラリは異なるアプローチでJavaScriptの開発を簡素化しようとしました。

設計思想の比較

[編集]
jQuery
チェーン可能なメソッド呼び出し
軽量で拡張性が高い
プラグインアーキテクチャが柔軟
Prototype.js
ネイティブオブジェクトの拡張
クラスベースのオブジェクト指向プログラミングをサポート
より明示的なオブジェクト操作

コード例で見る違い

[編集]
要素選択
[編集]
jQuery
$(".myClass").hide();
Prototype.js
$$(".myClass").each(Element.hide);
Ajax通信
[編集]
jQuery
$.ajax({
    url: "/data",
    success: (response) => { /* 処理 */ }
});
Prototype.js
new Ajax.Request("/data", {
    onSuccess: (response) => { /* 処理 */ }
});

歴史的な影響

[編集]
Prototype.jsは、Ruby on Railsフレームワークと密接に関連
jQueryは、より汎用的で拡張性の高いデザイン
  • 最終的に、jQueryがより広く採用され、Web開発の標準となる

現在の状況

[編集]
Prototype.jsは、現在ほとんど使用されていない
jQueryは依然として多くの既存プロジェクトで使用
  • モダンなフレームワーク（React, Vue, Angular）が主流に

技術的な特徴の詳細比較

[編集]
jQuery と Prototype.js の比較
特徴 jQuery Prototype.js
拡張方法 プラグインベース ネイティブオブジェクト拡張
クラス操作 .addClass(), .removeClass() Element.addClassName(), Element.removeClassName()
イベント処理 .on(), .bind() Event.observe()
セレクタ CSS3セレクタ 独自のセレクタ
パフォーマンス 高速 やや低速

参考リソース

[編集]
"https://ja.wikibooks.org/w/index.php?title=JQuery&oldid=264952" より作成