jQuery
jQuery｜1章：jQueryの基礎
INDEX
目次
次の章に進む

1章：jQueryの基礎

サンプルコード
 本教材で使用するzipファイルです。クリックしてダウンロードしましょう。
zipファイル
サンプルコードの使い方
  • materials
    • materialsフォルダには、教材内で解説しているサンプルコードが含まれています。
    • 例えば、「【2-1】トグルメニューの実装」を学ぶ際は、02-1_toggle-menuフォルダ内のコードを確認しながら進めてください。
    • ※ 【1-1】、【1-2】に関してはサンプルコードはありません。
  • exercises
    • exercisesフォルダには、各章末の演習課題に取り組むためのコードが用意されています。
    • 演習に取り組む際は、XX_start フォルダ内のコードを使って作業を始めましょう。
    • 作業後に答え合わせをする場合は、XX_end フォルダ内の解答例コードを参照してください。

【1-1】jQueryとは

jQueryの概要と特徴

jQuery機能の実装例
jQueryを用いると下記のような機能を簡単に実装することができます。
クリック時にメニューを開閉する機能
(13717)

マウスホバー時にメニューを開閉する機能
(13718)

クリックした際に、画像を拡大して表示する機能
(13719)

ボタン操作で画像がスライド式で切り替わる機能

ボタン操作で画像がスライド式で切り替わる機能
jQueryはJavaScriptの「便利な道具」のようなもの（ライブラリ）
(13724)

jQueryは、JavaScriptをより簡単に使えるようにする**「ライブラリ」**の一つです。

JavaScriptはWebページの動きを作るためのプログラム言語ですが、記述が複雑になることがあります。

そこでjQueryを使うことで、難しいJavaScriptのコードを**簡単な書き方**に変えることができます。
コードが短くなり、初心者でも覚えやすく扱いやすい
// JavaScriptでボタンをクリックしたときに動作させる
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});
サンプルコード
jQueryはコードが簡潔で、初心者でも直感的に扱いやすいのが特徴です。

例えば、JavaScriptで、ボタンがクリックした時にメッセージを出す場合、上のように長いコードを記述する必要があります。
$("#myButton").click(function() {
    alert("ボタンがクリックされました！");
});
サンプルコード
しかし、jQueryを使うと、上のように短くシンプルに書くことができます。

jQueryを使うメリット

Webページの動きを少ないコードで実装できる（プラグインの活用）
(13736)

jQueryには「プラグイン」と呼ばれる追加機能が多数存在し、簡単に組み込むことができます。

例えば、フォトギャラリーやスライドショー、モーダルウィンドウ（ポップアップ表示）などの機能をほぼコーディングなしで実装できます。
アニメーションやイベント処理が簡単にできる
$("#box").fadeIn(1000);
サンプルコード
jQueryを使うと、要素を動かすアニメーションや、クリックやスクロールなどの「イベント処理」を簡単に実装できます。

例えば、要素をフェードインさせるアニメーションは、上のように、たった1行で記述できます。

次のステップでは、実際にjQueryをWebサイトに導入する方法を学びましょう！

【1-2】jQueryの導入方法

jQueryの導入方法

CDNでの導入
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
サンプルコード
CDN（コンテンツデリバリーネットワーク）を使うと、jQueryをダウンロードせずにWebページに直接組み込むことができます。

上のコードをHTMLファイルの<head>内に記述するだけでOKです。
ローカルファイルでの導入
<head>
    <script src="jquery-3.7.1.min.js"></script>
</head>
サンプルコード

jQueryの公式サイトからファイルをダウンロードして、自分のパソコンに保存する方法もあります。

ダウンロードしたファイルを適切なフォルダに置き、上記のようにHTMLで読み込みます。

CDN導入とローカルファイル導入の比較
導入方法 メリット デメリット
CDNでの導入 ✅ ダウンロード不要で、すぐに利用できる ❌ インターネット接続が必要
✅ ブラウザのキャッシュを活用し、高速表示が可能 ❌ CDNがダウンすると影響を受ける
✅ 最新バージョンが自動で利用できる ❌ 仕様変更の影響を受ける可能性がある
ローカルファイルでの導入 ✅ インターネット接続がなくても利用可能 ❌ 事前にダウンロードと配置が必要
✅ バージョンを管理でき、アップデートの影響を受けない ❌ 他のサイトと共有されず、キャッシュの恩恵を受けにくい
✅ 自サイトのサーバーに依存するため、安定した環境を構築可能 ❌ サーバーの負荷が増える可能性がある
初めての方はCDNを選びましょう
 jQueryを初めて使う場合は、CDNでの導入がおすすめです。ダウンロードやファイル配置の手間がなく、すぐにjQueryの機能を試すことができます。
