jQueryとは？
jQueryとは、JavaScriptライブラリの1つでコードをシンプルに開発するために考案されました。イベントハンドラ・アニメーション・Ajaxをシンプルに記述するためのAPIが提供されます。最小のコード量で、より多くの事を実装することを目標として開発されました。 参考：jQuery
jQueryの特徴
jQueryは以下のような特徴があり、JavaScript開発者の多くは標準的にjQueryを使用しています。 ・コードが軽量であること コードサイズが100KB未満でコンパクトであるため、あらゆるモジュールに利用可能です。 ・CSS3に準拠していること CSS3準拠のため、スタイルシートの標準活用が可能です。 ・ブラウザ互換性が高いこと Chrome・Edge・Firefox・Internet Explorer・Safari・Opera等、主要なブラウザに対応しますので高い互換性があります。
実際の開発コードも、jQueryを使用することでJavaScriptやCSSのコード量を削減することができるのでおすすめです。
jQueryのダウンロードは？
jQueryライブラリは公式ダウンロードサイトからダウンロードします。公式サイト最新版は3.6.0です。 参考：jQuery Download
jQueryはお使いのパッケージマネージャからも利用できます。npmやyarnの場合は次の様にインストールセットアップを行います。 npm install jquery yarn add jquery
jQueryはダウンロードせずにCDN（Content Delivery Network）の利用も可能です。CDNの使い方は、<script src=”配信先のjQuery URL”>を指定します。 参考：jQuery CDN – Latest Stable Versions
jQueryの基本動作
jQueryは次のサンプルのように、HTMLに組み込んで利用します。数ある入門サイトや入門講座でもおすすめする最初のステップです。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <a href="URL">Text</a> <script src="jquery.js"></script> <script> ： </script> </body> </html>
jQueryコードをどこに書くかというと、<script>と</script>で囲んだ部分にJavaScriptやjQueryのコードを記述します。<head>と<body>の要素のどちらに記述しても構いませんが、作成したjQueryコードを実行する前にライブラリ読み込みを完了する必要があります。そのためjquery.jsの読み込みは、<head>の最初に記述する方が確実に動作設定させることができます。
上記サンプルの”src=”で指定するjquery.jsは、事前にダウンロードし保存しておきます。ダウンロードせずにCDNを利用しても構いません。 参考：jQuery How jQuery Works
jQueryを使ってみよう
ここではjQueryの使い方をいくつか紹介していきます。ブラウザ表示完了後の処理を考えてみると、JavaScriptではonload関数を用いてブラウザ表示完了後の処理を記述できます。 window.onload = function() { alert( "ようこそ本ウェブサイトへ" ); }; ここでダウンロードが上手く終了しない場合は、以下のjQueryコードで何らかの表示を追加できます。以下の例は、jQueryのreadyイベントの実装例です。 $(document).ready(function() { // ここにjQueryコードを記載します });
上記サンプルで用いた$はjQuery関数を呼ぶ手続きです。つまり、$(document)はjQuery(document)と同義となります。さらに、”$(document).ready(function() {“は”$(function() {“と省略することもできます。省略時のサンプルは以下の通りです。 $(function(){ // ここにjQueryコードを記載します });
jQueryの考え方をわかりやすく
jQueryは多岐に利用できますが、CSSのセレクタやHTMLの要素を指定し処理を設定します。つまり「どのような条件で」「何を」「どうするのか」を順に指定すれば良いことが分かります。 ・条件設定「どのような条件で」 例として、クリックした時・ロード完了時等 ・指定するCSS・HTML要素「何を」 CSSやHTML要素 ・動作設定「どうするのか」 色を変更する・追加表示する等
具体的な指定方法については、以降で説明していきます。
jQueryの条件の指定方法
条件設定の方法はイベントAPIの定義に従います。以下は代表的なイベントの例です。 ・ページがロードされた場合 ready()で指定し実行します。
その他マウスやキーボード操作に対応したイベントの多くを指定することができます。 ・イベントが発生した場合 クリックイベント時の処理をclick()で指定します。 ダブルクリック時の処理をdblclick()で指定します。 エラー時の処理をerror()で指定します。 フォーカス時はfocus()で指定します。 選択オプションの変更時はchange()で指定します。 キー操作時はkeyup()・keypress()・keydown()で指定します。 マウス操作時はmouseup()・mousedown()・mouseover()・mouseenter()・mousemove()・mouseleave()で指定します。
jQueryの対象の指定方法
jQueryでCSS・HTML要素を指定する場合についてもまとめておきます。jQueryでは、CSSのセレクタを用い合致する条件指定を行います。条件に応じて以下の要素を指定します。 ・jQuery(セレクタ[, コンテキスト] ) セレクタの設定を行います。 ・jQuery(エレメント) DOMエレメントを指定します。 ・jQuery(配列エレメント) 配列を含むDOMエレメントを指定します。 ・jQuery(オブジェクト) 通常のオブジェクトを指定します。 ・jQuery(セレクション) jQueryオブジェクトを複製します。 ・jQuery() 引数を受け付けない指定です。
jQueryではHTMLに対しても指定が可能です。各HTML要素を指定することができます。 ・jQuery( html [, ドキュメント] ) HTML文字列を解釈し設定します。 ・jQuery( html, 属性) 単一のHTMLを対象に設定します。
さらに、DOMがロード完了により実行する関数を定義するにはコールバック関数を指定します。 ・jQuery( callback ) 簡略表現として用い、実際は$(document).ready()を指します。 必要とされるコードを記述します。
実際のサンプルは次のようになります。 div要素で最初のボーダー枠を赤にし、以降の<div>に”あなたは誰？”を緑で挿入します。最後の<div>は背景色を赤に設定します。 <!doctype html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("span:first").css("border","2px solid red"); $("div").html("<span class='fg-g'>あなたは<b>誰？</b></span>"); $("div:last").css("background-color","red"); }); </script> <style> .fg-g { color:green; } </style> </head> <body> <span>止まりなさい！</span> <div></div> <div></div> </body> </html>
jQueryの動作設定方法
動作設定を記載する際には以下のような指定を行います。 <a href=”URL”>のリンクをクリックした場合のサンプルは以下の通りです。 $("a").click(function() { // ここにコードを記述します } $("a")はa要素を表します。
コード記述の例として、alertでポップアップ表示を行う場合のサンプルは以下のようになります。 $("a").click(function() { alert("メッセージ"); }
この記述は一見以下のコードと同等に見えます。 <a href="URL" onclick="alert('メッセージ')">XYZ</a> jQueryの場合では、1度の指定だけで全てのa要素に反映できます。通常は各要素単位で指定する必要があるため、より簡単に記述できるメリットがあります。
この他にaddClass()でクラスを追加したり、removeClass()でクラスを削除したりすることができます。サンプルは以下の通りです。<body>内の3つの<p>の順番で表示色や背景色を変更しています。 <!doctype html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("p:first").addClass("bg-y"); $("p:last").addClass("fg-g"); }); </script> <style> .bg-y { background:yellow; } .fg-g { color:green; } </style> </head> <body> <p>本日の</p> <p>テストは</p> <p>中止です</p> </body> </html>
jQueryはお手軽に始められる生産性向上ライブラリです
jQueryはJavaScriptのライブラリのため、HTML・CSSやJavaScriptの記述と併用可能です。従来個別に設定していた指定が一括で行ったりイベントハンドラを簡単に設定したりすることができます。ウェブコンテンツの開発生産性が向上するため、ぜひ利用しましょう。
新着記事やエンジニアに役立つ情報をお届け！
日々のキャッチアップをお手伝いします！
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
