1. ホーム
  2. jQuery

jQuery

JavaScript library

jQueryの概要

jQueryとは「JavaScriptのコードを簡単に、短く書けるようにするためのライブラリ」です。
JavaScriptでよく行う操作や難しい処理を、短いコードで実行することができます。

2006年にリリースされ、JavaScriptの処理をよりシンプルに実行できるので人気を博しました。
JavaScriptの一部としてブラウザに直接組み込まれているわけではなく、外部のライブラリとして読み込む必要があります。

ライブラリとは

ライブラリとは、プログラムにおいてよく利用される処理を再利用しやすいようにまとめたものです。

JavaScriptとjQueryの比較

要素の色を変更する

JavaScriptとjQueryで、要素の色を変更する方法を比較してみましょう。
たとえば、クラス名が「.example」の要素の色を赤に変更する場合です。

JavaScript 

var elements = document.querySelectorAll('.example');

for ( var i = 0; i < elements.length; i++ ) {
	elements[i].style.color = 'red';
}

jQuery 

$('.example').css('color', 'red');

ローディングアニメーション

JavaScriptとjQueryで、フェードアウトの方法を比較してみましょう。
JavaScriptではCSSを絡めたローディングのフェードアウトでしたが、jQueryではfadeOutというjQueryのアニメーションメソッドを使用できます。

JavaScript 

body.is-load .loading{
	opacity: 0;
	visibility: hidden;
	transition: 1000ms 1000ms ease;
}
window.addEventListener('load', function() {
	var body = document.body; // bodyを取得
	body.classList.add('is-load'); // bodyに[is-load]クラスを付与
});

jQuery 

$(window).on('load', function() {
	$('.loading').fadeOut(1000);
});

jQueryのメリット

コードがシンプルでわかりやすい

jQueryを使うと、JavaScriptよりも短くて簡潔なコードでHTMLやCSSの操作ができます。

アニメーションが手軽に使える

jQueryには、フェードインやスライドといったアニメーションがすでに用意されているため、難しいコードを書かずに動きのあるデザインを実装できます。
視覚的に変化する要素が簡単に作れるため、楽しさを感じやすいです。

ブラウザの互換性を考えなくてよい

JavaScriptでは、ブラウザごとに動きが異なる場合があり、ブラウザによって処理を分けなければならない時がたまにあります。
jQueryはそれを吸収して統一した動作を実現します。
ブラウザの違いを気にせずに使えるので、初心者でも安心してコードを書くことができます。

jQueryの準備

バージョン

jQueryには、いくつかの主要なバージョンがあり、それぞれのバージョンには新しい機能やバグ修正、パフォーマンスの向上が追加されています。
一般的に、最新のブラウザをターゲットにするなら、このバージョンを使うのが推奨されています。

jQuery 1系

初期のバージョンで、多くの古いブラウザ（特にIE6～8）をサポートしています。ですが、現在ではこのバージョンは古く、互換性維持のために使用するケースが少なくなっています。

jQuery 2系

jQuery 1.xと似ていますが、Internet Explorer 6～8のサポートが終了しました。そのため、少し軽量化されています。しかし、IE9以上を対象にするプロジェクトであれば使えるバージョンです。

jQuery 3系

現在の最新バージョンで、モダンなブラウザに向けてさらに改善されています。パフォーマンスが向上し、コードもモダンな書き方が採用されています。また、fadeOutやonなどの機能も強化されています。

jQueryをHTMLに読み込ませる

jQueryのサイトへアクセスしダウンロード。基本的には圧縮ファイルを使用します。
jQueryを使うには、HTMLでjQueryのJSファイルを読み込んでおく必要があります。
※jQueryを使う場合は、必ず先にjQueryのファイルを読み込ませて、自身が記述するscriptファイルを読み込ませる。 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="./js/jquery-3.6.0.min.js"></script>
	<script src="script.js" defer></script>
</head>
<body>

</body>
</html>

jQueryの基本構文

はじめに

今までは、自分で記述するJavaScriptファイルのみで完結していましたが、これからはjQueryやプラグインなど、別の人が作成したファイルを読み込むことが増えてきます。
その際、同じ名前のグローバル変数が上書きされ、意図しない動きやバグが起きることがあります。

これからはグローバル変数のバッティングを避けるために、scriptファイル全体を$(function() { ... });形式で囲いローカル変数で使用します
※バッティング（プログラミングにおいて同じ名前や機能がぶつかり合い、予期しない動作やエラーが発生すること） 

$(function(){
	// 処理の記述
});

または、以下のように書くこともできます。

$(document).ready(function() {
	// ページが読み込まれた後に実行したい処理
});

