jQueryとは？基本の書き方・よく使うメソッドを解説

公開日：2025-10-31

JavaScript

jQuery

コーディング初学者が初めてJavaScriptを学ぶ際に、最初に触れることが多いのがJavaScriptライブラリの「jQuery（ジェイクエリ）」です。

現在のモダン開発のトレンドとは言えないものの、依然としてWebサイトでの使用率は高く、Web制作の現場では今なお広く利用されています。

今回は、jQueryの概要や基本的な使い方や、よく使われるメソッドについて詳しく解説します。

※本記事執筆時点のjQueryバージョンは、「3.7.1」です。

jQueryとは？

jQueryは、DOM操作やアニメーション、Ajax処理といったさまざまな機能を、簡潔なコードで実現できるようにするJavaScriptライブラリです。

昨今では、ReactやVueといったライブラリやフレームワークを用いたWebサイトやアプリの開発が主流となりつつあり、jQueryのシェアは徐々に低下してきていますが、依然として全Webサイトの約70％（JavaScriptライブラリ市場の約90%）でjQueryが使用されています。

Usage Statistics and Market Share of JavaScript Libraries for Websites, October 2025

どの程度コードが簡潔になるかが分かるよう、以下ではjQueryと純粋なJavaScriptそれぞれでアコーディオンメニューを実装した際のコードを並べてみました。

jQueryの方がコード量が少なく、より読みやすく記述できていることが分かると思います。

■jQueryの記述

$(function () {
  $(".accordion-header").on("click", function () {
    const content = $(this).next(".accordion-content");

    $(".accordion-content").not(content).slideUp();
    $(".accordion-header").not(this).removeClass("active");

    content.slideToggle();
    $(this).toggleClass("active");
  });
});

■JavaScriptの記述

document.addEventListener("DOMContentLoaded", function () {
  const headers = document.querySelectorAll(".accordion-header");
  const contents = document.querySelectorAll(".accordion-content");

  headers.forEach((header) => {
    header.addEventListener("click", () => {
      const content = header.nextElementSibling;

      contents.forEach((c) => {
        if (c !== content) {
          c.style.maxHeight = null;
          c.previousElementSibling.classList.remove("active");
        }
      });

      if (content.style.maxHeight) {
        content.style.maxHeight = null;
        content.style.padding = "0 20px";
        header.classList.remove("active");
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
        content.style.padding = "15px 20px";
        header.classList.add("active");
      }
    });
  });
});

■jQueryを使ったアコーディオンメニュー実装例

See the Pen jQuery アコーディオンメニュー by E-VALUE WORKS (@evw) on CodePen.

■素のJavaScriptを使ったアコーディオンメニュー実装例

See the Pen JavaScript アコーディオンメニュー by E-VALUE WORKS (@evw) on CodePen.

jQueryはもう古い？

近年、「jQueryはもう古い」「オワコン」といった声を耳にすることがあります。

確かに、ReactやVueといったモダンなライブラリやフレームワークが普及し、Webアプリ開発の主流はそちらへ移りつつあります。

そのため、モダンな開発環境に力を入れているWeb制作会社やアプリ開発会社で働きたい場合は、ReactやVueといったフレームワークを学んでおく方が望ましいと言えます。

しかし、今なおWeb制作の現場ではjQueryが採用されることがあり、既存のWebサイトの改修や保守案件など、現在でも多くの場面で遭遇します。

また、ReactやVueが必ずしもjQueryの上位互換というわけではなく、小〜中規模のWebサイト制作においては、むしろjQueryの方が効率的に実装できるケースも少なくありません。

■jQueryの特長
HTMLの要素を取得・操作したり、アニメーションやAjax通信を簡単に実装できるJavaScriptのショートハンド（簡潔な書き方）のような存在。jQueryをベースとしたプラグインも数多く公開されており、手軽にWebサイトに動きを加えたい場合に適している。

