jQueryとは？初心者にわかりやすく基本操作と特徴を徹底解説

jQueryとは何か？
1. ✅ 初心者でも理解できる！JavaScriptを簡単にする魔法のライブラリ
jQueryの特徴とメリット
1. ✅ セレクタからアニメーションまで、シンプルな記述で高機能
  1. 特徴
  2. メリット
jQueryを動かす準備
jQueryの基本構文
1. ✅ まずは基本の「構文パターン」を理解しよう
2. 【第2回】🔹jQueryセレクタとイベント処理の基本
セレクタとは？
1. ✅ jQueryでHTML要素を指定・操作する第一歩
2. 主なセレクタ一覧
イベント処理の基本
1. クリックイベントの処理方法
  1. opacityをもとに戻す
2. フォームイベントの扱い方
フォームのイベント処理
1. ✅ 入力フォームに対する動作もスマートに実装
  1. 主なフォームイベント
  2. 例：送信時に値を取得
DOMとは？
1. ✅ HTMLの構造をプログラムで操作できる仕組み
2. 例：基本的なDOM構造
jQueryでのDOM操作
1. ✅ 必須操作を覚えておけば、幅広い応用が可能
CSSの変更（スタイル操作）
1. ✅ css() メソッドで簡単にデザイン変更が可能
アニメーションの基本
1. ✅ jQueryなら、アニメーションも1行で実装できる
  1. 基本アニメーション
  2. フェード・スライド
カスタムアニメーションの実装
1. ✅ animate() メソッドで細かく制御可能
AJAXとは？
フォーム操作とバリデーション
1. ✅ 入力値の取得と送信
2. ✅ フォーム送信の制御
クライアントサイドバリデーション（入力チェック）
サーバーサイドバリデーション（PHP例）
ホバーエフェクトの追加
jQueryでのスライドショー導入（例：slick.js）
まとめと今すぐできるアクション
1. ✅ 本記事の振り返りポイント
2. ✅ 次にやってみること

jQueryとは何か？

✅ 初心者でも理解できる！JavaScriptを簡単にする魔法のライブラリ

「JavaScriptのコードが難しくて挫折した…」
そんな方におすすめなのが、**jQuery（ジェイクエリ）**です。

jQueryとは、JavaScriptの処理をより短く、簡潔に書けるようにしたライブラリであり、HTML操作やイベント制御、アニメーションなどを簡単に実装できるのが特徴です。

特に、次のような用途で広く使われています。

ボタンや画像のクリック処理
要素の表示・非表示
スライドショーや動的フォーム処理
AJAXによる非同期通信

jQueryの特徴とメリット

✅ セレクタからアニメーションまで、シンプルな記述で高機能

特徴

セレクタとDOM操作：CSSのように要素を選択して操作
イベント処理：クリックや入力などの操作を簡単に検知
アニメーション：fadeやslideなど多彩な視覚効果を簡単に実装
AJAX対応：ページ遷移なしでのデータ通信が可能

メリット

初心者にやさしい：JavaScriptの煩雑な処理を簡略化
クロスブラウザ対応：各ブラウザの違いを気にせずに動作
豊富なプラグイン：スライダーやカレンダーなど再利用可能
学習コストが低い：書きやすく、デバッグもしやすい

💡補足
現在ではモダンJavaScript（ES6以降）で同様のことも可能ですが、jQueryは依然として業務システムやレガシーコードで使われ続けており、実務では理解が必要な技術です。

jQueryを動かす準備

jQueryを使ってWebページに動きを加えるには、まずライブラリ（jQuery本体）を読み込む必要があります。これをしていないと、どんなコードを書いても動きません。

✅ CDNからjQueryを読み込む方法（推奨）

最も簡単なのは、CDN（コンテンツ配信ネットワーク）経由で読み込む方法です。Googleなどの信頼できる提供元からオンラインで読み込めば、ローカルにファイルを保存する必要もありません。

以下をHTMLの<head>タグ内、または</body>直前に挿入しましょう。

💡 ポイント：

オンライン環境であればCDNでOK。
バージョン指定（ここでは3.6.0）を明記すると、安定して動作します。

<!-- jQueryのCDN読み込み（Google提供） -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTML

✅ ローカルにダウンロードして使う方法（オフラインでも動かす）

jQuery公式サイト（https://jquery.com）から .min.js ファイルをダウンロード。
任意のプロジェクトフォルダに保存。
HTMLに以下のように読み込むタグを記述。

<script src="js/jquery-3.6.0.min.js"></script>

HTML

※ js/ は保存したディレクトリに応じて調整してください。

✅ HTMLの構造（動作確認の基本テンプレート）

以下のような最小構成で、jQueryが正しく動作するかチェックできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryテスト</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="btn">クリック</button>

  <script>
    $(function() {
      $('#btn').click(function() {
        alert('jQueryが動作しました！');
      });
    });
  </script>
</body>
</html>

HTML

✅ ブラウザで上記HTMLを開き、ボタンをクリックしてアラートが出れば成功です。

これでjQueryを使う準備が整いました。次に、実際にどのような書き方で処理を記述するのか、「jQueryの基本構文」へ進んでいきましょう。

jQueryの基本構文

✅ まずは基本の「構文パターン」を理解しよう

$(document).ready(function() {
  // jQueryの処理をここに書く
});

JavaScript

または、もっと短くこのようにも書けます。

$(function() {
  // jQueryの処理をここに書く
});

JavaScript

この構文は、HTMLの読み込みが完了してから処理を実行するための「初期化コード」です。

【第2回】🔹jQueryセレクタとイベント処理の基本

セレクタとは？

✅ jQueryでHTML要素を指定・操作する第一歩

jQueryのセレクタは、CSSとほぼ同じ書き方でHTML要素を取得できるのが特徴です。これにより、複雑なDOM操作も直感的に行うことができます。

主なセレクタ一覧

セレクタ	意味	例
$(‘p’)	`<p>`要素を選択	全ての段落を取得
$(‘.item’)	class=”item”を持つ要素	`.item`を全て操作
$(‘#main’)	id=”main”を持つ要素	一意の要素を操作
$(‘[type=”text”]’)	属性セレクタ	type=”text”のinput

💡複合セレクタも可能

$('div.container .item') // コンテナ内のアイテム

JavaScript

イベント処理の基本

クリックイベントの処理方法

jQueryでは、イベント処理を簡単に記述できます。以下は、クリックやマウスオーバーイベントの例です。

$(function() {
    // ボタンのクリックイベント
    $('button').click(function() {
        alert('ボタンがクリックされました！'); // アラートを表示
    });

    // 画像のマウスオーバーイベント
    $('img').mouseover(function() {
        $(this).css('opacity', '0.5'); // 透明度を変更
    });
});

JavaScript

クリックイベント: click() メソッドを使用して、ボタンがクリックされたときの処理を記述しています。
マウスオーバーイベント: mouseover() メソッドを使用して、画像にマウスが乗ったときに透明度を変更しています。

これらのイベント処理を利用することで、ウェブページに動的でインタラクティブな機能を簡単に追加できます。たとえば、ユーザーの操作に応じてコンテンツを変更することで、利便性や体験価値を向上させることが可能です。

opacityをもとに戻す

マウスアウトイベント: mouseout() メソッドを使うことで、画像からマウスが離れたときに透明度を元に戻す処理を追加しています。
mouseover と組み合わせることで、「マウスが乗ったら薄く、離れたら戻る」といった視覚的なインタラクションを実現できます。

$(function() {
    // ボタンのクリックイベント
    $('button').click(function() {
        alert('ボタンがクリックされました！'); // アラートを表示
    });

    // 画像のマウスオーバーイベント
    $('img').mouseover(function() {
        $(this).css('opacity', '0.5'); // 透明度を変更
    });

    // マウスが離れたら透明度を元に戻す
    $('img').mouseout(function() {
        $(this).css('opacity', '1');
    });
});

JavaScript

フォームイベントの扱い方

フォームイベントは、ユーザーがフォームの要素（例えば、入力フィールドやボタン）を操作したときに発生します。jQueryを使うと、これらのイベントを簡単に処理することができます。

主なフォームイベント

submit: フォームが送信されたときに発生します。
focus: 入力フィールドにフォーカスが当たったときに発生します。
blur: 入力フィールドからフォーカスが外れたときに発生します。
change: 入力フィールドの値が変更されたときに発生します。

フォーム送信イベントの処理

フォームが送信されたときに、送信をキャンセルしてカスタム処理を行う例を示します。

See the Pen jQuery1 by sho-ta (@sho-ta) on CodePen.

フォーカスとブラーイベントの処理

入力フィールドにフォーカスが当たったり、外れたりしたときの処理を行う例を示します。

See the Pen jQuery2 by sho-ta (@sho-ta) on CodePen.

値の変更イベントの処理

入力フィールドの値が変更されたときに処理を行う例を示します。

See the Pen jQuery3 by sho-ta (@sho-ta) on CodePen.

複数のイベントを一つの要素にバインド

一つの要素に複数のイベントをバインドすることもできます。例えば、以下のように書くことができます。

See the Pen jQuery4 by sho-ta (@sho-ta) on CodePen.

これにより、一つの入力フィールドに対して、フォーカス、ブラー、変更のイベント処理をまとめて記述することができます。

フォームのイベント処理

✅ 入力フォームに対する動作もスマートに実装

主なフォームイベント

イベント	説明
`submit`	フォーム送信時
`focus`	フォーカスが当たったとき
`blur`	フォーカスが外れたとき
`change`	入力値が変更されたとき

例：送信時に値を取得

$('#myForm').submit(function(event) {
  event.preventDefault();
  const username = $('#username').val();
  alert('送信されたユーザー名: ' + username);
});

JavaScript

DOMとは？

✅ HTMLの構造をプログラムで操作できる仕組み

DOM（Document Object Model）とは、HTMLをツリー構造で捉え、各要素をノード（部品）としてプログラムで操作できる仕組みです。

例：基本的なDOM構造

<!DOCTYPE html>
<html>
<head>
    <title>サンプルページ</title>
</head>
<body>
    <h1>見出し1</h1>
    <p>これは段落です。</p>
</body>
</html>

HTML

Document
 └── html
      ├── head
      │    └── title
      │         └── サンプルページ
      └── body
           ├── h1
           │    └── 見出し1
           └── p
                └── これは段落です。

Bash

この構造をjQueryで操作することで、要素の追加・削除・内容変更などが可能になります。

jQueryでのDOM操作

✅ 必須操作を覚えておけば、幅広い応用が可能

$('#myText').text('新しいテキスト');

// 要素の追加
$('ul').append('<li>新しい項目</li>');

// 要素の削除
$('.removeMe').remove();

JavaScript

これらの操作を組み合わせることで、ユーザーの操作に応じてページの内容を柔軟に更新できます。

CSSの変更（スタイル操作）

✅ css() メソッドで簡単にデザイン変更が可能

$('#myText').css('color', 'blue');

// 複数のスタイルをまとめて変更
$('#myText').css({
  'color': 'blue',
  'font-size': '20px',
  'background-color': 'yellow'
});

JavaScript

アニメーションの基本

✅ jQueryなら、アニメーションも1行で実装できる

基本アニメーション

$('#myBox').animate({
  width: '200px',
  height: '200px'
}, 1000); // 1秒間でサイズ変更

JavaScript

フェード・スライド

$('#myBox').fadeOut(1000); // フェードアウト
$('#myBox').slideDown(1000); // スライドダウン

JavaScript

カスタムアニメーションの実装

✅ animate() メソッドで細かく制御可能

$('#changeStyle').click(function() {
  $('#myBox').animate({
    width: '100px',
    height: '100px'
  }, {
    duration: 2000,
    easing: 'swing',
    step: function(now, fx) {
      $('#currentValue').text('現在の値: ' + now);
    },
    complete: function() {
      $('#completionMessage').text('アニメーション完了！');
    }
  });
});

JavaScript

💡 色のアニメーションは jQuery UI を読み込むと可能になります。

AJAXとは？

✅ ページを更新せずにサーバーと通信できる技術

AJAX（Asynchronous JavaScript and XML）は、ページをリロードせずにサーバーとデータの送受信ができる技術です。jQueryを使えば、AJAXの実装も非常に簡単になります。

jQueryでのAJAX処理

✅ .get() メソッドで簡単なデータ取得

$.get('https://jsonplaceholder.typicode.com/posts/1', function(data) {
  console.log(data);
});

JavaScript

✅ .post() メソッドでデータ送信

const userData = { username: 'user', password: 'pass' };
$.post('https://jsonplaceholder.typicode.com/posts', userData, function(response) {
  console.log(response);
});

JavaScript

$.ajax()メソッドで柔軟に制御

$.ajax({
  url: 'https://jsonplaceholder.typicode.com/posts/1',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log('取得成功:', data);
  },
  error: function() {
    console.log('取得失敗');
  }
});

