こんにちは、かつコーチです。
「jQueryって今から学んでも意味あるの？」と聞かれることがよくあります。
新しい現場ではReactやVue.jsが主流ですし、「もう古い技術なのでは」と不安になる気持ちはよく分かります。
この記事では、jQueryとは何かという基本から、2026年の今でも現場で使われ続けている理由、そして実際にインストールして使い始める方法までを解説します。
読み終える頃には、「jQueryを学ぶ意味」が自分の中ではっきり言語化できるようになっているはずです。
jQueryとは？
素のJavaScriptを短く書けるライブラリ
jQuery（ジェイクエリー）とは、JavaScriptの処理を短く簡単に書けるようにするライブラリ（他人が作った便利な機能をまとめたコード集）です。
2006年に登場し、10年以上にわたって世界中のWebサイトで使われてきました。
例えば「ボタンをクリックしたら要素を非表示にする」という処理を、素のJavaScriptとjQueryで比べてみます。
// 素のJavaScript
document.querySelector('#btn').addEventListener('click', function () {
document.querySelector('#box').style.display = 'none';
});
// jQuery
$('#btn').on('click', function () {
$('#box').hide();
});
同じ動きをする処理ですが、jQueryの方が短く直感的に書けています。
これがjQueryの一番の魅力です。
なぜ「$」という記号を使うのか
jQueryのコードには必ず $ という記号が出てきます。
これは jQuery というグローバル関数（どこからでも呼び出せる関数）のエイリアス（別名・短縮形）です。
つまり $('#btn') と jQuery('#btn') はまったく同じ意味です。
タイプ数を減らすために、慣習的に $ が使われています。
jQueryが2026年でも使われる理由
レガシー案件・保守案件での需要が根強い
新規開発ではReact・Vueが優勢ですが、実務では「すでに動いているシステムの保守・改修」の案件が数多く存在します。
長年運用されてきたWordPressサイトや業務システムには、jQueryで書かれたコードが今も大量に残っています。
こうした既存資産を触るには、jQueryが読める・書けることが前提になります。
新しい技術だけでなく、こうした「枯れた技術」を扱えるエンジニアの需要は、フリーランス・副業案件でも根強く存在します。
WordPress案件との相性の良さ
WordPressのコア機能や多くのプラグイン・テーマは、内部でjQueryを利用しています。
WordPressサイトの制作・カスタマイズ案件を受けるなら、jQueryの知識はほぼ必須と言ってよいでしょう。
「HTML/CSSは書けるけどJavaScriptは自信がない」という人にとって、jQueryは実務に直結する学習コスパの良い選択肢です。
学習コストの低さ
素のJavaScriptで複雑なDOM操作を書こうとすると、初心者にはハードルが高く感じられます。
jQueryは直感的なメソッド名（hide()、show()、addClass()など）が用意されているため、少ない学習量で「動くもの」が作れます。
この「すぐ動く成功体験」が得られやすい点も、初心者に選ばれ続けている理由です。
jQueryのインストール方法
jQueryを使い始める方法は、大きく分けて2種類あります。
手順1：CDNを使う方法（一番手軽）
CDN（Content Delivery Network、インターネット上に置かれたファイル配信の仕組み）を使えば、ダウンロード不要でjQueryを利用できます。
HTMLの <head> または </body> の直前に、以下のタグを1行追加するだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery動作確認</title>
</head>
<body>
<button id="btn">クリックしてね</button>
<p id="box">この文字が消えます</p>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('#btn').on('click', function () {
$('#box').fadeOut();
});
</script>
</body>
</html>
このファイルをブラウザで開いてボタンを押すと、テキストがふわっと消えるはずです。
CDN方式は設定が不要なので、学習中や小規模なサイトでの利用に向いています。
手順2：npmでインストールする方法（ビルド環境がある場合）
Webpackやvite等のビルドツールを使っているプロジェクトでは、npm経由でインストールするのが一般的です。
npm install jquery
インストール後は、JavaScriptファイル内で import して使います。
import $ from 'jquery';
$(function () {
$('#btn').on('click', function () {
$('#box').fadeOut();
});
});
npm経由の場合は、他のライブラリと組み合わせたり、バージョン管理をしっかり行いたい中規模以上のプロジェクトに向いています。
よくあるつまずきポイント・エラー対処
「$ is not defined」エラー
jQueryを学び始めたばかりの頃、私は真っ先にこのエラーに遭遇しました。
Uncaught ReferenceError: $ is not defined
原因を調べてみると、jQuery本体を読み込む <script> タグより先に、自分の書いたコードが実行されていたことが分かりました。
❌ Before（jQuery本体より先に自分のコードを読み込んでいる）
<script src="my-script.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
✅ After（jQuery本体を先に読み込む）
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="my-script.js"></script>
JavaScriptは基本的に上から順番に読み込まれるため、jQuery本体が読み込まれる前に $ を使おうとするとエラーになります。
<script> タグの順番は、私が最初につまずいた原因なので、皆さんもぜひ確認してみてください。
まとめ
この記事のポイント
- jQueryはJavaScriptを短く簡単に書けるライブラリである
- 新規開発ではReact/Vueが主流だが、レガシー保守・WordPress案件では今も現役である
- 導入方法はCDN（手軽）とnpm（ビルド環境向け）の2種類がある
- 「$ is not defined」エラーは、
<script>タグの読み込み順序を疑うとよい
次に読むべき記事
jQueryの最新動向が気になる方は、次の記事「jQuery 4.0の変更点：導入前に知っておきたいこと」もあわせてご覧ください。
基本文法から学びたい方は、「セレクタの書き方：$()の基本とCSSセレクタとの違い」がおすすめです。
jQueryをもっと学びたい人へ
体系的に手を動かしながら学ぶなら、こちらがお薦めです。
私自身もこちらで学びました。
より深く学びたい人はこちらがお薦めです。
もうjQueryは古いと思っている方も多いかもしれませんが、Web制作をやる上では欠かせないスキルですし、初学者にとってはjQueryはとてもわかりやすいです。
こちらで学んでからJavaScriptを学ぶとスッキリすると思います。
