「ボタンを押したら文字が変わる」みたいな動きを、自分のHTMLに入れたいって思うことありますよね。
でも、JavaScriptはむずかしそう…そんなふうに感じる人も多いと思います。
そこで今回は、jQueryを使ってHTMLとカンタンに連携する方法についてわかりやすく説明します。
jQueryの基本と使い方がわかれば、文字を変えたり、動かしたり、かっこいいページが自分で作れるようになりますので、ぜひ最後まで読んでみてください。
jQueryとHTMLの基本的な連携方法
jQueryとは何かを簡単に理解する
jQueryとは、JavaScriptをもっと簡単に使えるようにした便利なライブラリです。
これを使うと、HTMLの要素を動かしたり、表示を変えたり、ボタンをクリックしたときに反応させたりと、いろいろなことが簡単にできるようになります。
たとえば、今まではJavaScriptで何行も書かないといけなかった動作も、jQueryならたった1行でできることが多いです。
覚えることが少なく、初心者でも扱いやすいのが魅力です。
ここでは、jQueryの特徴をいくつかまとめてみましょう。
- HTMLの要素を簡単に操作できる
- イベント（クリックなど）をすぐに追加できる
- アニメーションも短いコードでできる
- Ajaxを使った通信もラクにできる
- 古いブラウザでも動きやすい
このように、jQueryは手軽にウェブサイトを動かすことができるツールです。
HTMLと一緒に使えば、もっと見た目も動きも楽しいページが作れます。
HTMLとjQueryの関係性とは
HTMLはページの「かたち」を作るための言語で、見出しや画像、ボタンなどを並べるために使います。
一方で、jQueryはそのHTMLに動きをつける役割を持っています。
つまり、HTMLが家の「骨組み」なら、jQueryは「スイッチ」や「自動ドア」のような機能をつけるものです。
HTMLとjQueryは、それぞれの役割を持っていて、連携させることでより便利で魅力的なページを作ることができます。
jQueryを使ってHTMLを操作するときの例は以下の通りです。
- ボタンをクリックしたら、画像が表示される
- フォームに入力した名前を、そのまま画面に出す
- メニューをクリックすると、下に説明が出てくる
- カーソルをのせると文字の色が変わる
- 画面をスクロールすると、要素がふわっと出てくる
このように、jQueryがあるとHTMLに命を吹き込むことができるのです。
jQueryをHTMLに読み込む方法
jQueryを使うには、まずHTMLファイルの中にjQueryのファイルを読み込む必要があります。
これはJavaScriptのファイルと同じように、<script>タグを使って行います。
読み込み方にはいくつかありますが、ここでは一番簡単な方法を紹介します。
- GoogleなどのCDNから読み込む
- jQuery公式サイトからダウンロードして読み込む
CDNを使う場合は、次のようなコードを<head>タグの中か、</body>の前に書きます。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
これで、HTMLの中でjQueryが使えるようになります。
必ずこの読み込みを先にしてから、jQueryのコードを書くようにしましょう。
CDNとローカルファイルの使い分け
jQueryを読み込むときに、CDNを使う方法とローカルに保存して読み込む方法の2つがあります。
それぞれに特徴があるので、使い分けが大切です。
まずは違いをわかりやすくまとめます。
- CDN: インターネット上にあるjQueryを使う
- ローカル: 自分のパソコンやサーバーにあるjQueryを使う
それぞれのメリットとデメリットを見てみましょう。
- CDNのメリット: すぐに使える、読み込みが早い、更新が簡単
- CDNのデメリット: インターネットに繋がっていないと使えない
- ローカルのメリット: 自由に編集できる、ネットがなくても使える
- ローカルのデメリット: ファイルの管理が必要、更新が面倒
簡単に使いたいときはCDN、オフラインで動かしたいときはローカルファイル、というように目的に合わせて選ぶのがポイントです。
HTML内でのjQueryの記述位置と注意点
jQueryのコードを書く場所は、HTMLファイルの下のほうに書くのが基本です。
なぜなら、HTMLの読み込みが終わっていないと、jQueryがうまく動かないことがあるからです。
以下のような順番で書くと安全です。
<html>や<body>の中にHTMLの要素を書く</body>の直前にjQueryの<script>タグを書く- その中にjQueryのコードを書く
また、jQueryを使うときは次のような形で書くのがよく使われます。
$(document).ready(function() {
// ここに処理を書く
});
このコードは、「ページの読み込みが終わったら実行してね」という意味です。
ページが表示される前に実行しないようにするため、とても大事な書き方です。
よくある読み込みエラーとその対処法
jQueryを使うときによくあるエラーの一つが「jQuery is not defined」といったエラーです。
これは、jQueryのファイルがうまく読み込まれていないことが原因です。
他にもありがちなエラーとその原因をまとめます。
- jQueryの読み込み位置が早すぎる → HTMLの下に書く
- CDNのURLが間違っている → 正しいURLを確認する
- インターネットに接続していない → ローカルファイルを使う
$(function(){})が正しく閉じていない → 括弧や中括弧を確認する- 別のライブラリと競合している →
jQuery.noConflict()を使う
エラーが出たときは、まず読み込みの順番やコードの書き方をチェックしてみるといいでしょう。
HTMLテンプレートにjQueryを組み込む手順
実際にHTMLのテンプレートにjQueryを入れる流れを、わかりやすく説明します。
以下のステップでやれば、初めての人でも簡単です。
- HTMLファイルを作る
- jQueryを読み込む（CDNまたはローカル）
<script>タグ内にjQueryのコードを書く- HTMLの中で動かしたい要素を指定する
- 動作を確認する
たとえば、ボタンをクリックしたらメッセージが出るコードは次のようになります。
<button id="myBtn">クリックしてね</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#myBtn').click(function() {
alert('こんにちは！');
});
</script>
このように、テンプレートに組み込むのはとてもシンプルです。
慣れてくると、いろいろな動きを簡単に追加できるようになります。
jQueryでHTML要素を操作する基本技術
セレクタを使った要素の取得方法
jQueryでHTMLの要素を操作するには、まずその要素を選ぶ必要があります。
そのときに使うのが「セレクタ」です。
セレクタとは、どの部分を操作するかを指定する方法で、HTMLのタグ名、ID、クラス名などで使い分けます。
基本的なセレクタの使い方を紹介します。
$('タグ名')→ 指定したタグをすべて選ぶ$('#id名')→ 特定のIDを持つ要素を選ぶ$('.クラス名')→ 特定のクラスを持つすべての要素を選ぶ$('親 子')→ 親の中にある子を選ぶ$('タグ:条件')→ 特定の条件に当てはまるタグを選ぶ
たとえば、<div id="box">を操作したいときは、$('#box')で選ぶことができます。
セレクタを正しく使うことがjQueryの基本になります。
テキストやHTMLの内容を変更する方法
HTMLの中身を変更したいときは、jQueryのtext()やhtml()というメソッドを使います。
どちらも似ていますが、扱える内容が少し違います。
以下に使い方と違いをまとめます。
text()→ テキストだけを変更（タグはそのまま文字扱い）html()→ HTMLタグを含めた内容を変更
例えば、次のように使います。
$('#msg').text('こんにちは');
$('#msg').html('<strong>こんにちは</strong>');
このように、見た目を変えたいか、中身を丸ごと変えたいかで使い分けると便利です。
場面に応じて使いこなしましょう。
クラスやIDの追加・削除のやり方
HTMLの見た目や動きを変えるときは、CSSのクラスを追加したり、削除したりする方法が便利です。
jQueryにはそのためのメソッドがいくつか用意されています。
以下に代表的なメソッドを紹介します。
addClass()→ クラスを追加するremoveClass()→ クラスを取り除くtoggleClass()→ クラスの追加と削除を切り替えるattr('id')→ IDの取得attr('id', 'new-id')→ IDの変更
クラスはCSSで見た目を調整するのに使われるので、この操作ができればデザインも自由に切り替えられます。
例えばボタンを押すと文字の色が変わる、という動作もクラスを使えば簡単に実現できます。
属性の操作と動的な変更方法
HTMLの要素には「属性」という情報がついています。
たとえば、<a href="URL">のhrefや、<img src="画像URL">のsrcなどです。
jQueryを使えば、これらの属性も自由に読み書きできます。
属性の扱いに使うのはattr()というメソッドです。
attr('属性名')→ 属性の値を取得するattr('属性名', '新しい値')→ 属性の値を変更する
例えば、次のように使います。
$('#link').attr('href', 'https://example.com');
これにより、リンクのURLをクリック時に動的に変えることもできます。
また、ボタンのdisabled属性を操作して、ボタンを使えないようにしたり戻したりすることも可能です。
属性をコントロールすれば、ページ全体の動きをもっと細かく設定できるようになります。
スタイルの変更とCSS連携の基本
jQueryではCSSを使ったスタイルの変更もとても簡単にできます。
要素の色、大きさ、位置などをJavaScriptのように操作できます。
スタイルを変更するにはcss()というメソッドを使います。
$('#box').css('color', 'red');
このように、要素に直接CSSを当てることができます。
複数のスタイルを一度に変えたいときは、オブジェクトとしてまとめて指定します。
$('#box').css({
'background-color': 'yellow',
'font-size': '18px'
});
スタイル変更のポイントを以下にまとめます。
css('プロパティ名', '値')→ 1つのスタイルを変更css({})→ 複数のスタイルを一度に変更- クラスと併用して見た目を切り替えると便利
jQueryでスタイルを変更できると、イベントに応じて動きのあるデザインを作れるようになります。
フォーム要素の値を取得・設定する方法
フォームに入力された内容を読み取ったり、初めから値を入れておいたりするのにもjQueryは役立ちます。
フォーム操作のためには、val()というメソッドを使います。
使い方の例を紹介します。
$('#input').val()→ 入力された値を取得$('#input').val('あいうえお')→ 入力欄に値を設定
また、チェックボックスやラジオボタンの場合には、:checkedという条件を付けて、選ばれているかどうかを調べることもできます。
$('input[name="color"]:checked').val();
フォームの値を自由に扱えると、入力内容の確認や送信前のチェックができるようになり、ページの使いやすさがグンと上がります。
要素の追加・削除の基本的な使い方
ページをもっと動きのあるものにするには、要素をあとから追加したり消したりする機能がとても便利です。
jQueryでは次のようなメソッドを使います。
append()→ 指定した要素の中の最後に追加prepend()→ 最初に追加after()→ 要素のすぐ後ろに追加before()→ 要素のすぐ前に追加remove()→ 要素を削除
例えば、リストの最後に項目を追加したいときは次のように書きます。
$('#list').append('<li>新しい項目</li>');
こうした追加や削除は、ユーザーの操作に応じて変化させたいときにとても役立ちます。
情報の整理やメニューの切り替えなどに応用できます。
ユーザーの操作に応じた動的な処理
クリックイベントの設定方法
jQueryを使えば、HTMLのボタンやリンクをクリックしたときに好きな動きをつけることができます。
そのために使うのがclick()というイベントメソッドです。
ボタンを押した瞬間に何かの処理を動かしたいときは、このメソッドが基本となります。
クリックイベントの使い方は次のようになります。
$('#myBtn').click(function() {
alert('ボタンがクリックされました');
});
このように書くだけで、ボタンを押すとメッセージが表示されるようになります。
イベントを使いこなせるようになると、ユーザーとやりとりするような動きができるようになります。
クリックイベントのポイントをまとめてみましょう。
click()はボタンなどを押したときの処理を書く- イベントの中に動かしたいコードを入れる
- IDやクラスで対象をしっかり指定する
- 複数のボタンに同じ処理をつけることもできる
- クリックで表示や非表示を切り替えることも可能
クリックは一番よく使うイベントなので、しっかりマスターしておきましょう。
フォーム送信時の処理を制御する
フォームを送信するときに、jQueryを使えば入力チェックや送信の中止ができます。
たとえば、空欄がある場合に送信を止めたり、入力された内容を確認したりすることができます。
フォーム送信時にはsubmit()イベントを使います。
基本の書き方は次の通りです。
$('form').submit(function(e) {
e.preventDefault();
// ここに処理を書く
});
このe.preventDefault()は、フォームの送信動作を止めるために使います。
入力内容をチェックして、問題がなければ送信、エラーがあれば止めるといった処理が可能です。
代表的な処理内容を紹介します。
- 名前やメールが空かどうかを確認
- メールの形式が正しいかをチェック
- パスワードの長さや一致を確認
- チェックボックスが選ばれているか確認
- エラーメッセージを表示する
このように、フォームの送信タイミングでの処理は安心して情報を受け取るためにとても大切です。
マウスやキーボードイベントの使い方
ユーザーがマウスを動かしたり、キーボードを押したりするタイミングでも、jQueryでいろんな反応をさせることができます。
たとえば、ボタンにカーソルを乗せたときに色を変えたり、キー入力ごとに表示を更新したりできます。
使われるイベントの種類はたくさんありますが、よく使うものを紹介します。
mouseenter()→ マウスが要素の上に来たときmouseleave()→ マウスが要素から出たときkeydown()→ キーを押したときkeyup()→ キーを離したときfocus()→ フォームにカーソルが入ったときblur()→ フォームからカーソルが外れたとき
これらを使えば、動きのあるインターフェースを作ることができます。
たとえば次のような動きができます。
$('#text').keyup(function() {
$('#output').text($(this).val());
});
これは、入力した文字がそのまま画面に表示される例です。
リアルタイムの反応ができると、ページがもっと楽しく便利になります。
イベントのバブリングと委譲の基礎
jQueryでイベントを設定していくと、親の要素にもイベントが伝わることがあります。
これをイベントのバブリングと呼びます。
たとえば、リスト内の項目をクリックしたのに、親のリスト全体にもイベントが動いてしまうということがあります。
また、あとから追加した要素にイベントをつけるには、イベントの委譲が必要です。
これはon()というメソッドを使って実現します。
まずはバブリングを止める方法を紹介します。
event.stopPropagation()→ 親への伝播を止める
次に、イベントの委譲の方法です。
たとえば、ulタグの中のliをクリックしたときだけ動かすには、次のように書きます。
$('ul').on('click', 'li', function() {
alert('リスト項目がクリックされました');
});
これにより、あとから追加されたliにもクリックイベントが働きます。
動的なHTMLに対応するために大切な仕組みなので、ぜひ覚えておきましょう。
アニメーションやフェードの実装方法
jQueryでは、ページの中でふわっと表示させたり、スライドしたりといったアニメーションも簡単に作れます。
アニメーションを使うと、ページが生きているように感じられて、見る人にとって楽しくなります。
代表的なアニメーションメソッドを紹介します。
fadeIn()→ ゆっくり表示fadeOut()→ ゆっくり非表示slideDown()→ 下にスライドして表示slideUp()→ 上にスライドして非表示animate()→ カスタムアニメーション
たとえば、次のように使います。
$('#box').fadeIn(1000);
$('#menu').slideToggle();
アニメーションを使うときはやりすぎないようにするのがポイントです。
適度に使えば、見やすくて楽しいページになります。
表示・非表示の制御と活用場面
HTMLの要素を一時的に隠したり、また表示させたりするには、jQueryのshow()とhide()が使えます。
また、toggle()を使えば、表示と非表示を交互に切り替えることができます。
使い方の基本はとても簡単です。
$('#text').hide();
$('#text').show();
$('#text').toggle();
これらは、次のような場面で活用できます。
- ボタンを押したらメニューを表示
- 「もっと見る」を押したら説明を表示
- 一度に全部表示せず、見たいところだけ出す
この機能をうまく使うと、ページがすっきりして見やすくなるだけでなく、必要な情報だけ見せることでユーザーの操作も簡単になります。
複数イベントの同時処理とその実例
jQueryでは、複数の動作をまとめて行うことができます。
たとえば、ボタンをクリックしたら、文字の色を変えて、さらにメッセージを表示する、というような流れも一度に書けます。
複数の処理は、イベントの中に順番に書けば動きます。
$('#btn').click(function() {
$('#msg').text('クリックされました');
$('#msg').css('color', 'blue');
$('#box').fadeIn();
});
このように、いくつもの処理を組み合わせることで、よりリッチで便利な動きを作ることができます。
使い方のヒントをまとめておきます。
- 処理は順番に上から実行される
- アニメーションは次の処理と重なることがある
- 一連の動きには
delay()やqueue()も使える - コードが長くなったら関数に分けると見やすくなる
このように、複数のイベントを使いこなせると、jQueryの力を最大限に発揮できるようになります。
jQueryを活用したHTML連携の応用テクニック
Ajaxでの非同期通信とHTML更新
jQueryのAjax機能を使うと、ページを再読み込みせずにサーバーと通信ができるようになります。
これを「非同期通信」と言い、ユーザーが操作してもページがリセットされないため、とても使いやすい動きを実現できます。
Ajaxでよく使われるメソッドには$.ajax()や$.get()、$.post()などがあります。
中でも簡単に使えるのは$.get()と$.post()です。
使い方のポイントを以下にまとめます。
$.get()→ データを取りにいくときに使う$.post()→ データを送信したいときに使うsuccess→ 通信が成功したときの処理を書くerror→ 通信に失敗したときの処理を書く- 取得したデータを
.html()などで画面に表示する
たとえば、次のようなコードになります。
$.get('data.html', function(response) {
$('#content').html(response);
});
このように、Ajaxを使うと必要な情報だけをその場で読み込んで表示できます。
外部データの取得と表示の流れ
jQueryを使えば、外部からデータを読み込んで、その内容をHTMLに自動で表示することもできます。
たとえば、天気の情報や商品一覧など、変化するデータを画面に出すときに便利です。
外部データの読み込みにはAjaxを使い、読み込んだ内容はjQueryでHTMLに追加します。
以下のような流れになります。
- 外部のURLにリクエストを送る
- データ（JSONなど）を受け取る
- jQueryでループしてHTMLを作る
- 画面に追加して表示する
たとえば、商品一覧を表示するときは次のようなコードになります。
$.getJSON('items.json', function(data) {
$.each(data, function(i, item) {
$('#list').append('<li>' + item.name + '</li>');
});
});
このように、データを使って動的なリストや表を作ることができます。
jQueryプラグインを活用する方法
jQueryにはたくさんの便利なプラグインが用意されています。
スライダーやモーダルウィンドウ、カレンダーなど、ちょっと難しい機能も、プラグインを使えば簡単に実装できます。
プラグインを使う基本の流れは次の通りです。
- プラグインのJavaScriptファイルを読み込む
- 必要なCSSファイルも読み込む
- HTMLに指定の要素を用意する
- jQueryで初期化コードを書く
たとえば、「slick」というスライダーを使いたいときは、次のように書きます。
$('.slider').slick();
ポイントとして、以下のような点を意識するとよいです。
- 使うプラグインのバージョンを確認する
- 必要な依存ファイルを忘れず読み込む
- HTML構造が決まりに合っているか確認する
- 動かない場合はブラウザのコンソールでエラーを確認
プラグインは自分でゼロから作らなくても高機能が手に入るので、積極的に活用しましょう。
モバイル対応とレスポンシブな操作
スマートフォンやタブレットでも使いやすいようにするには、jQueryでレスポンシブ対応な動作を取り入れる必要があります。
画面サイズに応じてメニューの開閉や表示・非表示を切り替えると、モバイルでも快適に操作できます。
モバイル対応でよく使われるテクニックは次のとおりです。
- 画面幅を
$(window).width()で取得 - スクロールイベントでヘッダーの動きを変える
- タップイベント
on('touchstart')を活用する - ハンバーガーメニューを開閉できるようにする
- ウィンドウリサイズ時にレイアウトを再調整
たとえば、スマホでメニューを押すと開閉するコードはこうなります。
$('#menuBtn').click(function() {
$('#nav').slideToggle();
});
このように、モバイル対応を意識することでどんなデバイスでも見やすく使いやすいサイトが作れます。
複雑なUIコンポーネントの作成例
jQueryを使えば、ボタンやメニューだけでなく、複雑なユーザーインターフェース（UI）も作ることができます。
たとえば、タブ切り替え、アコーディオン、動的なテーブルなどです。
こういったUIは小さな動作の組み合わせでできています。
以下は、代表的なUIコンポーネントの一例です。
- タブ切り替え → 複数の内容を1画面で切り替え
- アコーディオン → 質問などを開いたり閉じたりできる
- モーダルウィンドウ → ポップアップのような表示
- ソート付きのテーブル → 項目をクリックで並び替え
たとえば、タブ切り替えのコードは次のようになります。
$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
$('.content').hide();
$('#' + $(this).data('target')).show();
});
このように、jQueryを使えばページの中に多機能な操作を簡単に組み込むことができます。
jQueryと他ライブラリの併用ポイント
jQueryだけで多くのことができますが、他のJavaScriptライブラリ（ReactやVueなど）と一緒に使う場面もあります。
ただし、ライブラリによって記述方法や管理の仕方が異なるため、併用には注意が必要です。
ライブラリと併用する際のポイントを紹介します。
noConflict()を使って名前の競合を防ぐ- jQueryの処理はできるだけ独立させておく
- 同じ要素に複数のライブラリでアクセスしない
- 動作タイミング（ロード順）に注意する
- 使う目的を分けておく（UIだけjQueryなど）
たとえば、jQuery.noConflict();を使うことで、他のライブラリの$記号との衝突を避けることができます。
jQueryは柔軟に他のツールと組み合わせられる便利なライブラリなので、上手に使い分けましょう。
実践的なHTML＋jQuery活用事例紹介
最後に、HTMLとjQueryを組み合わせて作られる実践的な機能の例を紹介します。
初心者の方でもすぐに真似できるものが多いので、ぜひ試してみてください。
ここでは、よくある活用事例を挙げます。
- 「トップへ戻る」ボタン
- クリックで表示されるお知らせ欄
- スライド形式の画像ギャラリー
- FAQのアコーディオンメニュー
- フォームのリアルタイム入力チェック
たとえば、ページの右下に「トップへ戻る」ボタンを出すコードは以下の通りです。
$('#toTop').click(function() {
$('html, body').animate({scrollTop: 0}, 500);
});
このように、jQueryを活用すれば、サイトに役立つインタラクションをたくさん追加できます。
やってみながら覚えていくのが一番の近道です。
まとめ
これまでに紹介してきたjQueryとHTMLの連携方法と基本操作を、もう一度かんたんにふりかえってみましょう。
- jQueryはHTMLに動きをつけるための便利なツール
- HTMLにjQueryを読み込むことで操作ができるようになる
- セレクタやイベントで要素を自由に動かせる
- Ajaxやプラグインでさらに便利な使い方ができる
- モバイル対応や複雑なUIもjQueryで作れる
今日から少しずつjQueryを使って、楽しくて便利なWebページづくりにチャレンジしてみましょう！