JavaScript

💡 $.ajax()はオプションが豊富で、GET・POST以外のHTTPメソッドやタイムアウト設定、カスタムヘッダの追加も可能です。

取得したデータのHTML表示

$.get('https://jsonplaceholder.typicode.com/users', function(data) {
  let list = '';
  $.each(data, function(i, user) {
    list += `<li>${user.name}</li>`;
  });
  $('#userList').html(`<ul>${list}</ul>`);
});

JavaScript

HTMLデータの取得と挿入

$.get('https://example.com/snippet.html', function(htmlData) {
  $('#container').html(htmlData);
});

JavaScript

エラーハンドリングと非同期処理の注意点

非同期処理はコールバックやPromiseで制御
失敗時はfail() や error() を必ず設定
セキュリティ対策（CORS/XSS/CSRF）も必須

フォーム操作とバリデーション

✅ 入力値の取得と送信

jQueryでは、val()メソッドを使ってフォーム内の入力値を簡単に取得できます。たとえば、ログインフォームでユーザー名とパスワードを取得したい場合は以下のように記述します。

const username = $('#username').val();
const password = $('#password').val();

JavaScript

✅ フォーム送信の制御

デフォルトでは、フォームの送信ボタンをクリックするとページがリロードされます。これを防ぎ、JavaScriptで独自の処理を追加したい場合は、以下のようにsubmitイベントを使います。

$('#loginForm').submit(function(event) {
  event.preventDefault();
  const name = $('#username').val();
  console.log('送信された名前:', name);
});

JavaScript

クライアントサイドバリデーション（入力チェック）

フォーム送信前に、入力値が空でないかなどの簡単なチェックを行うことで、ユーザーの操作ミスを防げます。以下はその実装例です。

$('#myForm').submit(function(event) {
  let isValid = true;
  const username = $('#username').val().trim();
  const password = $('#password').val().trim();

  if (username === '') {
    $('#usernameError').text('ユーザー名を入力してください。');
    isValid = false;
  } else {
    $('#usernameError').text('');
  }

  if (password === '') {
    $('#passwordError').text('パスワードを入力してください。');
    isValid = false;
  } else {
    $('#passwordError').text('');
  }

  if (!isValid) event.preventDefault();
});

JavaScript

サーバーサイドバリデーション（PHP例）

クライアント側でのチェックはユーザー操作の補助ですが、セキュリティ上の理由から、サーバー側でも必ずバリデーションを行う必要があります。以下は基本的なPHPコードの例です。

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $username = $_POST["username"];
  $password = $_POST["password"];
  if (empty($username) || empty($password)) {
    echo "入力エラー";
    exit;
  }
  echo "登録完了";
}

PHP

ホバーエフェクトの追加

要素にマウスが乗ったとき、または離れたときに、見た目を変えることでユーザーに視覚的な反応を返せます。

$('.box').hover(
  function() { $(this).css('background-color', '#eee'); },
  function() { $(this).css('background-color', '#fff'); }
);

JavaScript

💡 CSSのtransitionを併用するとアニメーション的に滑らかに変化

jQueryでのスライドショー導入（例：slick.js）

Slickは人気のjQueryカルーセルプラグインで、複数の画像やコンテンツをスライド形式で表示できます。

<!-- slickライブラリの読み込み -->
<link rel="stylesheet" href="slick.css">
<script src="jquery.js"></script>
<script src="slick.min.js"></script>

<!-- スライドショーの初期化コード -->
<script>
  $(document).ready(function(){
    $('.slider').slick({
      autoplay: true,
      arrows: true,
      dots: true
    });
  });
</script>