上記記述は、ページが読み込まれた後に実行する処理を書くための基本構文です。
ページが完全に読み込まれてから実行することで、要素が存在しないエラーを防ぎます。

scriptタグでdefer属性を使っているので、上記記述は不要に感じますが、グローバル変数のバッティングを防ぐ目的があります。

要素の選択

jQueryではCSSと同じ書き方で要素を選択します。例えば、IDを持つ要素、クラスを持つ要素、タグで選択できます。

$('#id名');      // IDで選択
$('.class名');   // クラス名で選択
$('タグ名');     // タグで選択

HTML・テキストの操作

.html()や.text()メソッドを使って、要素の内容を取得・変更できます。

text()

.text()は、選択した要素のテキスト内容を操作するためのメソッドです。
取得をしたり変更したりできます。 

// テキストの取得
var textContent = $('.example').text();

// テキストの設定
$('.example').text('新しいテキスト');

.html()

.html()は、選択した要素のHTMLの内容を操作するためのメソッドです。
text()と似ていますが、HTMLタグを含んだ内容を設定したり取得したりする場合に使います。 

// HTMLの取得
var htmlContent = $('.example').html();
console.log(htmlContent);

// HTMLの設定
$('.example').html('<p>新しいHTML内容</p>');

CSSの操作

.css()を使うと、特定の要素のスタイルを直接変更したり、現在のスタイルを取得したりすることができます。

CSSプロパティの取得

.css()にプロパティ名を指定すると、選択した要素のそのプロパティの現在の値を取得できます。

var color = $('.example').css('color');

CSSプロパティの設定

.css()に「プロパティ名」と「値」を指定すると、その要素のスタイルを設定できます。
複数のプロパティを一度に設定する場合、オブジェクト形式でプロパティ名と値を指定します。 

// 単一のプロパティを設定する
$('.example').css('color', 'red');

// 単一のプ複数のプロパティを設定するロパティを設定する
$('.example').css({
	'color': 'red',
	'background-color': 'yellow',
	'font-size': '20px'
});

クラスの追加・削除

特定の要素に対してクラスを追加・削除・切り替え（トグル）するためのメソッドが用意されています。

.addClass() - クラスの追加

.addClass()は、要素に新しいクラスを追加するメソッドです。
スペースで区切ることで、複数のクラスを一度に追加することもできます。 

// 基本
$('.example').addClass('active');

// 複数のクラスを追加する
$('.example').addClass('active highlight');

.removeClass() - クラスの削除

.removeClass()は、要素から指定したクラスを削除するメソッドです。
スペースで区切ることで、複数のクラスを一度に削除することが可能です。 

// 基本
$('.example').removeClass('active');

// 複数のクラスを削除する
$('.example').removeClass('active highlight');

.toggleClass() - クラスの切り替え（トグル）

.toggleClass()は、要素にクラスが存在する場合は削除し、存在しない場合は追加するメソッドです。

// 基本
$('.example').toggleClass('active');

イベントの設定

jQueryでは、.on()メソッドを使ってイベントを設定するのが基本です。

// 基本
$(セレクタ).on('イベント名', function() {
	// イベントが発生したときの処理
});

クリックイベント 

$('.button').on('click', function() {
	alert('ボタンがクリックされました！');
});

ロードイベント 

$(window).on('load', function() {
	console.log('ページが読み込まれました');
});

複数のイベントを同時に設定する

複数のイベントを同時に設定するには、イベント名をスペースで区切ります。

$('window').on('load resize', function() {
	// 処理
});

イベントオブジェクト

イベントが発生すると、eventオブジェクトが関数に自動的に渡されます。
これにより、発生したイベントに関する情報（押されたキー、クリック位置など）を取得できます。 

$('.button').on('click', function(event) {
	console.log('クリック位置:', event.pageX, event.pageY); // クリック位置を取得
});

また、event.preventDefault();を使うとデフォルトの動作（リンク遷移、フォーム送信など）を無効化できます。

$('.button').on('click', function(event) {
	event.preventDefault(); // リンク遷移を無効化
});

jQueryのアニメーション

jQueryには、要素にアニメーション効果を簡単に適用できるメソッドがいくつか用意されています。
これにより、スライドやフェードイン・フェードアウトといったアニメーションを簡単に実装できます。

.fadeIn()と.fadeOut()

.fadeIn()

要素をフェードイン（不透明度（opacity）を0から1まで段階的に増加）させます。

基本的な挙動
  1. 初期状態がdisplay: none;またはopacity: 0の要素に対して使います。
  2. アニメーション終了後、opacity: 1になり、displayプロパティがblock（またはその要素のデフォルトのdisplay値）に変更されます。
// フェードイン
$('.example').fadeIn(1000);  // 1秒かけてフェードイン

