動くホームページの作り方！知っておきたいjQueryの基本

ホームページなどをブラウザで表示した際に、マウス操作や経過時間に応じて表示を変化させるには、javascriptで作られたプログラムが必要になります。ブログソフトウェアのwordpressでも使われているjQueryについて、押さえておきたい基本事項をまとめました。

jQueryとは？

jQuery（ジェイクエリー）とは、javascriptのライブラリで、Webサイト上のjavascriptプログラムを簡単に作成できるようにするためのものです。jQuery自体もjavascriptで出来ているので、ブラウザで読み込み指定をするだけで利用できます。

jQueryを使用する利点は、プログラムコードで構築する処理手順を大幅に削減できる点にあります。jQueryが無くても同じ処理は実装できますが、広く使われているためカスタマイズや移行の際に、jQueryの知識が必要になることがあります。

要点

jQueryを読み込んで使えるようにする

jQueryは、公式サイトからダウンロードして入手する事が出来ます。ダウンロードできるファイルは、圧縮されたものと、非圧縮のものがあり、通常は圧縮されたものを使用します。

圧縮されているものは、ファイル名が.min.jsとなっています。なぜ圧縮されているのかと言うと、ファイルサイズが大きいとサイト表示のレスポンスに影響があるためで、なるべく小さいファイルが好まれます。

ダウンロードしたjQueryのファイルは、FTPなどでWebサーバに設置しますが、サイト表示のレスポンスを早める目的で、CDN（コンテンツデリバリーネットワーク）と呼ばれるサービスを利用する方法も有ります。Googleのものは無料で利用できます。

CDNは利点として、他サイトでその読み込みURLが利用されていた場合、キャッシュ化されているため、自サイトへのアクセス時にはキャッシュが利用されてレスポンスが速くなる点があります。ただし、外部サイトへの参照になるためオンライン専用になり、地域によっては使えない事もあります。

<!-- 同サーバから読み込む --> <script src="jquery-3.3.1.min.js"></script> <!-- CDNから読み込む --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQueryのコーディングの基本

jQueryはjavascriptなので、WebサイトのHTMLを処理する事になります。HTMLは、ブラウザが解析を行った後にjavascriptで利用できるようになるため、javascriptでは記述場所を</body>の近くにするなど工夫が必要でした。jQueryでは$(function{});の構成でコーディングするだけで、HTMLの解析後に動作させることが出来ます。

<script> /* HTML解析後にjQueryを動作 */ $(function(){ /* ここに処理をコーディング */ }); /* 別の記述方法 */ jQuery(function(){ /* ここに処理をコーディング */ }); </script>

wordpressなど、動作させるページによっては、jQueryが使えないことがあります。原因としては、変数$が使えないケースになりますが、対処方法として、(function($){})(jQuery);のように記述することで使用できるようになります。

<script> /* $が使えない場合 */ (function($){ /* ここに処理をコーディング */ })(jQuery); </script>

jQueryのコーディング方法は基本的に、対象となるHTML要素を選択し、メソッドで処理を行なう流れになります。jQueryでのHTML要素の選択方法は、cssと同じで、タグ名や#.を利用できます。

<script> $(function(){ /* タグ名でエレメントを選択 */ $('th') /* ID属性でエレメントを選択 */ $('#id') /* class属性でエレメントを選択 */ $('.class') /* メソッド fadeOut() で徐々に消す */ $('#id').fadeOut(); /* 複数要素 */ $('.class').each(function(){ /* 徐々に表示 */ $(this).fadeIn(); }); }); </script>

jQueryでよく使われるメソッド

jQueryでは、HTML要素を選択後、メソッドで状態を取得したり設定したり、特定の処理を行わせることが出来ます。処理内容は主に、cssを変化させることになるので、cssの知識が必須となります。

