結論から言うと、jQueryを新しく学ぶ必要はありません。ただし読めると得をします。この記事では「なぜ学ばなくていいのか」と「それでも読めたほうがいい理由」を、具体的な対応関係で整理します。
jQueryは何を解決していたのか
2010年前後のWeb制作には、2つの大きな面倒がありました。
- ブラウザごとに書き方が違った——同じことをするのに、Internet Explorerと他のブラウザで別のコードを書き分ける必要がありました
- 素のJavaScriptの記述が長かった——要素をまとめて取ってきて全部に処理する、といった当たり前のことに何行もかかりました
jQueryはこの2つを1つの短い書き方に包んでくれました。だから当時は「入れない理由がない」道具でした。
その2つは、もう解決している
今はブラウザ側が同じ書き方をそろえ、素のJavaScriptにも短い書き方が入りました。よく使うものの対応を並べます。
| jQuery | 今の素のJavaScript |
|---|---|
$('.card') | document.querySelectorAll('.card') |
$('#title') | document.querySelector('#title') |
.text('こんにちは') | .textContent = 'こんにちは' |
.html('<b>太字</b>') | .innerHTML = '<b>太字</b>' |
.addClass('on') | .classList.add('on') |
.removeClass('on') | .classList.remove('on') |
.toggleClass('on') | .classList.toggle('on') |
.on('click', fn) | .addEventListener('click', fn) |
.attr('href', url) | .setAttribute('href', url) |
.css('color', 'red') | .style.color = 'red' |
$.ajax(...) | fetch(...) |
$(document).ready(fn) | scriptを</body>の直前に置く（またはdefer） |
見てのとおり、やっていることは同じです。名前が違うだけで、覚え直すほどの新しい概念はありません。
コースWebアニメーションCSSで動きをつける方法は、Webアニメーションのコースへそれでも読めたほうがいい理由
「新規では選ばれない」道具ですが、すでに公開されているサイトでは動き続けています。あなたが出会う可能性が高いのはこの3つです。
- WordPressのテーマ・プラグイン——WordPress本体がjQueryを同梱しているため、今も広く使われています
- 数年前に作られたサイトの改修——「ちょっと直してほしい」という仕事は、たいてい既存のコードの上に乗ります
- ネット上の解説記事——古い記事はjQuery前提で書かれています。読めれば「これは素のJSでこう書けばいい」と読み替えられます
つまり読む力は保守で効き、書く力は要らない。この非対称を知っておくと、学習時間を無駄にしません。
べんりワザjQueryの読み方$()やメソッドチェーンの読み方は、こちらの記事にまとめましたつまずきやすい2つのエラー
既存サイトを触るときに出会いやすいものだけ、先に知っておくと落ち着けます。
$ is not defined
jQuery本体が読みこまれる前に、jQueryを使うコードが動いたという意味です。scriptタグの順番を直します。
<!-- 本体を先に -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 自分のコードは後ろに -->
<script src="script.js"></script>WordPressの場合は、タグの順番ではなく依存の宣言で順番を決めます。
べんりワザCSSとJavaScriptの正しい読みこみ方（wp_enqueue）WordPressでのCSS・JavaScriptの正しい読みこみ方（依存の指定つき）WordPressで$が使えない
WordPressは他のライブラリと衝突しないよう、$という別名を無効にした状態でjQueryを読みこみます。そのため$('.card')と書くとエラーになります。次の形で囲むと、その中だけで$が使えます。
jQuery(function ($) {
// この中では $ が使える
$('.card').addClass('is-ready');
});これは「jQueryが壊れている」のではなくWordPressの仕様です。既存テーマのコードがこの形で書かれているのを見たら、そういう理由だと思ってください。
使う・使わないの判断
| 場面 | どうする |
|---|---|
| これから学ぶ | 素のJavaScript。jQueryは飛ばしていい |
| 新しくサイトを作る | 素のJavaScript。入れる理由がない |
| 既存サイトの改修 | そのサイトに合わせる。すでに入っているなら素直に使う |
| WordPressのテーマを触る | 既存コードがjQueryなら合わせる。新規なら素のJSでよい |
| 古い解説記事を参考にする | 読み替えて素のJSで書く |
いちばん避けたいのは、すでにjQueryで書かれているサイトに素のJavaScriptを混ぜて、書き方が2種類になることです。1つのファイルの中では、そのファイルの流儀にそろえるのが読みやすさの基本です。
まとめ
- jQueryが解決していたブラウザ差と記述の長さは、もう解決している
- だから新しく学ぶ必要はない。学ぶのは素のJavaScript
- ただしWordPressや既存サイトでは動き続けている——読めると保守で困らない
$ is not definedは読みこみ順、WordPressで$が使えないのは仕様- 既存サイトを触るときは、そのファイルの流儀にそろえる
古い道具を知っていることは、遠回りではありません。読めるだけで、触れる仕事の範囲が確実に広がります。