.fadeOut()

要素をフェードアウト（不透明度（opacity）を1から0まで段階的に減少）させます。

基本的な挙動
  1. 初期状態がdisplay: none;またはopacity: 0 以外の要素に対して使います。
  2. アニメーション終了後、opacity: 0になり、display: none;に設定されます。
// フェードアウト
$('.example').fadeOut(500);  // 0.5秒かけてフェードアウト

.slideDown()と.slideUp()

.slideDown()

要素を下方向にスライドさせながら表示します。

基本的な挙動
  1. 要素のheightを0から元の高さ（自動計算された高さ）まで増加させることで表示します。
  2. 初期状態がdisplay: none;の要素に使用します。
  3. アニメーション終了後、displayプロパティがblock（またはその要素のデフォルト値）に設定されます。
// スライドダウン
$('.example').slideDown(1000);  // 1秒かけてスライドダウン

.slideUp()

要素を上方向にスライドさせながら非表示にします。

基本的な挙動
  1. 要素のheightを元の高さから0に向かって減少させることで非表示にします。
  2. 初期状態がdisplay: none;以外の要素に使用します。
  3. アニメーション終了後、display: none;に設定されます。
// スライドアップ
$('.example').slideUp(500);     // 0.5秒かけてスライドアップ

.animate()

.animate()は、特定のCSSプロパティを変化させることで、自由なアニメーションを実現します。

$('.example').animate({
	width: '200px',     // 幅を200pxに変更
	opacity: 0.5        // 不透明度を0.5に変更
}, 1000);               // 1秒かけてアニメーション

プロパティ: 数値の変化ができるCSSプロパティ
引数: アニメーションの時間（ミリ秒）。例えば、1000ミリ秒なら1秒でアニメーションが完了します。

イージングオプション

jQueryには2種類の基本的なイージングが用意されています。

  • swing（デフォルト）：アニメーションの開始と終了がゆっくりで、中間が速くなるイージングです。視覚的に自然な動きを感じさせるため、多くのアニメーションでよく使用されます。
  • linear：アニメーションが常に一定の速度で進むイージングです。開始から終了まで一貫した動きで、機械的な動きに適しています。
$('.example').animate({ width: '200px' }, 1000, 'swing');  // デフォルト
$('.example').animate({ width: '200px' }, 1000, 'linear'); // 一定速度

※ 「jQuery UI」というライブラリを追加することで、さらに豊富なイージング効果が利用可能になります。

コールバック関数

コールバック関数とは、特定の処理が終わったあとに実行される関数のことです。
jQueryのアニメーションメソッド（.fadeIn()や.slideUp()など）では、アニメーションが完了した後に実行したい処理をコールバック関数として指定することができます。

下記例では、1秒かけてフェードアウトが完了した後に、メッセージが表示されます。 

$('.example').fadeOut(1000, function() {
	console.log('フェードアウトが完了しました');
});

アニメーションの制御

停止

.stop()メソッドを使って、実行中のアニメーションを停止できます。

$('.example').stop();  // 現在のアニメーションを停止

チェインメソッド

jQueryではメソッドを連続して使うことができるので、次のようにアニメーションを連続して実行することができます。

$('.example').fadeIn(500).slideDown(500).fadeOut(500);
$('.example')
	.animate({ width: '300px' }, 1000)   // 1秒かけて幅を300pxに
	.animate({ height: '200px' }, 1000)  // 続けて1秒で高さを200pxに
	.animate({ opacity: 0.3 }, 500);     // さらに0.5秒で透明度を0.3に

プラグインの利用

jQueryのプラグインとは、jQueryを使って作成された再利用可能なコードのパッケージのことです。
特定の機能や効果を簡単に実装できるようにした便利なツールで、多くの場合、数行のコードを追加するだけで使えます。

jQueryのプラグインの多くは、開発者が作成し、公開しているものです。
世界中の開発者が自分のプロジェクトで便利だと思ったツールや機能をプラグインとして作り、他の人にも役立ててもらうために公開しています。

特徴

簡単に使える

jQueryプラグインは、複雑な機能でも簡単に使えるように作られています。初心者でも短いコードで利用できます。

再利用可能

プラグインを使えば、同じコードを何度も書かずに使い回せます。

カスタマイズ可能

多くのプラグインはオプションが用意されており、自分のプロジェクトに合わせて設定を変更できます。

プラグインを使うときの注意点

ライセンスの確認

多くのプラグインはMITライセンスなど自由に使えるライセンスですが、商用利用の場合はライセンス条件を確認することが重要です。

依存性と互換性

プラグインによっては特定のjQueryのバージョンに依存している場合があります。
使用しているjQueryのバージョンと互換性があるかを事前にチェックしてください。