JavaScript 基礎 第12回で「イベント」について解説し、いよいよJavaScript基礎も終盤です。
今回解説するのは「jQuery」です。もしJavaScriptを実践で使うのならjQueryを知っておいて損はありません。この章でしっかり学んでいきましょう。
ライブラリ
プログラミング言語には予めさまざまな関数やオブジェクト、メソッドなどのプログラムがまとめられた「ライブラリ」が用意されています。
JavaScriptも例外ではなく、数十種類に及ぶライブラリが存在し、それを活用することで簡単に機能を追加したり、開発に必要な時間や作業を大幅に削減したりすることができるのです。
ライブラリはそれぞれ特定の機能を実現させる目的で使用されます。JavaScriptライブラリを使用することで、以下のような機能を実装することができます。
＜JavaScriptライブラリの活用例＞
- DOMを操作してコンテンツやスタイルを変更する
- データを可視化してアプリケーションの情報を効率的に分析する
- フォームに入力された内容の検証、処理、レイアウトを変更する
- Webページにアニメーションを実装する
JavaScriptライブラリの中でも代表的なものが「jQuery」です。jQueryを使えば、DOM操作やアニメーション、イベント処理などを簡単に行うことができます。
本章ではこの「jQuery」について学んでいきましょう。
jQueryとは
jQueryは最も人気が高いJavaScriptライブラリの一つです。
先に記したとおりJavaScriptライブラリは関数やメソッドといった機能をまとめたものなので、その中身はJavaScriptを使って表記されています。ですので「JavaScriptとjQueryって違う言語なのでは？」と身構える必要はありません。寧ろjQueryはJavaScriptの記述を簡略化して助けてくれるライブラリなのです。
jQueryを使うことで実現できる活用例を以下に記します。
- 画像をクリックすると画像が切り替わる
- ボタンにマウスポインタを重ねるとボタンの色が変化する
- 入力フォームの内容をリアルタイムで検証する
- Ajaxで非同期処理を行う
「Ajax」や「非同期処理」といった聞き慣れない言葉が出てきますが、これらは次以降の回で解説します。まずはjQueryを使うとさまざまな機能を簡単に実装できる、ということを意識しましょう。
また、jQueryが用いる大きなメリットの一つが、「その挙動がブラウザの種類によって左右されない」という点です。「Microsoft Edge」や「Google Chrome」などのブラウザはそれぞれの仕様が異なるため、せっかく作ったプログラムが正常に動作しなかったり、意図しない挙動をしたりすることがあります。jQueryはそうしたブラウザの違いに影響されず同じコードで同じ動作を行うので、現在も広く使われているのです。
jQueryの使用手順
jQueryを使用するには、jQueryの公式サイトからjQueryのファイルをダウンロードして、そのファイルをHTMLファイルで読み込む必要があります。
jQueryダウンロード公式ページ
https://jquery.com/download/
ファイルの読み込みはJavaScriptと同様、<script>タグを記述して行います。
■例1. jQueryを読み込む
<body>
<script src="js/jquery-3.3.1min.js"></script> // この行でjQueryを読み込む
<script src="js/app.js"></script>
</body>jQueryを読み込めば、それ以降はいつでもjQueryを使用することができます。
次の章からはjQueryを記述する方法について紹介していきます。
本項では実際にjQueryをPCにダウンロードして利用する方法を紹介しましたが、その方法以外に、jQueryをインターネット経由で使う方法もあります（こうしたWebコンテンツを迅速かつ効率的にユーザーに配信するネットワークを「CDN」といいます）。
CDNを使ってjQueryを読み込むことで、ファイルをサーバーに設置する作業を省略したり、Webサイトの表示スピードを向上させたりすることができるというメリットがあります。
■例2. CDNからjQueryを読み込む
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>jQueryを記述してみよう
次に、jQueryの記述方法について解説していきましょう。
jQueryを使うときの基本構文は以下のとおりです。
■jQueryの基本構文
$("●セレクタ●").●メソッド●("●パラメータ●[●引数●]");構文の頭に「$」がありますね。jQueryはこの「$()」の形式でプログラムを表記していきます。
この「$」には「jQueryオブジェクト」が代入されており、この形で指定を行うことでjQueryのプロパティやメソッドを活用することができるようになります。
セレクタ
jQueryを記述するときに「$」で指定する箇所を「セレクタ」といいます。このセレクタを指定することで、jQueryで操作したいHTML要素を選択することができます。
例えば、$('p')という指定を行うと「HTMLファイル内の<p>タグを指定する」ことができるのです。
なお、セレクタは基本的にCSSのセレクタと同じ書き方で指定できるので、特定のidの子要素を限定して指定することも可能です。
■例3. セレクタの指定
$('#menu'); // id='menu'の要素を指定
$('#menu p'); // id='menu'の子要素であるp要素を指定
$('.contents > p'); // class='contents'の子要素であるp要素を指定セレクタはCSS形式の指定方法だけでなく、さまざまな形式で指定することができます。
その中の一つとして、オブジェクトをそのまま引数に指定する方法を紹介します。例えば下記の例4のように「documentオブジェクト」を引数にすることで、HTML要素全体を選択することも可能です。
■例4. 「documentオブジェクト」をセレクタとして指定
$(document);イベント
jQueryではJavaScriptのイベントタイプに対応したメソッドも用意されています。
イベントは前回解説したように「プログラムを実行するきっかけとなる動作」を指しており、jQueryではこのイベントをメソッドとして指定することで、イベント発生時に処理の実行を限定させることができます。
■イベントタイプに対応している主なメソッド
| メソッド | プログラムが実行されるタイミング |
|---|---|
| .click() | 要素がクリックされたとき |
| .dblclick() | 要素がダブルクリックされたとき |
| .hover() | 要素にマウスポインタが乗ったとき |
| .scroll() | スクロールしたとき |
■例5. jQueryでクリックイベントを登録
// id="button"の要素をクリックしたとき「ボタンをクリックしました」と表示する
$('#button').click(function () {
alert('ボタンをクリックしました');
});このように、イベントのメソッド内に処理を記述することで、そのイベントが発生したときに行う処理を設定することができます。
また、「onメソッド」を使うことで複数のイベントに対して処理を実行させることも可能です。下記の例6のように指定すると、「マウスポインタが要素に乗ったとき（mouseover）」もしくは「マウスポインタが要素から外れたとき（mouseout）」の2つのイベントに対して同じ処理を登録することが可能です。「onメソッド」で複数のイベントを記述するときはイベント間をスペースで区切る点に注意してください。
例6. 「onメソッド」で複数のイベントに対して処理を設定
// id="contents"の要素上にマウスポインタが乗ったり離れたりするとメッセージを表示
$('#contents').on('mouseover mouseout', function () {
alert('ポインタがコンテンツの境界を移動しました');
});jQueryを使ってみよう
ここからは実際にjQueryを使って簡易的なプログラムを作成してみて、より理解を深めていきましょう。
今回はさまざまなWebページで使用される「TOPに戻る」ボタンを作成します。完成イメージは以下のとおりです。
①HTMLファイルを作成する
まず最初にHTMLファイルを作成します。「TOPに戻る」ボタンを活用するために縦長のレイアウトで作成しましょう。もちろんjQueryの読み込みも忘れず行ってください。
■例6. HTMLファイルの作成
<body>
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
～～～中略～～～
<p>サンプル</p>
<p>サンプル</p>
<p>サンプル</p>
<p id="scrollTop"><a href="#">TOPに戻る</a></p>
<script src="js/jquery-3.3.1.min.js"></script> // jQueryを読み込む
<script src="js/app.js"></script>
</body>
②CSSファイルを作成する
続いてCSSファイルを作成していきます。
今回は「TOPに戻る」ボタンの装飾を記述しています。また、ボタンがページの右下に表示されるようにしたいので、その記述もCSSに追加しましょう。
■例7. CSSファイルの作成
#scrollTop {
background-color: #0028f1;
border: 1px solid #0028f1;
border-radius: 20px;
padding: 10px;
position: fixed;
bottom: 25px;
right: 25px;
}
#scrollTop a {
color: #fff;
text-decoration: none;
}
③ボタンの表示・非表示を設定する
ではjQueryを使って処理を指定していきましょう。
今の状態ですと、ページの一番上を表示していても「TOPに戻る」ボタンが表示されてしまうので、ページの先頭を開いているときはボタンが非表示になるよう記述を加えていきます。
例8では、「①ページの読み込み時に処理を行う記述」、「②ボタン（id=”scrollTop”）の要素を変数topButtonに格納する記述」、「③topButtonを非表示にする記述」を行っています。
■例8. ボタンの非表示を設定
$(function () { // ページの読み込み時に処理を行う
// 「TOPに戻る」ボタンの初期化
let topButton = $('#scrollTop'); // ボタンの要素を変数topButtonに格納
topButton.hide(); // hideメソッドでtopButtonを非表示にする
});さらにここからはボタンの表示、非表示される際にボタンがフェードイン、フェードアウトする記述も追加していきましょう。
この処理についてはスクロールをきっかけに実行されるので、windowオブジェクトの「scroll」イベントに対して処理を指定します。
例9. ボタンをフェードインで表示させる
$(function () { // ページの読み込み時に処理を行う
// 「TOPに戻る」ボタンの初期化
let topButton = $('#scrollTop'); // ボタンの要素を変数topButtonに格納
topButton.hide(); // hideメソッドでtopButtonを非表示にする
// スクロール時に「TOPに戻る」ボタンを表示
$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
topButton.fadeIn(); // ボタンをフェードインさせる
} else {
topButton.fadeOut(); // ボタンをフェードアウトさせる
}
});
});例9では「$this.scrollTop()」でwindowのスクロール位置を取得しており、このスクロール位置が50ピクセル以上ならfadeInメソッドでボタンを表示し、それ以外ならfadeOutメソッドで非表示になるよう指定しています。
ここまで書けたら一度index.htmlをブラウザで表示させ、スクロールをきっかけにボタンが表示・非表示されるか確認してみましょう。
④TOPに戻る動作のアニメーションを設定する
今の段階でも「TOPに戻る」ボタンをクリックすればページの先頭に遷移するようになっていますが、一瞬でページの先頭に飛んでしまうため少々分かりにくく感じられます。なのでTOPへ遷移する挙動も一瞬で切り替わるのではなく、滑らかに移動するような処理を登録しましょう。
こうした動作そのものはCSSやJavaScriptを使って実現させることは可能ですが、jQueryを使うとページの動き（アニメーション）も簡単に設定することができます。
この項のゴールは「ボタンをクリックするイベントが発生したとき、滑らかにページの先頭に移動する」です。そのためにまずはページ内リンクの移動を無効化する処理を「app.js」に追記します。
■例10. ページ内リンクを無効化する
// *****例9の13行目の下に追加***** //
// クリックでページ先頭に戻るボタン
topButton.click(function (event) {
event.preventDefault();
});ここでは「preventDefaultメソッド」を使ってWebブラウザにもともと備わっている規定の動作を無効化しています。「preventDefaultメソッド」はイベントがキャンセル可能である場合に、イベントに属する既定の処理が発生しないようにするメソッドです。この機能を使って、ボタンがクリックされた際に既定の処理を行わないよう指示を出しているわけですね。
では既定の処理を無効化した上で、アニメーションを設定していきます。
移動の対象である<body>タグと<html>タグをセレクタに指定し、「animateメソッド」でアニメーションを設定します。
■例11. TOPに戻る動作のアニメーションを設定
// *****例10にアニメーションの処理を追加***** //
// クリックでページ先頭に戻るボタン
topButton.click(function (event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0
},500); // 500ミリ秒で先頭までスクロールする
});「animateメソッド」はその名のとおりアニメーションを設定できるメソッドです。今回の場合ですと、「スクロール位置を0に戻す処理」と「アニメーションを実行する時間（変化する時間）」をそれぞれ第1引数、第2引数に指定しています。例11ではアニメーションの時間は500ミリ秒（0.5秒）で設定していますが、ここは自由に調整していただいて構いません。
これで「ボタンをクリックするイベントが発生したとき、滑らかにページの先頭に移動する」という機能を実現させることができました。
jQueryを使うとたったこれだけの表記で緩やかな動作を実現させることができるのです。
⑤作成したプログラムを動かしてみよう
今回のプログラムの記述は以上です。さっそく今回作成したプログラムを実際に動かしてみましょう。
ページを開いた時点では表示されていない「TOPに戻る」ボタンがスクロールをきっかけにフェードインで現れ、そのボタンをクリックすると滑らかにページの先頭に戻るはずです。
今回使用したメソッドはほんの一部ですので、ほかにどのようなjQueryのメソッドがあるのか、またそれがどんな挙動をするのかも是非チェックしてみてください。
まとめ
jQueryの解説は以上となります。
実際に多くのページで使われている「ページの先頭に戻るボタン」を作ってみていかがでしょうか？改めてJavaScriptの奥深さが見えてきたのではないでしょうか。
今回JavaScriptライブラリの中からjQueryを紹介しましたが、冒頭でも解説したようにほかにも数多くのライブラリが存在します。それぞれが持つ目的、特徴やメリットは異なるので実際に使ってみてJavaScriptライブラリの世界を体感してください。
コメント