jQuery : jQuery の書き方 | 独学 Webプログラミング!

jQuery とは

JavaScript: 読み: ジャバスクリプト
意味: 動的な Web ページを作成することができるプログラミング言語。web ページのフロントエンドを担当します。
query: 読み: クエリー
意味: 質問する、照会する、問い合わせる、尋ねる

jQuery の概要

jQuery は、JavaScript のライブラリです。

ライブラリとは、システム内の要所要所で使える便利なシステム群のことを表しており、つまりは、JavaScript の言語のなかで、便利に使える記述方法の集まりということができます。

jQuery ライブラリを使うことで javascript で行う、少し複雑な処理を簡単なコードの記述だけで実現することができます。これは、jQuery のセレクターというシステムを使うことで実現されます。

セレクターは、ページ上に配置された要素を自分の思うままに選択することができます。この選択した要素をメソッドの呼び出し元とし、それに対する命令文を記述するだけの非常にシンプルな仕様となっています。

jQuery を使うメリットは記述が簡単なだけではありません。 jQuery はブラウザの仕様に関係なく同じ動作を実現してくれます。つまり、ユーザーの閲覧環境を意識しないでコードが書けるということが最大のメリットになるわけです。また、jQuery にはメソッドチェーンという独特の記法があり、一つのセレクターに対する処理を数珠つなぎで記述できます。これを使うことでコードは更にシンプルになり、プログラマー側にも理解しやすいという恩恵があります。

目次に戻る

jQuery を使うための準備

Web ドキュメントで jQuery を使う為には HTML文書の head 要素内に jQuery のライブラリーを読み込むコードを記述することが必要になります。

ライブラリーの読込みに関しては以下のサンプルコードを参考にして下さい。なお、コードの 3.6.0 と書かれている部分は jQuery のバージョンを表しています。

<head>
	<meta charset="utf-8">
	<title> タイトル </title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

バージョンは最新のものを選択すれば問題ありませんが、他のサイトのコードも参考にする場合、古いバージョンでしか動作しないものもありますので、「このコードで何故、動作しないの? 」と思われたら、バージョンが関係している可能性があるかも知れないということを思い出してください。

バージョンの選定は、このページの「参考になるサイト」に google と Microsoft のサイトを紹介していますので、そちらから、リンクをたどって頂ければと思います。また、この方法は CDN と言われるサイトから jQuery のライブラリを読み込む方法であり、これとは別に、ご自分のサイトにライブラリーファイルをダウンロードして利用することもできます。

目次に戻る

jQuery の基礎的な書き方

jQuery の基礎的な記述方法は以下のようになります。

$("セレクター").メソッド(引数、又は処理のコード);

セレクターというのは HTML の要素名や要素の id 属性の値、class 属性の値などを指定する部分です。このあたりは CSS のセレクターと同じ考え方になります。メソッドは命令文の名称を指定する部分です。

目次に戻る

サンプルコード (JavaScript と jQuery の記述の違い)

ここではテキストを JavaScript と jQuery で出力する例を見て下さい。

サンプルコード: HTML

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput1"> jQuery の結果表示欄 </output><br>
	<output id="idOutput2"> JavaScript の結果表示欄 </output>
	<script>...</script>
</body>

サンプルコード: script

<script>
		$("#idOutput1").text("これは、jQuery で表示したテキストです。");
		document.getElementById("idOutput2").innerText = "これは、JavaScript で表示したテキストです。";
</script>

上記の2つは同じ処理のできるコードですが、少しだけ jQuery の方が単純に記述できているように思います。

実行結果:
jQuery の結果表示欄 JavaScript の結果表示欄

目次に戻る

サンプルコード (メソッドチェーン記法の使い方)

ここでは概要のセクションでも述べているメソッドチェーン記法の例をみて下さい。

これは命令文であるメソッドを数珠じゅずつなぎのように連続で記述します。

サンプルコード: HTML

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<output id="idOutput3"> 結果表示欄 </output>
	<script>...</script>
</body>

サンプルコード: script

<script>
	$("#idOutput3")
		.text("これは、jQuery で表示したテキストです。")
		.css({"color":"##red", "background-color":"##pink"})
	;
</script>

ここでは jQuery のコードを複数の行に渡って記述していますが、1行のコードとして捉えてください。

03: .text("テキスト")
(テキストを表示するためのメソッドです。)
04: .css({"プロパティ":"設定値"})
(CSS のプロパティを書き換えてスタイル付けを行うためのメソッドです。)

実行結果:
結果表示欄

目次に戻る

JavaScript と jQuery

jQuery のサンプルコードを見て「 JavaScript って必要なのか? もしかして jQuery だけ覚えれば、いいのではないか」と思われた方もいらっしゃると思います。単刀直入に言うと、それでも構わないと思います。

しかし、JavaScript のライブラリーである jQuery を使う為にはある程度の JavaScript の知識も必要になる場面があると思いますので、どちらを先に覚えるとかは別にして両方の基本だけは、押さえておいて損はないと思います。

ちなみに言っておきますと、コードの処理速度は JavaScript の方が早いです。 jQuery はライブラリーを通して処理が行われるので、その分の処理は遅くなります。

とは言っても PC の処理速度が向上している昨今の環境で、ユーザーがそれほどの速度差を体感することはないとも思います。しかし、あくまでも JavaScript や jQuery は閲覧しているユーザーの PC で処理が行われているということを忘れないで下さい。

目次に戻る

Title

jQuery の書き方

目次 (INDEX)

jQuery とは

jQuery の概要

jQuery を使うための準備

jQuery の基礎的な書き方

サンプルコード (JavaScript と jQuery の記述の違い)

サンプルコード (メソッドチェーン記法の使い方)

JavaScript と jQuery