<script> $(function(){ /* 指定要素の内部HTMLを変更 */ $('#id').html('タグ'); /* 指定要素の内部HTMLを取得 */ var h = $('#id').html(); /* 指定要素を含めたHTMLを取得 */ var h = $('#id').prop('outerHTML'); /* 指定要素の属性を設定 */ $('#id').attr('name','name1'); /* 指定要素の属性を設定 */ $('#id').prop('checked',true); /* 指定要素のクラスを追加 */ $('#id').addClass('current'); /* 指定要素のクラスから削除 */ $('#id').removeClass('current'); /* 指定要素のcssを設定 */ $('#id').css('width','500px'); /* 指定要素のcssを複数設定 */ $('#id').css({"width":"500px","height":"500px"}); /* 指定要素のcssを取得 */ var v = $('#id').css('display'); /* 指定要素を徐々に表示 */ $('#id').fadeIn(); /* 指定要素を徐々に消す */ $('#id').fadeOut(); /* 指定要素に高さを徐々に与えて表示 */ $('#id').slideDown(); /* 指定要素の高さを徐々に減らして消す */ $('#id').slideUp(); /* 指定要素を徐々に変化させる */ $('#id').animate({"bottom":"0"}); /* 指定要素を子要素の先頭に追加 */ $('#id').prepend('タグ'); /* 指定要素を子要素の末尾に追加 */ $('#id').append('タグ'); /* 指定要素を直前に追加 */ $('#id').before('タグ'); /* 指定要素を直後に追加 */ $('#id').after('タグ'); /* 指定要素を削除する */ $('#id').remove(); }); </script>

jQueryでよく使われるイベント

javascriptでは、ブラウザが検知したマウス操作などをイベントとして処理できましたが、jQueryでも同様に処理できます。注意点として、ajaxなどでHTML要素を追加した場合、その追加要素に対するイベントの登録は、親要素に設定します。

<script> $(function(){ /* 指定要素がクリックされた時 */ $('#id').on('click',function(){}); /* 指定要素に複数のイベント処理を登録 */ $('#id').on({ /* マウスカーソルが要素内に入った時 */ 'mouseenter':function(){}, /* マウスカーソルが要素内から出た時 */ 'mouseleave':function(){} }); /* 後から追加した指定要素がクリックされた時 */ $('#parent').on('click','#id',function(){}); /* 指定要素が読み込まれた時 */ $('img').on('load',function(){}); /* 指定要素がスマホでタッチされた時 */ $('#id').on('touchstart',function(){}); /* 指定要素がスマホでタッチされた状態で動いた時 */ $('#id').on('touchmove',function(){}); /* 指定要素がスマホでタッチ後、指が離れた時 */ $('#id').on('touchend',function(){}); /* ウィンドウサイズが変更された時 */ $(window).on('resize',function(){}); /* ウィンドウのスクロールが行われた時 */ $(window).on('scroll',function(){}); /* 特定のイベントを実行する */ $('#id').trigger('click'); /* 指定要素に登録したイベントを削除 */ $('#id').off('click'); }); </script>

jQueryと合わせてよく使われるプラグイン

jQueryは単体でも十分に有用なライブラリですが、さらに別のライブラリをプラグインとして追加する事も出来ます。よく使われるプラグインとしては、jQuery UIなどがあります。jQuery UIでは、指定したHTML要素をドラッグして動かしたり並び替えたり、指定要素内にドロップさせることが出来るようになります。

<!-- 同サーバから読み込む --> <link rel="stylesheet" href="jquery-ui.min.css"> <script src="jquery-3.3.1.min.js"></script> <script src="jquery-ui.min.js"></script> <script> $(function(){ /* 子要素を並び替えられるように */ $('#id').sortable(); /* 指定要素をドラッグできるように */ $('#id').draggable(); /* 指定要素内にドロップできるように */ $('#id').droppable(); }); </script>

jQueryプラグインは、jQueryとプラグインファイルを読み込むことで使えるようになります。基本的にプラグインの読み込み後は、メソッドが追加されているので、そのメソッドで設定などを行い処理を実装します。

jQuery UIでは、cssの読み込みも必要となるため、注意が必要です。また各メソッドは、引数を渡すことで動作の詳細設定が可能です。jQuery UIには、他にもカレンダーを表示して日付選択が出来るようにする機能などがあります。