今から学ぶならどっち？
実務で求められるJavaScriptとjQueryの使い分けと業界の需要

目的別の答え｜書くのはJavaScript、jQueryは読める

Web制作志望は「素のJavaScriptで書ける+jQueryが読める」、アプリ開発志望は「JavaScriptだけ」が答えです。

学ぶ範囲の違いはロードマップの「分岐点」の章に、職種の違いはコーダーとフロントエンドエンジニアの違いの記事にあります。

「Web制作ならjQueryから」と勧める解説も多く、入口としては成立します。当校のカリキュラムも、最初の動的サイトはjQueryで作ります。そのうえで、この記事が到達点を素のJavaScript側に置く理由は2つです。

• 読み替えが一方通行: 素のJavaScriptで書ける人は、対応表があればjQueryを読めます。逆向きは、要素が無いときの挙動などで止まります(線引きの章の後半)
• エラーを読むのはJavaScript: jQueryのコードが止まったときも、Consoleに出るのはJavaScriptのエラーです

学ぶ順番は2通りある

ルートAは、素のJavaScriptで実装まで進み、最後にjQueryの読解を足す順です。独学にはこちらを勧めます。ロードマップの「④既存コードの読解」の題材にjQueryを選べば、別枠の時間は要りません。

ルートBは、jQueryで先に動くものを作り、同じものを素のJavaScriptで書き直す順です。画面が早く動き、手応えを先に得られます。独学では書き直しが飛ばされがちなので、書き直しまでを1セットにしてください。すでにjQueryから学び始めた方は、このルートの途中にいます。

通過の判定は同じで、次章の対訳3例のjQuery側だけを見て、素のJavaScript側を自分で書けるかです。Reactへ先に進むか迷う方は、ロードマップのパターン3を読んでください。

同じ処理を並べて読む｜素のJavaScriptとjQueryの対訳3例

Web制作でよく書く3つの処理を並べると、3例ともjQueryのほうが2行短く書けます。書き方そのものが変わるのはアニメーションだけです。

例1: クラスの付け外し(ハンバーガーメニュー)

// jQuery
$('.js-menu-btn').on('click', function () {
  $('.js-nav').toggleClass('is-open');
});

// 素のJavaScript
const menuBtn = document.querySelector('.js-menu-btn');
const nav = document.querySelector('.js-nav');

menuBtn.addEventListener('click', () => {
  nav.classList.toggle('is-open');
});

どちらも「ボタンを選ぶ→クリックを待つ→ナビのクラスを切り替える」の3手です。

例2: クリックで開閉(よくある質問のアコーディオン)

// jQuery
$('.js-faq-q').on('click', function () {
  $(this).next().slideToggle(300);
});

// 素のJavaScript
document.querySelectorAll('.js-faq-q').forEach((question) => {
  question.addEventListener('click', () => {
    question.nextElementSibling.classList.toggle('is-open');
  });
});

/* 素のJavaScript側のCSS(回答 .faq-a の中身は div でもう1重包む) */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s; }
.faq-a.is-open { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }

slideToggle()に当たる1行は、素のJavaScriptにありません。jQueryは高さの変化をJavaScriptで計算し、素のJavaScript側は動きをCSSのtransitionに任せます。高さautoへのtransitionはMDNが避けるよう書いているため、グリッドの行を0frから1frへ変えています(Chrome 107・Firefox 66・Safari 16以降。MDNの互換性表)。

jQuery側のCSSは別で、回答をdisplay: noneで隠しておきます。上のCSSのままjQuery側を動かすと、検証では何度クリックしても開きませんでした。

例3: スムーススクロール(ページ内リンク)

// jQuery
$('a[href^="#"]:not([href="#"])').on('click', function (event) {
  const target = $($(this).attr('href'));
  if (!target.length) return;
  event.preventDefault();
  $('html, body').animate({ scrollTop: target.offset().top }, 500);
});

