【jQuery入門】初心者向けに基本を分かりやすく解説します。

2021-08-06

基礎勉強する女の子

本記事は、「jQuery」入門用の記事となります。

基本的な考え方、書き方などを、極力分かりやすいようにザックリと書いていき、「jQuery」の知識が無い方が、30分くらいでサクっと読んだだけでjQueryの基本が理解できることを目指します。

もちろんjQueryについて網羅しているわけではないので、詳しく知りたい場合は各自調べてみてください。

また、HTMLとCSSの知識は最低限必要なので、ご注意ください。

最後に簡単なサンプルコードも置いておくので、参考にしてください。

jQueryとは？

jQueryとは一言で言えば「JavaScriptのライブラリ」です。

JavaScriptはブラウザ内で働くプログラム言語で、HTMLの要素を色々と変更することができます。

Webサイト内の「スライダー」や「ボタンを押すとメニューが出るボタン」などの動きも、JavaScriptによって行われています。

「ライブラリ」は説明が難しいですが、「用途ごとに機能をまとめたもの」ぐらいに覚えていてください。

jQueryを使うことで、JavaScriptの記述を簡潔にすることができます。

イメージが分かりにくいと思うので、ちょっと「オレンジジュースの作り方」を例にしてみます。

JavaScriptを直接記述する場合

「オレンジを使います」
「オレンジの皮を向きます」
「オレンジの種を取り除きます」
「ミキサーに入れます」
「ミキサーのスイッチを押します」
「グラスに注ぎます」

というように、一つ一つの動作を細かく記述する必要があります。

jQueryを使う場合

「今からjQueryを使います」
「このオレンジでジュースを作ります」

というように、少しの記述で済みます。

「ジュースの作り方」がjQueryにまとめられているため、JavaScriptを直接記述するよりも簡単に記述することができるのです。

jQueryを使う準備について

ここから、実際にjQueryを使っていろいろやっていきたいと思いますが、まず準備について解説します。

jQueryは「機能をまとめたもの」であり、機能をまとめるために沢山のコードが記述されています。

その記述を、htmlファイルに読み込ませる必要があります。

htmlファイルでは<body>タグを使用しますが、その<body>タグ内の終わりに<script>タグから読み込ませるよう、下記のように記述します。

<body>
　　<!-- ここにHTMLをいろいろ書いているはずです。-->
　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

準備としてはこれだけです、簡単ですね。

これはgoogleがインターネット上で読み込めるようにまとめてくれたCDNからjQueryを読み込む方法で、「https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js」を開くとコードがひたすら書いてあるページが確認できます。

jQueryの公式サイトからファイルをダウンロードして格納し、それを呼び出す方法もありますが、インターネット上から読み込ませた方が管理が簡単で済み、容量の削減にもなり推奨されています。

また「3.5.1」の部分がバージョンです。

現在（2020/9/12時点）では上記のバージョンが最新のものですが、機能の追加や修正などでバージョンは随時更新されていきます。

最新バージョンについては、こちらより確認が可能です。

jQueryの記述における考え方

実際にjQueryを記述していく前に、まず大事な考え方について、記載していきます。

jQuery（というかプログラミング全般？）の記述において大事なことは、「いつ」「何が」「どうなる」の3点をしっかり考えるということです。

例えば「ボタンを押すとテキストの色が赤くなる」という機能を例にして日本語で単純に考えると、「いつ：ボタンが押されたとき」「何が：テキストの色が」「どうなる：赤くなる」です。

上記機能を下記のHTML要素で具体的に考えてみるとどうでしょうか。

<button type="button" class="btn">ボタン</button>
<p class="text">こんにちは！</p>
.text{
  color:black;
}

HTMLの要素で考えると、「いつ："btn"のクラスを持つ要素が押されたとき」「何が："text"のクラスを持つ要素が」「どうなる：プロパティ"color"の値が"red"になる」となり、これをプラグラムの決まり通りに記述していけばいいのです。

ちなみにこの命令を記述するとこうなります。

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

jQueryを記述するにあたっては、このように、まず「いつ」「何が」「どうなる」を日本語にし、HTMLの要素に当てはめると、理解し易くなります。

どんなに難しくややこしいプログラムも、考え方は全く同じです。

そして「いつ」「何が」「どうなる」のそれぞれの記述パターンを徐々に覚えていくことで、jQueryを使いこなせるようになります。

ちょっと休憩する女の子

jQueryを書く場所について

ここから実際にjQueryを書く解説をしていきます。

まず、書く場所ですが、
①htmlファイル内でjQueryを読み込ませた<script>タグの後に書く
②別のjsファイルを作成し、そっちに書く
のどちらかになります。

①の場合はこんな感じです。

読み込み用の<script>タグの後に別の<script>タグを設置し、その中に書いていきます。

<body>
　　<!--ここにHTMLをいろいろ書いているはずです。-->
　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

