LogoMark.png

Webデザイン実習/2020/0704

第10回 jQuery入門

Webデザイン実習/20202020.07.04


第10回目の展開と要件


第10回の完成イメージ

以下、JohnSmith さん(架空の受講生)の10回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



第10回 目次


はじめに

今回から2回に渡って JavaScript ライブラリーの定番である jQuery の活用方法について学習します。jQuery を使うと、前2回の「JavaScript を直接書く方法」(一般に JavaScript ネイティブといいます)に比べて、より簡単に直感的にコードを書くことができますが、便利なものには「追加の学習コストがかかる」、「依存しすぎると何かあったときに対応できない」「将来性に常に不安がつきまとう」といった問題があることもふまえて、必要以上に学習時間を割かない・・というのが賢明です。

1. jQuery とは

jQueryとは、JavaScriptの様々な表現機能を使いやすくまとめた軽量ライブラリです。CSSのセレクタをそのままプログラミングに使える便利さから、現在では Javascriptライブラリのデファクトスタンダードとして、様々な場面で活用されています。もちろん、オープンソースです。

1.1.何が便利なの?

jQuery は 何が便利なのか。比較のために JavaScriptだけで記述した場合と、jQueryを使った場合について、簡単な事例で紹介します。

以下いずれも、すべての<li>項目の文字の色を赤に変更するスクリプトです。

以上、jQuery を使うと記述が劇的にシンプルになるのがわかります。




2. jQuery を利用するには

jQueryを利用するには、jQuery本体をダウンロードして、サイトローカル(つまりあなたのフォルダ)に投入、あるいは CDN( Contents Delivery Network ) でホストされているライブラリを利用(つまりネット上に置かれているファイルを https で接続して利用)します。

2.1. ダウンロードしてサイトローカルに置く場合

ネットワークに未接続の環境でも、動作を確認することができます。

2.2. CDN を使う場合

制作環境が常にネットワークに接続した状態であればこちらが便利です。
HTMLファイルの <head> に1行の script タグを追加するだけです。

3. jQueryコードの書き方

3.1. 基本構文

jQuery の構文は、正確に書くと以下のような形になっています。

jQuery( セレクタ ).メソッド( パラメータ );

実際のコードでは jQuery のエイリアス $ を使って以下のように書きます。

$( セレクタ ).メソッド( パラメータ );
例:$("#menu").slideToggle('slow');


3.2. 実行タイミング

JavaScript を用いたコンテンツは一般に HTMLのコード(DOM)が完全に読み込まれるのを待ってからコードを実行します(読み込み前にコードを実行しても正しく対象を捉えることができないからです)。その理由から、<script>タグは HTML文書の最後尾 </body>の直前に置く書き方を多く見かけますが、これは美しくありません。JSのコードは、できれば外部ファイルにして<head>で読み込むのが理想です。
 jQuery にはページが完全に読み込まれたかどうかを判定する ready イベントが用意されているので、これを使って document の読み込み完了後にコードを実行するよう、以下のような枠組みに入れて記述しますが・・

jQuery( document ).ready( function ( ) {
    // ここに処理を記述します
} );

実際にはこれを簡略化した以下の枠組みに入れて記述するのが一般的です。

$ ( function ( ) {
    // ここに処理を記述します
});


3.3. 実際の書き方事例

id="button" の部分のクリックで id="menu" の部分が 表示/非表示 する例
HTML側に、id="button" と id="menu" が定義された場所が必要です。

$( function() {

   $( '#button' ).click( function() {
       $( '#menu' ).slideToggle('slow');
   });

});


3.4. リファレンス

ライブラリ関数というのは様々存在するので、「覚えて使う」というより、必要に応じてリファレンスサイトなどを見ながら使います。以下参考サイトです。

4.セレクタとメソッド

4.1. jQueryのセレクタ

jQuery では、getElementsBy・・といったDOM関数を使わずに CSSセレクタと同様の記法で 文書内の要素を選択して操作することができます。以下様々なセレクタの書き方を紹介します。


4.2. jQueryのメソッド

jQueryのメソッド(処理内容)は、以下の構文で記述します。

$( セレクタ ) . メソッド名( 引数 );



以下、よく使うメソッドについて、いくつか事例を紹介します。

プロパティーを ' ' で囲む必要があること、また、区切りが [ , ] であることが、 通常のCSSの記述とは異なるので注意が必要です。




5. 演習1|基本サンプル

テキスト、HTML、CSS を動的に変更する基本的な事例です。

6. 演習2|エフェクト・アニメーション

jQuery のエフェクト・アニメーションを確認するための簡単なサンプルです。マウスのホバリングで画像がフェードするエフェクトと、ボタンクリックで要素を動かすアニメーションを実装しています。
この種の「動き」は、CSSアニメーションでも実現できます。

記法や関数の詳細については、以下のような検索でご確認下さい。

7. 演習3|メニューのトグル

クリックで開閉するメニューのサンプルです。

8. 演習4|スムーズスクロール

animateを使って、ページ内の縦スクロールをスムーズにする事例です。

9. 成果の確認

学科サイトの氏名/WebSample のページに以下ようになるはずです。

**jQuery
-jQuery1:https : //JohnSmith.github.io/jquery_sample_01/
-jQuery2:https : //JohnSmith.github.io/jquery_sample_02/
-jQuery3:https : //JohnSmith.github.io/jquery_sample_03/
-jQuery4:https : //JohnSmith.github.io/jquery_sample_04/
~



以上で、第10回の授業は終了です。お疲れさまでした。
第11回は、jQuery プラグインの活用について学習します。



APPENDIX

jQueryのダウンロードの方法について

jQueryのダウンロードのページにいっても、何をダウンロードすればいいのか、わからない。またダウンロード対象のリンクをクリックすると、大量の文字が表示されるだけで、わけがわからない・・・という質問について。

jQueryに限らず、JavaScriptのライブラリーファイルというのは、要するに関数が大量に書いてあるテキストファイルです。ダウンロードする対象がテキストファイルの場合、「ダウンロードしますか?」のダイアログが表示されず、直接それがブラウザに表示されることがあります。また、通信時間を節約するために改行やTABを省いた .min. 形式のファイルの場合、文字列だらけの意味不明なものに見えます。
で、それで問題ありません。それをそのまま保存しましょう。

それが見えている状態で、ブラウザのアドレス欄を確認してみて下さい。http:// ・・・・・・/xxxxx.min.js というかたちで、.jsファイルを見ているということがわかると思います。

要はそれを .js ファイルとして取得すればいいので、そのままブラウザでファイルを保存、あるいは、ページ内を全選択([CTRL]+[A])して、テキストエディターにコピー&ペーストして、xxxxx.min.js など適切な名前で保存すればOKです。



PAGES

GUIDE

DATA

Last-modified: 2020-06-18 (木) 10:30:54