「JavaScriptとjQueryの違いがわからない…」
「どちらを使えばいいかわからない…」
そんなプログラミング初心者さん向けに、JavaScriptとjQueryの違いや使いどころを簡単にまとめて解説していきます。
jQueryとは？
jQueryとは、JavaScriptをより簡単に書けるようにしたライブラリのことを言います。
jQuery自体は古いライブラリですが、まだ現場ではよく使われている現役のライブラリです。
1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryでは1～2行ほどで済むのが大きな特徴です。
複雑な処理もjQueryであれば短いコードで実現でき、HTMLやCSSを操作する際も、シンプルな記述で効率的に作業が進められるため人気のライブラリとなっています。
HTMLやCSSに慣れた人が最初に「動きのあるページ」を実装するときに入りやすいのがjQueryなのです。
環境準備
1. JavaScriptの場合
JavaScriptはブラウザに標準で組み込まれている言語のため、特別な準備は不要です。
最も簡単な方法は、HTMLファイルに<script>タグを書いて試すことです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptのサンプル</title>
</head>
<body>
<h1 id="title">Hello JavaScript</h1>
<script>
document.getElementById("title").style.color = "red";
</script>
</body>
</html>
上記のコードを保存してブラウザ（ChromeやFirefox）で開くだけで動きます。
2. jQueryの場合
jQueryはJavaScriptのライブラリなので、読み込む準備が必要です。
一般的には CDN（Content Delivery Network） を利用します。
CDNで読み込むには、以下を<head>タグまたは<body>タグの最後に書きます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
例：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryのサンプル</title>
<!-- jQueryをCDNから読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">Hello jQuery</h1>
<script>
$("#title").css("color", "blue");
</script>
</body>
</html>
3. オンラインで試す方法
ローカルでHTMLファイルを作らなくても、以下のサービスを使えばブラウザだけで試すことができます。
「環境を用意するのがネック」な初心者の方にはオススメです。
JavaScript はそのまま使えますが、jQuery はライブラリを読み込む準備が必要です。
「とりあえず試す」なら CDN を貼るだけでOK！
オンライン実行環境を使えば、環境構築なしですぐ動かせます。
jQuery を使うときは、 jQuery の <script> を自分のコードより先に読み込む必要があります。
バージョンにより書き方が少し異なる場合があるので、基本的には 最新の安定版（3.x系） を利用しましょう。
❌ ダメな例（エラーになる）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの読み込み順</title>
<!-- まだ jQuery を読み込んでないのに、下のコードで $() を使っている -->
<script>
$("#title").css("color", "red"); // ← ここでエラー！
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1 id="title">Hello jQuery</h1>
</body>
</html>
ブラウザは上から順に<script>を実行するため、$("#title")が実行される時点ではjQueryがまだ読み込まれておらず、
「Uncaught ReferenceError: $ is not defined] というエラーが出ます。
✅ 正しい例（jQueryを先に読み込む）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの読み込み順</title>
<!-- 先に jQuery を読み込む -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- そのあとに自分のコードを書く -->
<script>
$("#title").css("color", "red");
</script>
</head>
<body>
<h1 id="title">Hello jQuery</h1>
</body>
</html>
上のように書けば、jQueryが読み込まれたあとに「$()」が実行されるためエラーなく正常に動作します。
✅ さらに安全な書き方（おまけ）
要素がまだ読み込まれていないタイミングでもエラーになることがあるので、
$(document).ready()を使うと、より安全に実装することができます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#title").css("color", "blue");
});
</script>
または省略記法で：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$("#title").css("color", "blue");
});
</script>
jQuery本体→自分のコードという順番が重要になります。
より安全にするなら「$(document).ready()」を使って書くことをおすすめします。
JavaScriptとjQueryの比較
| 項目 | JavaScript | jQuery |
|---|---|---|
| 種類 | プログラミング言語 | JavaScriptで作られたライブラリ |
| 学習難易度 | やや難しい | 初心者にやさしい |
| 実行速度 | 高速 | JavaScriptよりわずかに遅い |
| 実行環境 | そのままブラウザで動作 | jQueryライブラリを読み込む必要あり |
| 記述量 | 長め | 短く簡潔に書ける |
| できること | なんでも可能 | DOM操作・Ajaxなど一部特化 |
| トレンド | 主流 | 減少傾向 |
| 使い分け | パフォーマンス重視 | 制作効率 |
JavaScriptとjQueryの実際の書き分けについて見ていきましょう。
DOM取得
- JavaScript：
document.getElementById("title");
document.querySelector(".item");
- jQuery：
$("#title");
$(".item");
CSS操作
- JavaScript：
document.getElementById("box").style.color = "red";
document.getElementById("box").style.backgroundColor = "yellow";
- jQuery：
$("#box").css("color", "red").css("background-color", "yellow");
クラス操作
- JavaScript：
document.getElementById("box").classList.add("active");
document.getElementById("box").classList.remove("active");
- jQuery：
$("#box").addClass("active");
$("#box").removeClass("active");
クリックイベント
- JavaScript：
document.getElementById("btn").addEventListener("click", function() {
alert("クリックされました！");
});
- jQuery：
$("#btn").click(function() {
alert("クリックされました！");
});
テキスト変更
- JavaScript：
document.getElementById("text").textContent = "こんにちは！";
- jQuery：
$("#text").text("こんにちは！");
表示・非表示の切り替え
- JavaScript：
const box = document.getElementById("box");
box.style.display = (box.style.display === "none") ? "block" : "none";
- jQuery：
$("#box").toggle();
Ajax通信
- JavaScript：
fetch("/data.json")
.then(response => response.json())
.then(data => console.log(data));
- jQuery：
$.getJSON("/data.json", function(data) {
console.log(data);
});
HTML読み込み
- JavaScript：
window.addEventListener("load", function() {
// 処理
});
- jQuery：
$(function() {
// 処理
}
jQueryの方が短くシンプルに書ける部分が多いです。
初心者の方は、まずjQueryで動かす感覚を掴むのはアリだと思います。
どちらを使えばいいか？
初心者が学ぶなら…
- まずはJavaScriptの基礎を学ぶのがおすすめ！
- JavaScriptの基礎を理解した方が「jQueryがどれだけ便利か」がわかる。
- jQueryから入ると「裏で何をしているか」が理解しづらくなる。
- 両方を知っておくと現場対応力が高まる。
新規開発案件の場合
- JavaScriptを基本に使うべき！
- 最近のブラウザはES6以降の機能に対応していて、DOM操作やAjaxもかなり簡単に書ける。
- モダンフレームワーク（React、Vueなど）を使う場合、jQueryは不要。
- 学習コストを考えても、「今後の標準スキル＝JavaScript」
既存のレガシー環境・保守案件の場合
- 古いシステムではjQueryが前提になっていることが多い。
- 既存コードがjQueryで書かれているなら、無理に書き換えず合わせるのがベスト。
- 部分的にJavaScriptを混ぜるのはアリ。
まとめ
| 比較 | JavaScript | jQuery |
|---|---|---|
| 自由度・応用力 | ◎ | ○ |
| コードの簡潔さ | △ | ◎ |
| モダンな開発・案件 | ◎ | △ |
| 企業の既存サイト修正 | △ | ◎ |
| 学習順序 | 先に覚えるべき | 補助的に使うと便利 |
- これから学ぶなら、「JavaScript」一択（標準スキルとして必須）
- 現場で必要ならjQueryも理解する（保守や既存コード対応で強い）
- 両方の知識を持っていると「古い案件も新しい案件も対応できる」ので、実務では大きな武器になる！
両方の特性を理解しつつ、開発案件に合わせて柔軟に対応していくのが一番強いです。JavaScriptは必須で習得しつつ、jQueryは「便利ツール」として活用していくのが良いでしょう。