■ReactやVueの特長
ReactやVueは、仮想DOM（Virtual DOM）を用いて効率的にUIを更新できる、コンポーネントベースのライブラリ/フレームワーク。コンポーネント単位で開発を進めるため、保守性や再利用性の高いコード設計が可能で、大規模で動的なWebアプリケーションの開発向き。また、ページ全体を再読み込み（リロード）することなく部分的にUIを更新できるため、SPA（Single Page Application）の開発にも適している。

そのため、Web制作を仕事にしたいと考えている方は、jQueryを学んでおいて損はないと言えます。

jQueryのインストール方法

jQueryをインストールするには以下の3つの方法があります。

jQueryのインストール方法

ファイルをローカル上にダウンロードしてきて使う方法
CDNを使う方法
npmを使う方法

ファイルをローカル上にダウンロードしてきて使う方法

jQueryのファイルをローカル上にダウンロードしてきて使用したい場合は、公式サイトにアクセスします。

https://jquery.com/

「Download jQuery」をクリックします。

「Download jQuery」のリンクボタンの上で「右クリック＞名前を付けてリンク先を保存」をクリックし、「jquery.min.js」と名前をつけて保存します。

あとは、headタグ内でjQueryファイル→自分のスクリプトファイルの順に読み込めばOKです。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQueryの使い方</title>
  <link rel="stylesheet" href="my-style.css">
</head>

<body>
  <!-- ページコンテンツ -->
  <script src="jquery.min.js"></script>
  <script src="my-script.js"></script>
</body>

CDNを使う方法

CDNを使う場合は、以下のコードを記述します。

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

他の解説記事などで紹介されているCDNコードと異なる場合がありますが、これはjQueryをホストしているCDNがいくつかあるためです。

どれを使っても動作自体は変わりませんが、一般的にはGoogle（上記のコード）やjsDelivrなど信頼性の高いCDNを使うのがおすすめです。

npmを使う方法

Webpackなどのモジュールバンドラに組み込んで利用したい場合は、ターミナルを開き「npm install jquery」を実行します。

あとはjqueryのパッケージから$を読み込めばOKです。

import $ from "jquery";

jQueryの基本の書き方

jQueryの基本の書き方は以下の通りです。

STEP. 1：全体を$(function() {})で囲う
STEP. 2：$("セレクタ")で操作したいHTML要素を取得する（jQueryオブジェクトとして取得）
STEP. 3：取得した要素にメソッド（.メソッド()）で操作を加える

STEP. 1：全体を`$(function() {})`で囲う

jQueryを書き始める際は、まず以下のコードで全体を囲ってあげる必要があります。

$(function() {

});

これは、「HTMLの読み込み（DOMの構築）が完了してからスクリプトを実行するための書き方です。

こうしておくことで、headタグ内でスクリプトを読み込んでも、DOMがまだ構築されていないタイミングで実行されることを防ぐことができます。

参考記事

$(function() {})の意味は？$(window).on(‘load’,function(){})との違い

※DOM（Document Object Model）とは、ウェブページの内容や構造をプログラム（JavaScript）で操作できるようにするための仕組み・APIのことを指します。
DOMを使用するために、ページの各要素（例：見出しタグ、divタグなど）を階層構造で整理したものを「DOMツリー」と呼び、各要素のことを「ノード」と呼びます。

STEP. 2：`$("セレクタ")`で操作したいHTML要素を取得する

続いて、jQueryは、基本的に「①操作したいHTML要素を取得」し、「②その要素に対して操作を行う」という流れで記述していきます。

操作したいHTML要素を取得するには、$(“セレクタ”)と記述します。

$(function () {
  // 操作したいHTML要素の取得方法
  $("セレクタ");
});

これで、指定したセレクタに該当する要素をjQueryオブジェクトとして取得できます。

STEP. 3：取得した要素にメソッド（`.メソッド()`）で操作を加える

取得した要素はjQueryオブジェクトとなり、ここから.css()や.addClass() などjQuery独自のメソッド（関数）を呼び出すことができます。

