JavaScriptのjQueryとは？導入方法とセレクターの使い方を解説

PR JavaScript

JavaScriptのjQueryとは？導入方法とセレクターの使い方を解説

💡 この記事でわかること

  • jQueryとは何か、今の立ち位置
  • CDN・npmでの導入方法
  • セレクターでHTML要素を取得する方法
  • テキスト・HTML・属性・スタイルの取得と変更
  • イベント処理とアニメーションの基本

1. jQueryとは？

jQueryとは、
👉 HTML要素を取得したり、中身を書き換えたりする処理を、短いコードで書けるようにしてくれるJavaScriptの道具箱(ライブラリ)です。

👉 JavaScriptとは何かについての記事はこちら(jQueryはJavaScriptの機能を使いやすくしたものなので、先にJavaScript自体をざっくり知っておくと理解しやすくなります)

昔からある技術で、今も多くのWordPressのテーマ・プラグインや、すでに公開されている大きめのサイトで使われています。ただ、最近は素のJavaScriptだけでも同じことがしやすくなってきたので、新しく作るサイトでjQueryを選ぶ場面は少しずつ減ってきています。

💡 とはいえ、すでにjQueryで作られたサイトを触ったり直したりする機会はまだまだ多いので、「読める・最低限書ける」レベルにしておくと安心です。この記事では、そのために必要な基本の書き方を1つずつ解説します。

2. jQueryを導入する

jQueryを使うには、まずページにjQuery本体を読み込む必要があります。代表的な方法は次の2つです。

CDNで読み込む(手軽に試したい場合)

一番手軽なのは、jQuery公式サイトが用意しているCDN(ネット上に置かれたファイルを直接読み込む仕組み)を使う方法です。手順は次の3ステップだけです。

  1. 公式のjQuery CDNのページを開く
  2. 一覧の一番上にある最新バージョン(2026年8月時点では3.x系)の横に表示されている、コピー用の<script>タグをコピーする
  3. コピーしたタグを、HTMLの</body>直前に貼り付ける

コピーされるタグは、次のような形になっています。

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="(公式サイトに表示されているハッシュ値がここに入ります)"
  crossorigin="anonymous"></script>

<script>
  // ここから下でjQueryが使える
  console.log($ === jQuery); // true
</script>

👉 integrity・crossoriginという見慣れない属性が付いていますが、これは「読み込んだファイルが公式の本物で、途中で改ざんされていないか」をブラウザ側で自動チェックするための仕組み(SRI)です。この値を自分で書き換えたり、バージョン番号だけ書き換えて使い回したりすると、値が合わずブラウザがスクリプトの読み込みをブロックしてしまうことがあるため、必ず公式サイトに表示されているタグをそのままコピーして使いましょう。バージョン番号(3.7.1の部分)も、公式サイトを見るたびに新しくなっている可能性があります。

npmで導入する(少し発展的な方法)

Node.jsを使った開発環境では、npmというツールでjQueryをインストールしてから読み込む方法も使われます。まずは上のCDNの方法で十分なので、余裕があれば参考程度に見てください。

npm install jquery
import $ from "jquery";

3. セレクターでHTML要素を取得する

jQueryは$()という関数(セレクター)に、CSSと同じ書き方で「どの要素を操作したいか」を渡します。

$(".example")   // class="example" の要素
$("#example")   // id="example" の要素
$("p")          // すべての p タグ

👉 $はjQueryの省略形で、中身は同じものです。取得した要素に対して、このあと説明するメソッドをつなげて操作していきます。

👉 JavaScript標準のDOM操作についての記事はこちら(素のJavaScriptで同じことをするとdocument.querySelector()のような、少し長めの書き方になります)

4. テキスト・HTMLの取得と設定

要素のテキストやHTMLコードは、text()・html()で取得・変更できます。引数なしで呼ぶと取得、引数を渡すと設定になります。

$("#example").text();              // テキストを取得
$("#example").text("こんにちは");   // テキストを設定

$("#example").html();              // HTMLを取得
$("#example").html("<strong>強調</strong>"); // HTMLを設定

💡 ユーザーが入力した文字をそのままhtml()で表示すると、思わぬタグが紛れ込んで表示が崩れたり、悪用されたりする危険があります。ただ文字を表示したいだけなら、常にtext()を使うようにしましょう。

5. 属性の取得と設定

attr()を使うと、srcやhrefなどのHTML属性を取得・変更できます。

$("#example").attr("src");                      // src属性を取得
$("#example").attr("src", "new-image.jpg");      // src属性を設定

6. スタイル(CSS)の取得と設定

css()を使うと、CSSのプロパティを取得・変更できます。

$("#example").css("background-color");            // 背景色を取得
$("#example").css("background-color", "red");     // 背景色を設定

👉 複数のプロパティをまとめて設定したい場合は、オブジェクトを渡すこともできます(例:.css({ color: "white", fontSize: "16px" }))。

7. 要素の追加と削除

append()で要素を追加、remove()で要素を削除できます。

// body要素の最後に新しいdivを追加
$("body").append("<div>Hello, world!</div>");

// idが example の要素を削除
$("#example").remove();

8. イベント処理

クリックなどのイベントは、on()やclick()のようなメソッドに関数を渡して処理します。

$("#example").on("click", function () {
  alert("Clicked!");
});

// clickのように、よく使うイベントには専用メソッドも用意されている
$("#example").click(function () {
  alert("Clicked!");
});

👉 JavaScript標準のaddEventListenerについての記事はこちら

やっていることは標準のaddEventListenerとほぼ同じで、「この要素が〇〇されたら、この処理を実行する」という書き方だと覚えておけば大丈夫です。

9. アニメーション

jQueryには、フェードやスライドなどの簡単なアニメーションを1行で書けるメソッドが用意されています。

$("#example").fadeIn();        // フェードイン
$("#example").fadeOut();       // フェードアウト
$("#example").slideToggle();   // スライドで表示・非表示を切り替え

自分で細かい動きを設定しなくても、これらのメソッドを呼ぶだけですぐに動きが付けられるのが便利なところです。

10. まとめ:jQueryは今から学ぶべき?

ここまで紹介したように、jQueryは少ないコードでHTML要素の操作やイベント処理ができる便利なライブラリです。一方で、標準のJavaScriptでも同じことがしやすくなっているため、新しく学ぶ優先度としては次のように考えるとよいでしょう。

  • これから新しいサイト・アプリをゼロから作るなら、まず標準のJavaScript(DOM操作)やfetchを身につけるのがおすすめ
  • 既存のjQuery製サイトの保守や、jQueryを使ったWordPressプラグインのコードを読む機会があるなら、この記事の内容で十分読み書きできる

どちらの場合でも、$()によるセレクターの考え方はCSSセレクターと共通しているため、覚えておいて損はありません。

👉 jQueryでサーバーと通信する($.ajax)についての記事はこちら

-JavaScript
-, ,