jQueryとは｜このカテゴリで分かること
jQueryは、DOM操作やイベント処理、Ajax通信を短いコードで書けるようにするJavaScriptライブラリで、既存のWebサイトやWordPressのテーマでは今も多く使われています。このカテゴリでは、jQueryセレクタ、document ready、on() によるイベント登録、イベント委譲、$.ajax と fetch の比較、slideDown などのアニメーション、フォームのバリデーション、素のJavaScriptへの移行、$(this) と each()、data()、jQuery 3 の変更点の11本を扱います。既存サイトの保守や修正でjQueryに触れる機会のあるコーダーと、これから移行を考えている人を想定しています。
jQueryは新規開発では選ばれる機会が減りましたが、既存コードを読み書きする力はまだ実務で求められます。そのため、このカテゴリは「読んで直せる」ことと、「無理なく素のJavaScriptへ移れる」ことの2つを目標にしています。
読む順番（おすすめの順路）
- jQueryセレクタとは｜一覧・書き方と:firstなど非推奨の注意点 … 要素の取得方法。非推奨のセレクタも含めて確認します。
- $(document).ready()とDOMContentLoadedの違い｜書き方と3.0の変更 … 初期化のタイミングと、3.0での変更を押さえます。
- jQuery on()の使い方｜イベント登録・off()・名前空間・one() … イベント登録の基本と、解除・名前空間です。
- jQueryのイベント委譲｜on()で動的要素にクリックを効かせる方法 … 動的に追加する要素へのイベントの付け方です。
- jQueryの$(this)とeach()の使い方｜thisの正体とアロー関数の落とし穴 … $(this) の正体と、アロー関数との相性の注意点です。
- jQueryのdata()とdata属性｜attr()との違いとキャッシュの落とし穴 … data() と attr() の違い、キャッシュの落とし穴です。
- jQuery slideDown・slideToggleの使い方｜アコーディオンの作り方 … アコーディオンなどの定番アニメーションです。
- jQueryでフォームのバリデーション｜必須・形式チェックの実装例 … フォームの入力チェックの実装例です。
- jQuery $.ajaxとfetchの比較｜書き方・エラー処理・移行の注意点 … 通信処理を fetch と比べて、移行の判断材料にします。
- jQuery 3の変更点と非推奨API一覧｜削除・置き換え先と移行手順 … 古いコードを更新するときの参照用です。
- jQueryから素のJavaScriptへ移行｜書き換え対応表と注意点 … 仕上げに、素のJavaScriptへの書き換えを確認します。
押さえておきたいポイント（リサーチ）
jQuery 公式ドキュメントで確認できる要点です。
- on() の第2引数にセレクターを渡すと「委譲イベント」になり、ハンドラーは束縛した要素ではなく、セレクターに一致する子孫要素のイベントで呼ばれます。あとから追加された要素にも効き、多数の要素にハンドラーを付けるより親にまとめて付ける方が効率的とされています（公式の例ではテーブルの 1000 行に対し tbody に 1 つ）。
- jQuery 3.0 では、document ready のハンドラーが常に非同期で実行されるようになりました。
- 3.0 では、.size() が削除され .length に、.andSelf() が .addBack() に置き換わりました。.load()・.unload()・.error() の短縮形も削除され、.on() を使います。
- Deferred が Promises/A+ に対応し、.then() と .catch() を使えます。
- 公式は、段階的に更新するため jQuery Migrate プラグインを使う手順を案内しています。
最新バージョンや削除の状況は変わりうるため、更新前に公式のアップグレードガイドを確認してください。
よくある疑問
Q. jQueryはもう使われていませんか。
A. 新規では減っていますが、既存サイトでは多く残っています。移行の判断は jQueryから素のJavaScriptへ移行｜書き換え対応表と注意点 を参照してください。
Q. 動的に追加した要素でクリックが効きません。
A. 委譲イベントで解決できます。jQueryのイベント委譲｜on()で動的要素にクリックを効かせる方法 に手順があります。
Q. $.ajax と fetch はどちらを使いますか。
A. 新規なら fetch が基本ですが、既存コードとの整合も考慮します。比較は jQuery $.ajaxとfetchの比較｜書き方・エラー処理・移行の注意点 にあります。
Q. jQueryのバージョンを上げたら動かなくなりました。
A. 3.0 で削除・変更された API が原因の可能性があります。一覧は jQuery 3の変更点と非推奨API一覧｜削除・置き換え先と移行手順 です。
編集部の見解
jQueryは「古いから学ぶ価値がない」とも「便利だからずっと使えばよい」とも言い切れないと考えます。現場で求められるのは、既存のjQueryコードを正しく読み、安全に直す力と、必要になったときに素のJavaScriptへ置き換える力の両方です。移行は一度にすべてを書き換えるより、触れる機会のある部分から少しずつ進める方が、事故が少ないでしょう。まずはイベント委譲と ajax の2つを素のJavaScriptで書けるようにするのが、効果の大きい最初の一歩だと思います。バージョンを上げる前には、必ずバックアップと動作確認の手順を用意することをおすすめします。