$(function () {
  // $("セレクタ") で操作対象の要素を取得し、.メソッド();の形で命令する
  $("セレクタ").メソッド();
});

以下の例では、ttlクラスの付いたh1を取得し、.css()で色やフォントサイズを変更しています。

■HTML

<h1 class="ttl">jQueryはWeb制作初学者におすすめのJavaScriptライブラリです。</h1>

■JavaScript（jQuery）

$(function () {
  // $(".ttl")で要素を取得。
  // .css()メソッドでスタイルを変更。
  $(".ttl").css({
    color: "#fff",
    "font-size": "24px",
    "background-color": "blue",
  });
});

See the Pen Untitled by E-VALUE WORKS (@evw) on CodePen.

.css()メソッド内では、プロパティ名にハイフン（-）がない場合はそのまま書くことができますが、ハイフンを含むプロパティは、文字列として “font-size” と書くか、キャメルケースで fontSize のように書く必要があります。

color: “#fff” ・・・〇
“color”: “#fff” ・・・〇
font-size: “20px” ・・・ ×
fontSize: “20px” ・・・〇
“font-size”: “20px” ・・・〇

参考：メソッドはつなげて書くことも可能（メソッドチェーン）

メソッドは、以下のようにつなげて書くこともできます。

つなげて書いた場合、1つ目のメソッドから順に実行されていきます。

$(function () {
  $(".ttl")
    //1つ目のメソッド
    .css({
      color: "#fff",
      "font-size": "24px",
      "background-color": "blue",
    })
    //2つ目のメソッド
    .slideUp(1000)
    //3つ目のメソッド
    .slideDown(1000);
});

See the Pen jQuery 基本的な使い方メソッドチェーン by E-VALUE WORKS (@evw) on CodePen.

上の例では、CSSのスタイルを変更した後、1秒かけてスライドアップし、続けて1秒かけてスライドダウンするように指定しています。

jQueryの最初に覚えておきたいメソッド

以下では、jQueryの最初に覚えて起きたいメソッドをいくつかカテゴリーに分けて紹介します。

※ここでの分類は公式な区分ではなく、初学者向けに学習目的で整理した分類になります。

値を扱うメソッド（値の取得・設定など）

メソッド	説明
text()	対象要素のテキスト内容を取得または設定するためのメソッド。 .text()とした場合は、対象要素の中のテキストが取得される。（対象要素の中のHTMLタグ（<span>など）は無視される。） .text(“テキスト”)とした場合は、対象要素のテキスト内容を指定した文字列に置き換えられる。
html()	対象要素のHTMLの内容を取得または設定するためのメソッド。 .html()とした場合は、対象要素の中のHTML構造（タグを含む内容）が取得される。（対象要素の中に含まれる<span>などのタグもそのまま取得される。） .html(“HTML文字列”)とした場合は、対象要素の中身が指定したHTMLに置き換えられる。
attr()	対象要素の属性を取得または設定するためのメソッド。 .attr(“属性名”)とした場合は、指定した属性の値が取得される。 .attr(“属性名”, “値”)とした場合は、対象要素の指定した属性に値を設定できる。
css()	対象要素のCSSプロパティ（スタイル）を取得または設定するためのメソッド。 .css(“プロパティ名”)とした場合は、指定したCSSプロパティの値が取得される。 .css(“プロパティ名”, “値”)とした場合は、CSSプロパティに値を設定できる。（オブジェクト形式で複数のスタイルをまとめて指定することも可。）
width()	対象要素の幅を取得または設定するためのメソッド。 .width()とした場合は、対象要素の現在の幅がピクセル単位（単位なしの数値）で取得される。 .width(“値”)とした場合は、対象要素の幅を設定できる。
height()	対象要素の高さを取得または設定するためのメソッド。 .height()とした場合は、対象要素の現在の高さがピクセル単位（単位なしの数値）で取得される。 .height(“値”)とした場合は、対象要素の高さを設定できる。
innerWidth()	対象要素の内側の幅（paddingを含み、borderを含まない）を取得または設定するためのメソッド。 .innerWidth()とした場合は、対象要素の左右のpaddingを含む幅がピクセル単位（単位なしの数値）で取得される。 .innerWidth(“値”)とした場合は、対象要素の内側の幅を設定できる。
innerHeight()	対象要素の内側の高さ（paddingを含み、borderを含まない）を取得または設定するためのメソッド。 .innerHeight()とした場合は、対象要素の上下のpaddingを含む高さがピクセル単位（単位なしの数値）で取得される。 .innerHeight(“値”)とした場合は、対象要素の内側の高さを設定できる。
outerWidth()	対象要素の外側の幅（padding・borderを含み、必要に応じてmarginも含む）を取得または設定するためのメソッド。 .outerWidth()とした場合は、対象要素の左右のpaddingとborderを含む幅がピクセル単位（単位なしの数値）で取得される。（引数にtrueを指定すると、marginも含めた幅を取得できる。） .outerWidth(“値”)とした場合は、対象要素の外側の幅を設定できる。
outerHeight()	対象要素の外側の高さ（padding・borderを含み、必要に応じてmarginも含む）を取得または設定するためのメソッド。 .outerHeight()とした場合は、対象要素の上下のpaddingとborderを含む高さがピクセル単位（単位なしの数値）で取得される。（引数に true を指定すると、marginも含めた高さを取得できる。） .outerHeight(“値”)とした場合は、対象要素の外側の高さを設定できる。
offset()	対象要素の位置（座標）を取得または設定するためのメソッド。 .offset()とした場合は、ドキュメント全体に対する対象要素の左上の座標（borderの外側）を取得できる。（返り値は{ top: 数値, left: 数値 }のオブジェクト形式。） .offset({ top: 値, left: 値 }) とした場合は、対象要素を指定した座標位置に移動できる。
scrollTop()	対象要素のスクロール位置（縦方向）を取得または設定するためのメソッド。 .scrollTop()とした場合は、スクロールバーが上から何ピクセル分移動しているかを数値で取得できる。（スクロール位置が一番上の場合、返り値は0。） .scrollTop(値)とした場合は、対象要素のスクロール位置を指定したピクセル数に設定できる。

クラス操作系メソッド

メソッド	説明
addClass()	対象要素に指定したクラス名を追加するためのメソッド。 .addClass(“クラス名”)とした場合は、対象要素にそのクラスが追加され、既存のクラスは保持される。
removeClass()	対象要素から指定したクラス名を削除するためのメソッド。 .removeClass(“クラス名”)とした場合は、対象要素に付与されている指定のクラスが削除される。（複数のクラス名を半角スペース区切りで指定することも可。） .removeClass()とした場合は、すべてのクラスが削除される。
toggleClass()	対象要素に指定したクラス名を追加または削除するためのメソッド。指定したクラスが存在する場合は削除し、存在しない場合は追加する。

アニメーション系メソッド

