【コーディング基礎】jQueryとは？ 初心者でもすぐに使える書き方とコピペで実装テンプレート

Webサイトに動きをつけたいとき、まず触れておきたいのが「jQuery（ジェイクエリ）」です。
JavaScriptよりも短く簡単に書けるこのライブラリは、今も多くの現場で使われています。

この記事では、jQueryの基本から使い方、よくあるミスまでを網羅。
コピペでそのまま使えるコードも紹介します。

jQueryとは？

jQueryは、JavaScriptの処理を簡潔に書けるライブラリです。
2006年に登場し、瞬く間にWeb業界に広まりました。

主な特徴

• HTMLの要素取得や操作が簡単にできる
• Ajax通信がシンプルに実装可能
• クロスブラウザ対応に優れている
• 豊富なプラグインが存在

特に初心者にとって、JavaScriptよりも短く・わかりやすいコードで書ける点が魅力です。

jQueryを使ってみよう!

① jQueryの読み込み

まずはGoogle CDNなどからjQueryを読み込みます。
またはコードを使用するサイト内に設置しましょう。

<!-- CDNで使用する場合はこちら -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

👉 公式のCDNコピーはこちらから

② 書き方の基本

$(document).ready(function(){ 
  // 処理内容 
});

略して以下のようにも書けます。

$(function(){ 
  // 処理内容 
});

例：クリックイベントの登録

$('#btn').click(function(){ 
  alert('クリックされました'); 
});

HTML側は以下のように記述します。

<button id="btn">クリック</button>

コピペで使えるjQueryテンプレート

1. スムーススクロール

スムーススクロールとは、ページ内のリンクをクリックしたときに、目的の位置までなめらかにスクロール移動する演出のことです。

<!-- CDN jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<!-- スムーススクロール -->
<script>
  $('a[href^="#"]').click(function(){ 
    var speed = 500; 
    var href= $(this).attr("href"); 
    var target = $(href == "#" || href == "" ? 'html' : href); 
    var position = target.offset().top; 
    $("html, body").animate({scrollTop:position}, speed, "swing"); 
    return false; 
  });
</script>

---

2. アコーディオンメニュー

アコーディオンメニューとは、見出しをクリックすると、その下に隠れていたコンテンツがスライドで開閉されるメニュー形式のことです。
ユーザーが見たい情報だけを開いて表示できるため、限られたスペースでも多くの情報を整理して見せられるのが特徴です。

<div class="accordion-title">メニュー1</div> 
<div class="accordion-content" style="display:none;">中身</div>

<!-- CDN jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

<!-- アコーディオン -->
<script>
  $('.accordion-title').click(function(){ 
    $(this).next('.accordion-content').slideToggle(); 
  });
</script>

よくあるミスと対処法

ミス内容	解決方法
$ is not defined エラー	jQueryの読み込みが正しく行われているか確認
jQueryのコードが動かない	$(document).ready() の中に書くこと
イベントが2回発火する	.on('click') の重複バインドに注意。off()で解除可能
クラスセレクタを間違える	'className' ではなく '.className' と書く

1. $ is not defined というエラーが出る

このエラーは、jQueryが読み込まれる前にjQueryのコードが実行されてしまったときに発生します。
たとえば、以下のような順番でスクリプトを読み込むとエラーになります。

<script>
  $('#btn').click(function() {
    alert('クリック');
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

対処法：
スクリプトの順番を正しくしましょう。
jQuery本体を先に読み込み、その後に自分のコードを実行します。

<!-- こっちを先に読み込む -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
  $('#btn').click(function() {
    alert('クリック');
  });
</script>

---

2. jQueryのコードが実行されない（何も起こらない）

コードがエラーになっていないのに動かない場合は、DOMの読み込みが終わっていないタイミングで処理を始めてしまっていることが原因のことがあります。

対処法：
必ず $(document).ready() または $(function(){ }) の中に処理を記述しましょう。

$(function(){
  $('#btn').click(function(){
    alert('クリックされました');
  });
});

このようにすることで、ページのHTMLが完全に読み込まれた後にjQueryの処理が行われるようになります。

---

3. イベントが複数回発火してしまう

イベントが2回以上反応する場合、同じイベントが何度もバインド（登録）されている可能性があります。特に動的に要素を追加したり、処理を繰り返し実行する場面では注意が必要です。

対処法：
イベントを重複登録しないようにするか、事前に .off() で一旦イベントを解除するようにしましょう。

$('#btn').off('click').on('click', function(){
  alert('クリック');
});

---

4. セレクタの指定ミス

意外と多いのが、jQueryのセレクタ指定の書き間違いです。
たとえば、クラス名を指定する場合は ‘.className’ のようにピリオド（.）が必要ですが、
これを忘れてしまうと要素が取得できません。

$('className') // ×
$('.className') // ○

同様に、IDの場合は#idName、タグの場合はdivのように適切な記述が必要です。

まとめ

• jQueryは今でも多くのプロジェクトで使われる便利なライブラリ
• 基本構文はシンプルで覚えやすい
• コピペですぐ動くテンプレートが豊富
• ミスを防ぐには読み込みやセレクタの使い方に注意

「JavaScriptはちょっと難しい…」という人でも、
jQueryなら感覚的に使えるので、まずは小さなスクリプトから触ってみましょう。

---

動画で学習したい方はこちらの動画をチェック! 👇

jQueryとは

この記事の振り返りFAQ

関連リンク

• jQuery公式サイト（英語）
• jQuery日本語リファレンス
• MDN Web Docs – jQuery
• Qiita – jQuery入門まとめ