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

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

投稿者の画像

y.kobayashi

2025.07.07 更新

この記事を共有する

この記事を共有する

Close

もっと知らせる

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コピーはこちらから

※uncompressed, minified, slim, slim minified ってどれを選べばいいの?

それぞれ特徴があるので、必要に応じた項目をクリックして読み込むようにしましょう!

  • Uncompressed
    可読性重視。改行・コメント付きでデバッグや学習に最適。ファイルサイズが大きく本番向きではない。
  • Minified
    圧縮済みの本番用。空白・コメントが除去され軽量、高速だが可読性は低い。
  • Slim
    軽量版jQuery。Ajaxやエフェクトなど一部機能を削除しており、機能が限定される。
  • Slim Minified
    最軽量かつ本番用。Slimの圧縮版で、機能は最小限、読み込み速度は最速。

② 書き方の基本

$(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なら感覚的に使えるので、まずは小さなスクリプトから触ってみましょう。


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

この記事の振り返りFAQ

jQueryはもう古いと聞きましたが、使っても大丈夫?

モダンな開発ではVanilla JSやReactが主流ですが、jQueryは依然として多くの既存サイトやWordPressテーマで使われています。

jQueryはスマホでも動きますか?

はい。jQueryはレスポンシブ対応にも問題なく動作します。

jQueryを複数回読み込んでもいいですか?

基本的には1回でOKです。複数回読み込むとエラーの原因になります。

jQueryを使うとサイトが重くなりますか?

軽量なライブラリですが、不要なプラグインや過剰なエフェクトの使い過ぎは避けましょう。

関連リンク

もっと知らせる