メソッド	説明
show()	対象要素を表示するためのメソッド。 .show()とした場合は、非表示状態（display: none;）の要素を即座に表示する。 .show(時間)とした場合は、指定した時間（ミリ秒）をかけてアニメーションしながら表示できる。（例：.show(1000)で1秒かけて表示）。
hide()	対象要素を非表示にするためのメソッド。 .hide()とした場合は、対象要素のdisplayプロパティがnoneに変更され、即座に非表示になる。 .hide(時間)とした場合は、指定した時間（ミリ秒）をかけてアニメーションしながら非表示にできる。（例：.hide(1000)で1秒かけて非表示）。
fadeIn()	対象要素をフェードインさせるためのメソッド。 .fadeIn()とした場合は、デフォルトで約0.4秒（400ミリ秒）かけて、対象要素がフェードインする。 .fadeIn(時間)とした場合は、指定した時間（ミリ秒）をかけてフェードインさせることができる。（例：.fadeIn(1000)で1秒かけて表示）。
fadeOut()	対象要素をフェードアウトさせるためのメソッド。 .fadeOut()とした場合は、デフォルトで約0.4秒（400ミリ秒）かけて、対象要素がフェードアウトする。 .fadeOut(時間)とした場合は、指定した時間（ミリ秒）をかけてフェードアウトさせることができる。（例：.fadeOut(1000)で1秒かけて非表示）。
slideDown()	対象要素をスライドさせながら表示するためのメソッド。 .slideDown()とした場合は、デフォルトで約0.4秒（400ミリ秒）かけて対象要素の高さをアニメーションで広げ表示する。 .slideDown(時間)とした場合は、指定した時間（ミリ秒）をかけてスライドダウンさせることができる。（例：.slideDown(1000)で1秒かけて表示）。
slideUp()	対象要素をスライドさせながら非表示にするためのメソッド。 .slideUp()とした場合は、デフォルトで約0.4秒（400ミリ秒）かけて対象要素の高さをアニメーションで縮小し非表示にする。 .slideUp(時間)とした場合は、指定した時間（ミリ秒）をかけてスライドアップさせることができる。（例：.slideUp(1000)で1秒かけて非表示）。
animate()	対象要素のCSSプロパティを任意の値へアニメーションさせるためのメソッド。 .animate({プロパティ: 値}) と記述することで、数値で指定可能なCSSプロパティをアニメーションで変化させることができる。 .animate({ left: “100px” }, 1000) のように、第二引数でアニメーション時間（ミリ秒）を指定できる。（デフォルトは約0.4秒＝400ミリ秒）。

jQueryの最初に覚えておきたいイベント

jQueryでは、.on()メソッドを使うことで、特定のイベント（例：クリック、マウス操作など）が発生した際に、指定した処理を実行することができます。

.on()メソッドは、$("セレクタ").on("イベント", function() {// イベント発生時の処理});（※厳密には引数を4つ指定できます。）の形でイベントを登録できます。

$(function () {
  $(".ttl").css({
    "font-size": "24px",
  });

  $(".btn").on("click", function () {
    $(".ttl").css({
      color: "#fff",
      "background-color": "blue",
    });
  });
});

■ボタンクリック時にパネルをスライドダウン表示させている例

See the Pen jQuery 基本的な使い方イベントデモ② by E-VALUE WORKS (@evw) on CodePen.

以下では、jQueryの.on()メソッドで登録できるイベントをいくつか紹介します。

参考：on(“click”, …)と.click(…)の違い

jQueryでクリックイベントを登録する際には、.on(“click”, function(){})と書くほかに、.click(function(){})という書き方もあります。

また、他のイベントでも同様に、.on(“mouseenter”, function(){})に対して.mouseenter()などが存在します。

これらの挙動には若干の違いはありますが、どちらもイベントを登録する際に使用できます。

ただし、現在はより柔軟で推奨されている.on("イベント名", function(){});の書き方を使用するのが推奨されています。

両者の違いに関しては解説しませんが、気になる方は違いを調べてみて下さい。

メソッド	説明
.on(“load”)	対象要素やページ全体の読み込み完了時に処理を実行するためのイベント。ページや画像、iframeなどのリソースが完全に読み込まれたタイミングで発火する。
.on(“scroll”)	対象要素がスクロールされたときに処理を実行するためのイベント。スクロール位置が変化した瞬間にイベントが発火する。
.on(“resize”)	ブラウザウィンドウのサイズが変更されたときに処理を実行するためのイベント。ウィンドウの横幅や高さが変更されるたびに発火する。
.on(“click”)	対象要素がクリックされたときに処理を実行するためのイベント。マウスで要素をクリックした瞬間に発火する。
.on(“mouseenter”)	マウスカーソルが要素に乗ったときに発火するイベント。対象要素にマウスが入った瞬間に一度だけ発火する。
.on(“mouseleave”)	マウスカーソルが要素から離れたときに発火するイベント。対象要素からマウスが出た瞬間に一度だけ発火する。