また、多くのWebサイトで利用されているCDNを使うことで、ブラウザのキャッシュが利用され、表示速度が向上するメリットもあります。
jQueryの実行予約（HTML読み込み完了後の実行）
$(function() {
    alert("HTMLの読み込みが完了しました！");
});
サンプルコード
通常、HTMLは上から順に読み込まれ、スクリプトもその順番で実行されます。

しかし、$(function() {...});を使うことで、HTMLの読み込みが完了した後にスクリプトを実行することができます。

この方法はほとんどのWeb制作で必要になるため、忘れずに記述しましょう。

次のステップでは、jQueryの基本構造を学びましょう！

【1-3】jQueryの基本文法

jQueryの基本構造

(13772)

jQueryの基本的な文法は「セレクタ」「メソッド」「引数」で構成されています。

特定の条件を満たす（イベント発生）場合に変化させる際には、セレクタとメソッド部分が、条件部分（何をどうした場合）を表し、引数部分が変化させる内容を表します。

条件に関係なく、特定の処理をする場合には、セレクタ・メソッド部分が、処理する部分（何の何を）を表し、引数部分が変化させる内容を表します。
基本構文
$(セレクタ).メソッド(引数);
サンプルコード
例えば、下記コードは、<button> 要素（セレクタ）のテキスト（メソッド）を「Click」（引数）に変更することを意味します。
$("button").text("Click");
サンプルコード

セレクタ

(13777)

セレクタとは、「このHTMLのどの部分を操作するか」を指定するものです。
<p>こんにちは！</p>
<button>クリックしてね</button>
サンプルコード
例えば、上のようなHTMLがあるとします。
$("p").text("こんにちは、世界！");
サンプルコード

この「<p>タグの文字を変えたい！」と思ったら、jQueryでは次のように書きます。

$("p")の部分で <p> タグを指定し、その後の .text("こんにちは、世界！") で文字を変更しています。

セレクタの種類
セレクタ 例 説明
$("p") $("p").text("変更！") <p>タグを指定
$("#Id") $("#myId").hide(); id="myId" の要素を指定
$(".class") $(".myClass").css("color", "blue"); class="myClass" の要素を指定

メソッド

(13787)

(13788)

メソッドとは、「指定した要素に対して何かをしたら」という条件を表したり、「指定した要素の何を変更するか」という処理の詳細を表すものです。
<button>押してね</button>
<p id="message">この文字を変えたい！</p>
サンプルコード
例えば、上のようなHTMLがあるとします。
$("button").click(function() {
    $("#message").text("ボタンが押されました！");
});
サンプルコード
ボタンを押したら <p> の内容を変更するには、次のように書きます。

.text()の部分が、要素のテキストを()の内容に変更する、というメソッド部分です。
よく使うメソッド一覧
メソッド 役割 例
.hide() 要素を非表示にする $("p").hide();
.show() 要素を表示する $("p").show();
.fadeIn() フェードインで表示する $("p").fadeIn(1000);
.fadeOut() フェードアウトで非表示にする $("p").fadeOut(1000);
.css() CSSを変更する $("p").css("color", "red");
.text() 要素のテキストを変更する $("p").text("新しい内容！");
.html() 要素のHTMLを変更する $("p").html("<strong>強調！</strong>");
その他、jQueryで使用可能なセレクタ・メソッドは、下記、公式サイト内でも確認可能です。

jQuery API Documentation

jQuery API Documentation

引数

(13801)

引数とは、「指定した要素に対して何かをする」処理のことです。
$("p").css("color", "blue");
サンプルコード

例えば、このコードでは .css() に2つの引数が渡されています。

  • 最初の引数 → "color"（どのスタイルを変更するか）
  • 2つ目の引数 → "blue"（どんな値にするか）
$("h1").css({
    "font-size": "30px",
    "background-color": "yellow"
});
サンプルコード
複数の引数を使う例

このコードでは、h1 のフォントサイズを 30px にし、背景色を黄色に変更しています。

jQueryのコードと動作を見てみよう

実際にコードを見て、jQueryの動作を確認しましょう。「よく使うメソッド一覧」で紹介しているメソッドを全て使用したコード（index.html）が、materialsフォルダ内の**01-3_jquery-selector**フォルダにあります。
手順
  1. index.htmlをVSCodeなどのエディタで開き、ブラウザでプレビューするか、直接ブラウザでindex.htmlを開いてください。
  2. ページをリロードし、各セクションの説明を読みながら、対応するボタンをクリックして、要素の変化を確認してください。
  3. タグ内のjQueryコードを編集して、動作がどのように変わるか試してみてください。例えば、各メソッドの引数を変更したり、他の要素に適用したりしてみましょう。
次の章では、基本的なUI実装に取り組みます。
jQueryの基本文法について確認しながら、次の課題に進みましょう。
次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH