2024.01.08
2024.01.08

【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾）

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

PENGIN

前回はJavaScriptの基礎的な文法を学びました。
今回はJavaScriptのライブラリであるjQueryについて紹介するよ！！

この記事はjQueryを学ぶステップの連載の第三回です！
以下のステップでWebデザイナーが抑えておくべき知識を学びましょう！

JavaScriptとは？何ができるか解説！（js学習ステップ第一弾）
【Webデザイナー向け】JavaScriptsの文法講座（js学習ステップ第二弾）
【これだけ覚えて！】jQueryの書き方（js学習ステップ第三弾）（この記事です）
【コピペでできる！】jQueryを使用したハンバーガーメニューの作り方

jQueryとは

jQueryとはJavaScriptのライブラリの一つです。ライブラリというのは、プログラムの処理をまとめたもののことを言います。JavaScriptでそのまま書くと何行にも及ぶ処理を、jQueryを使用することで簡単に書くことができます。

jQueryを使用すると、JavaScriptの記述が短くて済むと覚えておけば問題ないです。

jQueryの使い方

jQueryを使用するための準備

実際にjQueryを使用してみましょう。まずは準備です！

index.htmlとscript.jsという2つのファイルを用意して、index.htmlには以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>


  <script src="script.js"></script>
</body>
</html>

jQueryを使うためにはCDNを使います。下記記事を参考に、CDNを読み込んでみましょう。

それか下記のCDNサイトから直接確認してみてください。

>> Hosted Libraries | Google Developers

サイトにアクセスしたら、最新バージョンのjQueryのCDNをコピーします。そうしたら、index.htmlのbodyタグの閉じタグの直前にペーストしましょう。

このときにjsファイルを読み込む記述の上に貼り付けるように気をつけてください。順番が違うとうまく作動しない場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>

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

index.htmlのbodyタグ内が空っぽなので、ブラウザには何も表示されない状態になっています。ブラウザにテキストとボタンを表示したいので以下のように記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stle.css">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text">テキスト</div>
  <div class="btn">ボタン</div>
　
　<!-- 以下jQUery CDNとjsファイル読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

.text {
	background-color: #dd4;
	color: #222;
	font-size: 40px;
	font-weight: bold;
	margin: auto;
	text-align: center;
	width: 700px;
}
.btn {
	background-color: orange;
	border-radius: 24px;
	color: #fff;
	font-weight: bold;
	line-height: 48px;
	margin: 30px auto 0;
	text-align: center;
	width: 200px;
}
.btn:hover {
	cursor: pointer;
	opacity: .8;
}

ブラウザの表示が以下のようになっていればOKです。

CDNはこちらの記事で詳しく解説

>> 【最新版】jQueryのCDNを読み込む方法【超簡単です！】

これだけ覚えて！jQueryの書き方

jQueryの書き方は、これだけ覚えましょう！

$("セレクタ01").on('イベント',function(){
  $("セレクタ02").メソッド(値);
});

上の記述を日本語にすると、「セレクタ01」を「イベント」すると、「セレクタ02」が「メソッド(値)」になるとなります。

セレクタの指定方法はCSSと同様でHTML要素名、class名、id名などを指定できます。シングルクオテーションまたはダブルクオテーションで囲みましょう。

イベントはjQueryの処理が動くタイミングを指定します。以下のものをよく使用します。

cllick：クリックしたとき
mouseover：カーソルが要素の上に乗ったとき
mouseout：カーソルが要素の上から移動したとき
scroll：スクロールしたとき
load：ローディングが完了したとき

メソッドでHTML要素の操作方法を指定します。例えば、addClassというメソッドを使用すると、指定した要素に対してclassを追加できます。

試しにscript.jsに以下のような記述をしてみましょう！

$(".btn").on('click',function(){
  $('.text').css('color','red');
});

.cssは、cssを上書きするメソッドです。
ブラウザを表示して、”btn”をクリックすると、”text”の文字色が赤くなることを確認してください。

このように、jQueryを使用するとユーザーの行動に合わせて、要素を操作することができます。

$(".btn").on('click',function(){
  $(this).css('color','red');
});

$(this)とはイベント発生要素を取得します。

上の例は、”.btn”をクリックすると、”this”（.btn）のcssをcolor:redに変更するという内容の記述になります。

btnクラスが付与されている要素が複数あるときでも、上の記述がされていると、クリックされた対象要素のみにイベントが適用します。

セレクタはCSSと同じように、classを指定する場合は「.」をつけ、HTML要素を指定する場合はHTML要素名をそのまま書きます。また、idを指定するときは「#」を先頭につけます。

イベントやメソッドは複数ありますが、全てを覚える必要はありません。以降、よく使うメソッドを使いながら、jQureryでかんたんな記述をしてみましょう！

jQueryを書いてみよう！

show、hide、toggle

まずは要素の表示・非表示を操作する、show,hide,toggleについて見てみましょう！index.htmlを以下のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stle.css">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text visible-text">テキスト</div>
  <div class="text invisible-text">テキスト</div>
  <div class="btn">ボタン</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

.text {
	background-color: #dd4;
	color: #222;
	font-size: 40px;
	font-weight: bold;
	margin: auto;
	text-align: center;
	width: 700px;
}
.invisible-text {
	display: none;
}
.btn {
	background-color: orange;
	border-radius: 24px;
	color: #fff;
	font-weight: bold;
	line-height: 48px;
	margin: 30px auto 0;
	text-align: center;
	width: 200px;
}
.btn:hover {
	cursor: pointer;
	opacity: .8;
}

.textを2つ用意して、visible-textと.invisible-textに分けました。.invisible-textはdisplay:none;で非表示にしています。

script.jsには以下のように記述します。

$('.btn').on('click',function(){
  $('.visible-text').hide(500);
  $('.invisible-text').show(500);
});

showは非表示になっている要素を表示し、hideは表示されている要素を非表示にするメソッドです。

上の例では.btnをクリックしたら、.visible-textが500ミリ秒かけて非表示になり、.invisible-textが500ミリ秒かけて表示されます。

上の例では、1回.btnをクリックすると、以降は動かなくなります。そのため、.btnをクリックするたびに表示・非表示を切り替えたい場合はtoggleというメソッドを使用します。

$('.btn').on('click',function(){
  $('.text').toggle(500);
});

上の例では、.btnをクリックするたびに、テキストの表示・非表示が入れ替わります。

fadeIn、fadeOut、fadeToggle

今度はフェードインやフェードアウトさせてみましょう。
script.jsを以下のように書き換えます。

$('.btn').on('click',function(){
  $('.invisible-text').fadeToggle(500);
});

先程と表示されるときのアニメーションが変化しました。上記の例では、.btnをクリックすると、500ミリ秒かけて.invisible-textがフェードインしたり、フェードアウトしたりします。

１度のフェードイン・フェードアウトで完結させたい場合はfadeToggleではなく、fadeIn、fadeOutを使用します。

slideIn、slideOut、slideToggle

表示・非表示系はこれでラストです。
slideToggleはアコーディオンメニューを実装するときに使用することが多いメソッドです。

script.jsを以下のように書き換えましょう。

$('.btn').on('click',function(){
  $('.invisible-text').slideToggle(500);
});

これでアコーディオンの開閉のように.invisible-textが表示されたり非表示になったりします。

addClass、removeClass、tggleClass

jQueryを使用すると、HTML要素に対してclassを付与したり外したりする操作も簡単にできます。これはjQueryでハンバーガーメニューを作成する際にも必要になってきますので、しっかりと理屈を抑えておきましょう。

まず、CSSの記述を追記します。今回は文字の色を変更するために.redという記述を追加しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stle.css">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text visible-text">テキスト</div>
  <div class="text invisible-text">テキスト</div>
  <div class="btn">ボタン</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

.text {
	background-color: #dd4;
	color: #222;
	font-size: 40px;
	font-weight: bold;
	margin: auto;
	text-align: center;
	width: 700px;
}
.invisible-text {
	display: none;
}
.btn {
	background-color: orange;
	border-radius: 24px;
	color: #fff;
	font-weight: bold;
	line-height: 48px;
	margin: 30px auto 0;
	text-align: center;
	width: 200px;
}
.btn:hover {
	cursor: pointer;
	opacity: .8;
}
.red {
	color: red;
}

それではscript.jsを以下のように書き換えましょう。

$('.btn').on('click',function(){
  $('.text').toggleClass('red');
});

これで、.btnをクリックすると、.textに対して、.redというclassが付与されたり、外されたりすることになります。ブラウザを表示してボタンのクリックをするごとにテキストの文字色が変われば成功です！

最後に

jQueryのメソッドはいろいろありますが、とりあえずは上記で紹介したものを使用できれば問題ありません。特にtoggleClassは非常に汎用性が高いので、積極的に使用していきましょう！