// 素のJavaScript
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach((link) => {
  link.addEventListener('click', (event) => {
    const target = document.querySelector(link.getAttribute('href'));
    if (!target) return;
    event.preventDefault();
    target.scrollIntoView({ behavior: 'smooth' });
  });
});

jQueryはanimate()でスクロール位置を動かし、素のJavaScriptはscrollIntoView()に任せます。単純なページ内リンクなら、CSSのhtml { scroll-behavior: smooth; }だけで足ります。:not([href="#"])は、href="#"だけのリンクがどちらの書き方でもセレクタのエラーになるのを避けるためです。

差が2行なら、行数は選ぶ決め手になりません。jQuery公式も4.0.0のリリース記事で、アニメーションはCSSとクラス操作の組み合わせのほうが簡単なことが多いと書き、通信とアニメーションを除いた軽量版(slim版)を配布しています。

jQueryは「どこまで読めればよいか」の線引き

線は、下の対応表を読み替えられることと、50行程度のコードを説明して1箇所直せることの2本です。白紙から書けるところまでは求めません。

確かめ方は次の3つです。

• 対応表の各行が、素のJavaScriptの何に当たるかを言える
• 50行程度のコードを読み、「どの要素に」「いつ」「何をしているか」を説明できる
• セレクタ・クラス名・速度の数値を変えて、意図どおりに動きを変えられる

2つ目は、ロードマップの卒業判定チェックの5項目めを、jQueryのコードで試すものです。プラグインの自作、$.ajax()の通信、jQuery UIは線の外に置き、出会った時点で公式ドキュメントを引きます。

対応表では埋まらない4つの差

1行ずつ読み替えられても、挙動の違いで止まる箇所が4つあります。

// 差1: 要素がページに無いとき
$('.js-nav').addClass('is-open');                           // jQuery: エラーは出ない
document.querySelector('.js-nav').classList.add('is-open'); // 素のJavaScript: 止まる
// Uncaught TypeError: Cannot read properties of null (reading 'classList')

差1は、トップページにしか無い要素への処理を全ページ共通のファイルに書いている場合に出ます。素のJavaScriptへ書き直した途端、下層ページでスクリプト全体が止まります。if (nav) { … }で囲めば防げます。

差2は、$('.js-nav')が返すのはjQueryオブジェクトで、DOM要素ではない点です。classListは使えず、$('.js-nav')[0]と中身を取り出せば使えます。差3はアロー関数です。functionをアロー関数へ置き換えると、中の$(this)がクリックされた要素を指さなくなります。

差4はWordPressです。同梱のjQueryはnoConflictというモードで読み込まれ、$がそのままでは使えません(WordPress公式リファレンスのユーザー投稿ノート)。静的サイトのコードをテーマへ移すと$ is not a functionと出るのはこのためで、全体をjQuery(function ($) { … });で囲めば解決します。

実務での使い分け｜新規・改修・WordPressの3場面

新規は素のJavaScriptを基本にする、jQueryで統一された既存サイトの改修はjQueryに合わせる、WordPressは同梱のjQueryを前提に判断する。

改修で手を付ける前に確認する3つ

1. バージョン: 検証ツールのConsoleにjQuery.fn.jqueryと打つと"3.7.1"のように返ります(jQuery APIドキュメント)。1系・2系は公式サポートが終わった版です
2. slim版かどうか: 読み込むファイル名にslimが入っていれば、.animate() .slideToggle() $.ajax()は使えません
3. プラグインへの依存: スライダーのslick(jQuery 1.7以上が前提)のようなプラグインがあれば、jQueryを外す改修は別の規模の話になります

改修のついでにjQuery本体を上げるのは避けてください。4.0.0では$.trim()や$.isArray()などが削除され、これらを使う古いコードは止まります。上げるなら公式のアップグレードガイドに沿った別作業として見積もります。

WordPressは本体にjQueryを同梱しています(Theme Handbook)。2026年10月時点の最新版7.1.2に入っているのは3.7.1で、4系ではありません(公式リポジトリのscript-loader.php)。