　　<script>
　　//ここにjQueryのコードを書いていく
　　</script>
</body>

②の場合はこんな感じで、「script.js」というようにJavaScriptファイルとして別ファイルを作成し、htmlファイルから<script>タグで読み込ませます。

また、別ファイルで書く場合には、jQuery用のコードを<script>タグで囲う必要はありません。

//<script>タグは不要で、ここからいきなりコードを書いていく。
<body>
　　<!--ここにHTMLをいろいろ書いているはずです。-->
　　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

　　<!--script.jsを読み込み-->
　　<script src="script.js"></script>
</body>

記述内容が多く管理をしやすくしたい場合や、ハンバーガーメニューのように複数のページで機能を使いまわしたい場合は、②を推奨します。

jQueryの宣言について

HTML学習の一番最初に「これからHTML5で記述しますよ」という宣言するための<!DOCTYPE html>を覚えたと思います。

「宣言」とちょっと意味合いは異なりますが、jQueryも似たような記述があります。

$(function () {

});

というもので、「{}の中でjQuery用コードを書いていきます」というものです。

この{}の外にjQuery用コードを書いても、jQueryが働いてないので動きません。

下記例のように{}の中にjQuery用の記述をしていきます。

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

jQueryの記述の基本構造について

jQueryの記述の基本的な構造は、「$('セレクタ’).命令('命令の補足情報’);」で出来ています。

セレクタは「何が」に当たる主語の部分で、命令は「どうなる」という術語の部分です。

「いつ」の部分は後で解説しますので、一旦置いておいてください。

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

こちらの記述であれば、セレクタが「.text」、命令が「css('color’,’red’)」となります。

注意点も下記に記載するので、動作しない場合はこれらを疑ってください。

注意点①

セレクタもしくは命令の補足情報は、例外もありますが基本的に2つの「’（シングルクオーテーション）」もしくは「"（ダブルクオーテーション）」で挟む必要があります。

どちらを使用してもいいですが、

$('.hello').html('<img src="cat.png">');

こちらのように、補足情報にファイル名を指定する場合などは、それぞれ「’」と「"」を使い分けて指定する必要があります。

$('.hello').html('<img src='cat.png'>');

このように同じ「’」で指定するとエラーが出て動作しなくなります。

注意点②

命令の前には「.（ドット）」を付けるのを忘れないでください。

最初のうちは結構忘れられがちであり、また小さいので確認のときも見落としがちです。

注意点③

命令の直後には「()」を付けるという約束があります。

命令によって補足情報が必要な場合とそうでない場合がありますが、補足情報が必要でない場合も命令の直後に「()」は必要となります。

こちらも最初のうちは忘れがちなので注意してください。

注意点④

記述の最後には必ず「;（セミコロン）」をつけてください。

それ以降の命令が存在しない場合は「;」が無くても動きますが、存在する場合はエラーになりますので、基本的に付けるべきです。

注意点をよく読む女の子

セレクタについて

指定の仕方が色々あるので別途調べてみて欲しいのですが、多くはcssの記述をそのまま使うことができます。

頭に「#」を付けるとHTML内の「id」、「.」をつけると「クラス」を指定でき、実際の業務でもクラスを指定することが多いです。

下記、"cat"というidを持つ要素をセレクタに指定した例です。

$('#cat').css('color','red');

命令について

命令についても色々な種類があり、検索してもらえば色々と出てくると思います。

ここでは理解しやすく汎用性も高い「html」と「addClass」「removeClass」「toggleClass」の4つの命令を解説してきます。

「html」について

「html」は、「指定した要素タグの内側のHTMLを設定する」という命令です。

下記のようなpタグがあったとします。

<p class="hello">こんにちは</p>

これをブラウザで見ると、画面に「こんにちは」と表示されていると思います。

これに下記のjQueryの記述を追加したとします。

$('.hello').html('おやすみなさい');

すると、「こんにちは」の部分が「おやすみなさい」に切り替わります。

上記例は文字列を切り替えましたが、htmlをごそっと切り替えることもでき、

$('.hello').html('<img src="cat.png">');

と記述すると、「こんにちは」のテキストが「cat.png」の画像に変わります。

「addClass」「removeClass」「toggleClass」について

「addClass」はクラスを追加する命令です。

「addClass('○○’)」のように記載し、○○の部分は追加したいクラスの名前を記載します。

下記のようなHTML、CSSの記述があったとします。

<p class="hello">こんにちは</p>
.hello{
color:red;
}

.cat{
color:blue;
}

この時点で、"hello"クラスのついた<p>タグは「color:red」が指定されているのでテキストが赤く表示されます。

ここで、jQueryで下記の記述をしたとします。

$('.hello').addClass('cat');

これで、"hello"クラスのついた<p>タグに、"cat"クラスが追加されました。

そしてcssには、「後から記述したものが優先して適用される」というルールがありますね。

なので、"hello"クラスのついた<p>タグのテキストは赤から青に変化します。

「removeClass」は逆で、クラスを取り除く命令です。

先ほどの記述の最後に下記を追加したとします。

$('.hello').removeClass('cat');

すると"hello"クラスのついた<p>タグから"cat"のクラスが外れるので、"hello"クラスのついた<p>タグのテキストは赤に戻ります。

「toggleClass」は「addClass」と「removeClass」が合わさった機能で、「toggleClass('○○’)」の○○というクラスがついてなければ追加し、ついていれば取り除くという内容の命令です。

上記はclassの付けはずしで「color」を変更しましたが、「background-color」や「margin」など、他のcssのプロパティもクラスをそれぞれ設定して付け外すことで容易に変更することが出来ます。

また、元のクラスに「transition:○○」を設定しておけば、marginなどの変化がゆっくりになり、アニメーションさせることもできます。

注意点

「toggleClass」「addClass」「removeClass」すべて、ClassのCは大文字です。

また、命令の後の()内に補足情報として「’」で挟んでクラス名を入れますが、セレクタのクラス名の指定とは異なり、「.（ドット）」は不要です。

また、上記にも書きましたがcssには、「後から記述したものが優先して適用される」というルールがあるので、追加したクラスの情報をすでにあるクラスの情報より後に記載しておかないと、同じプロパティで異なる値を設定するときに適用されません。

クラスの付け外しを行う命令がうまく動作しない場合、上記3点を疑ってください。

「いつ」を指定する

これまで「何が」「どうなる」について、セレクタと命令を説明しましたが、それが「いつ」起きるかを指定する方法について、説明していきます。

まず、「いつ」についても「何が」「どうなった時」という日本語で考えます。

例えば「ボタンがクリックされた時」「画像がマウスオーバーされた時」などが挙げられますね。

この「クリック」「マウスオーバー」などの条件を「イベント」といいます。

そして、「$('セレクタ’).イベント(function(){○○});」という決まりの型通り、記述してきます。

これも「function」がついていたりカッコが多かったりしますが、そのまま覚えてください。

「セレクタ」については前の項目で説明済みなので省略します。

イベントにも色々な種類があり、クリック時なら「click」、マウスオーバー時なら「mouseover」が当てはまります。

実際にセレクタとイベントを指定した例が下記です。

$('.btn').click(function(){

});

これで、"btn"のクラスを持った要素がクリックされたとき、{}の中に書いたプログラムが動作します。

{}には「何が」「どうなる」の文を書けばいいので、例えば

$('.btn').click(function(){
　$('.hello').html('おやすみなさい');
});

にすると、"btn"のクラスを持った要素がクリックされたとき、"hello"のクラスを持った要素の中のhtmlが「おやすみなさい」になるというプログラムになります。

ちなみに「いつ」を指定しなかった場合、該当のコードが読み込まれ次第、プログラムが動作します。

あと書き

これで一旦、jQuery入門用の説明は終了です。

jQueryにおける基礎の考え方になると思うので、少しでも理解していただければ嬉しいです。

あとは「いつ」「何を」「どうする」のそれぞれのパターンを、必要に応じて調べて吸収していってください。

このブログでも色々なパターンの記事を書いているので、参考にしてみてください。

なお、もっと無料でプログラミングを学びたい方はこちらがオススメです。

サンプル

最後にこの記事内で説明した実践例のサンプルを置いておきます。

ブラウザでどんな動作になるのか、メモ帳などのテキストエディタにコピーしてHTMLファイルとして保存し、ブラウザで開いて確かめてみてください。

それではさようなら。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>jQueryサンプル</title>
	<style>
		.box {
			margin-top: 20px;
			width: 100px;
			height: 100px;
			background-color: red;
			/* transitionでcss情報が切り替わるまでの時間を指定 */
			transition: 1s;
		}

		.box_after {
			margin-left: 100px;
			width: 200px;
			height: 200px;
			background-color: blue;
			border-radius: 50%;
		}
	</style>
</head>

<body>
	<button type="button" class="btn1">ボタン1</button>
	<p class="text">ねこ</p>

	<button type="button" class="btn2">ボタン2</button>
	<div class="box"></div>

	<!-- jQueryをgoogleCDNから読み込み -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<!-- jQueryを書いていく -->
	<script>
		// 「jQueryのコードを書きますよ」という宣言
		$(function () {

			// "btn1"のクラスを持つ要素がクリックされた時
			$('.btn1').click(function () {
				// "text"のクラスを持つ要素内のhtmlが「いぬ」になる
				$('.text').html('いぬ');
			});

			// "btn1"のクラスを持つ要素がクリックされた時
			$('.btn2').click(function () {
				// "box""のクラスを持つ要素に"box_after"のクラスを付け外しする
				$('.box').toggleClass('box_after');
			});
		});
	</script>
</body>

</html>

Web制作,jQuery