業界の需要｜一次データで見るjQueryの現在地

jQueryは「いま動いているサイト」に多く残り、「これから書く人」の間では少数派です。需要は新規の実装ではなく、読解と改修の側にあります。数字は2026年10月5日に確認しました。

65.5%は在庫の数字です。W3Techsが数えているのは公開中のサイトで、これから作るサイトの採用率ではありません。母集団が違うので単純には比べられませんが、サイトのおよそ3分の2に残る一方、過去1年に開発で使った人は4人に1人弱です。

内訳では、公式サポートが終わった1系と2系が合わせて21.3%、jQueryを使うサイトのおよそ5件に1件です。4.0.0は公式が「ほぼ10年ぶりのメジャーバージョン」と書くリリースで、開発は止まっていません。

求人件数は根拠にしていません。jQuery単独の需要を切り出せる一次データを確認できなかったためです。

「jQueryが読める」は改修案件の入口を塞がないための条件で、選ばれる理由にはなりません。選ばれる理由は、目を惹く動きを高度なJavaScriptで組めることと、それがクライアントの問い合わせや売上につながることです。AI時代にコーダーへ何が残るかはコーダーの将来性とAIの記事に書いています。

当校の場合｜最初の動的サイトはjQuery、極めるのはJavaScript

AddedPallasの5段階カリキュラムは、STEP2で「JavaScript(jQuery含む)」を使った動きのあるサイトを作り、STEP4でJavaScriptを駆使した複雑な動きやシステムに進みます。同じページの説明は、jQueryが「簡単に使用できるのでまずはこれで動的サイトを作ります」、JavaScriptが「高度なレベルまで極めていただきます」です。jQueryで先に動くものを作る点はルートBの前半と同じで、行き先はJavaScript側にあります。詰まった行はチャットで質問できます(回数無制限、フィードバックは1営業日以内。サポート体制)。

よくある質問

JavaScriptとjQueryは、今から学ぶならどっちですか？

JavaScriptです。jQueryはJavaScriptで書かれたライブラリなので、二択ではありません。Web制作志望なら素のJavaScriptで書けることを軸に、jQueryは読める状態までで足ります。Webアプリ開発志望なら、jQueryに時間を使う必要はありません。

JavaScriptとjQueryの違いは何ですか？

JavaScriptはブラウザが直接実行するプログラミング言語、jQueryはその言語で書かれたライブラリです。要素を選ぶ、クラスを付け外すといった処理は、2026年時点ではどちらでも数行で書け、差は2行ほどです。

jQueryはオワコンですか？

開発は続いていて、2026年1月17日に最新版の4.0.0が公開されました。W3Techsの調査では、2026年10月5日時点で全Webサイトの65.5%が使っています。ただし新規で選ぶ理由は減り、出会うのは主に既存サイトの読解と改修です。

jQueryを使わないで、Web制作の仕事はできますか？

新規サイトは素のJavaScriptだけで作れます。一方、jQueryで組まれた既存サイトの改修や、jQueryを同梱しているWordPressの案件では、jQueryを読む場面があります。読んで1箇所直せる状態にしておけば、受けられる範囲が狭まりません。

まとめ｜書くのはJavaScript、jQueryは読んで直せるまで

• Web制作志望は「素のJavaScriptで書ける+jQueryが読める」、アプリ開発志望はJavaScriptだけ
• 読める線は、対応表の読み替えと「50行を説明して1箇所直せる」こと。4つの差は対応表の外にある
• 新規は素のJavaScriptが基本、既存サイトはjQueryに合わせる。改修前にバージョン・slim版・プラグイン依存を確認する
• 全Webサイトの65.5%にjQueryが残り、うち21.3%はサポートが終わった版。需要は読解と改修の側にある

Web制作とアプリ開発のどちら寄りか決めきれない方は、無料カウンセリングで作りたいものと、いま読んでいるコードを教えてください。どこまでを学ぶ範囲に入れるかを一緒に決めます。