jQueryとは?特徴・できること・導入方法・使い方を解説!
computer
jQueryとは?特徴・できること・導入方法・使い方を解説!
アンドエンジニア編集部
2021.09.23
この記事でわかること
jQueryとは、JavaScriptのコードを簡潔に記述できるように設計されたJavaScriptライブラリ
jQuery導入方法は、公式リファレンスからダウンロードする方法とCDNを使用する方法の2種類
jQueryの基本構文は、主にセレクタ・メソッド・パラメータから構成される

jQueryとは

modern

jQueryとは、Webブラウザ用のJavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリの1つです。jQueryのスキルを習得すれば、Web制作でできることの幅が広がります。ここでは、jQuery入門ということで、概要や特徴、できることについて初心者向けに分かりやすく紹介します。

jQueryの概要や特徴

jQueryはジョン・レシグ氏によって、2006年1月にリリースされました。jQueryとはJavaScriptでできることを簡単に実現できるように設計されたJavaScriptライブラリの1つです。つまり、jQueryとJavaScriptは異なったプログラミング言語ということではなく、jQueryはJavaScriptのプログラムの1つと言えます。

jQueryの登場により、プログラミング初心者でもフロントエンドに関する開発を行いやすくなったという特徴があります。近年では、JavaScriptフレームワーク「Vue.js」「React.js」の登場により、jQueryを使用することが「終わった」と感じている方もいるかもしれません。しかしWeb制作の現場では、jQueryはシンプルなコードで記述されるため、現在でも多用されています。またjQueryは学習コストが低いため、身に付けて損はないスキルと言えるでしょう。

jQueryでできること

jQueryのライブラリの中には、HTML・CSSに関するソースコードが数多くあり、動的な表現をシンプルな短いコードで簡単に実装できます。例えばjQueryできることとして、Webサイトでよく使用されている「ボタンをクリックすると画像が切り替わるスライドショー」「マウスオーバーすると文字や背景の色が変化するメニュー」などが挙げられます。

また、JavaScriptでできることの1つであるサーバ非同期通信「Ajax」についても、jQueryを使用すれば簡単に実装可能です。一般的にサーバにデータを送信して、処理結果をWebサイトに反映するには、再読み込みを行う必要があります。しかしAjaxを使用すれば、非同期でサーバと通信できるため、Webサイトの再読み込みが不要となります。jQueryを使用しないでソースコードを記述した場合、コード量は膨大となり、ソースコードの可読性や開発効率の低下を招いてしまうでしょう。

jQueryの使い方

office

jQueryとは、JavaScriptでできることをより簡単に記述できるように設計されたJavaScriptのライブラリの1つであることは理解できたでしょうか。ここでは、jQueryの使い方について詳しく紹介します。

jQueryの導入方法

jQueryを使用するには、導入から始める必要があります。jQueryの導入方法には2種類があり、ファイルをダウンロードしてサーバに直接アップロードする方法と、jQueryの配布元で公開されているファイルを使用するCDNを用いる方法です。CDNとは「Content Delivery Network(コンテンツデリバリーネットワーク)」の略称であり、Webコンテンツをインターネットを経由して配信するために最適化されたネットワークのことです。

まずjQueryをダウンロードして導入する方法では、オフラインでも利用できるというメリットがあります。下記のjQueryに関する公式リファレンスの「Download」にある「Download the compressed, production jQuery x.x.x」と記載された最新バージョンのファイルを右クリックし、「名前を付けてリンク先を保存」でダウンロードすることが可能です。 ( 参考:https://jquery.com/

一方、CDNを使用してjQueryを導入する方法では、Webサイトの表示を高速化できたり、サーバの負荷を軽減させたりすることが可能です。一般的に「jQueryのCDN」「GoogleのCDN」「MicrosoftのCDN」の3種類が使用できます。それぞれのURLを利用して、scriptタグを作成し、HTMLファイルのヘッダーに記述すれば導入は完了です。

jQueryの記述方法

jQueryの記述場所は、ダウンロードした場合とCDNを使用する場合のどちらでも、HTMLファイルのヘッダーに記述するのが一般的です。ただしダウンロードした場合は、HTMLファイルのヘッダーに対して記述する前に、jQueryのファイルをアップロードしなければならないため、注意が必要です。

またjQueryファイルをダウンロードした場合には、JavaScriptファイルをサーバにアップロードする必要があります。一方CDNを使用する場合には、この手順は必要ありません。まずはダウンロードしたファイルをサーバにアップロードします。例えば「js」という名前のフォルダを作成して、そのフォルダの中にファイルをアップロードするのがおすすめです。 その後、jQueryファイルのパスを使用してscriptタグを作成する必要がある点にも注意しましょう。

次に、事前準備ができたらHTMLファイルのヘッダーのscriptタグに、jQueryについて記述を行います。ヘッダーには、CSSファイルなど様々なファイルの読み込みについて記述するため、ヘッダーのどこにjQueryについて記述したら良いか迷われる方も少なくないでしょう。ヘッダー内であれば、どこに記述しても問題ないというのが結論となります。一般的に、実務現場では様々なファイルを記述する中の最後に記載することが多いでしょう。

jQuery入門

ipad

jQueryの使い方や導入方法については理解できたでしょうか。ここからは、jQuery入門ということで、jQueryの基礎文法について詳しく紹介します。

jQueryの基本構文は「$("セレクタ").メソッド("パラメータ[引数]");」です。セレクタにはjQueryで操作するHTML・CSSの要素を記載、メソッドには処理する内容について記載、そしてパラメータには具体的な処理を指示したい場合に記載します。例えば、h2タグによって囲まれた部分の色を青にする場合は下記のように記述します。

$("h2").css("color","#0000FF");

セレクタにはpタグ、メソッドにはcssを変更するためcss()、引数には文字色であるcolorを青(#0000FF)に指定するように記述しています。ここからはセレクタやメソッド、イベント処理について具体的に見ていきましょう。

セレクタ

セレクタには、操作対象となるHTMLやCSSの要素が入力されます。例えば、idやclassの属性値を入力することも可能です。jQueryではセレクタによって、HTMLやCSSの要素の様々な箇所を制御することができます。ここからはセレクタの指定方法の具体例を見ていきましょう。なおJavaScriptでは、「//」を使用すればコメントアウトすることが可能です。

// divタグを指定する場合 $("div")

// 最初のdivタグのみを指定する場合 $("div:first")

// 「pagetitle」というidを指定する場合 $("#pagetitle")

// 「myclass」というclassを指定する場合 $(".myclass")

メソッド

メソッドには、指定した要素に対してどのような操作を行うかを記載します。パラメータを入力すれば、より具体的な処理を指定することが可能です。ここからは、よく使用されるメソッドについて紹介します。

例えば「.css()」メソッドは指定のCSSスタイルに変更するために使用。「.append()」メソッドはHTMLの末尾に指定した要素を追加するために使用。「.remove()」メソッドは指定した要素を削除するために使用。そして「.addClass()」は指定した要素にクラスを追加するために使用します。

イベント処理

メソッドと似ているものとしてイベントがあります。イベントを使用すれば、Webサイトにアクセスしたユーザーのアクションに対して任意の処理を実行することが可能です。

例えばボタンをクリックしたときや、画面をスクロールしたときなどに対して、イベント処理を行うことができます。 jQueryで使用できるイベントは数多くありますが、ここからは一例を紹介します。

// divタグの要素をクリックした場合のイベント $("div").click():

// divタグの要素をマウスオーバーした場合のイベント $("div").mouseover():

jQueryを使用すればJavaScriptの記述を効率化できる!

homework

これまでに、jQueryの概要・特徴・できること・使い方・導入方法・入門者向けの基本文法について解説しました。jQueryとは、JavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリであり、JavaScriptのプログラムの1つとも言えるでしょう。また、jQueryを使用すれば短いコードで開発を行えるため、ソースコードの可読性や開発効率の向上が期待できます。

jQueryを導入するには、公式リファレンスからダウンロードする方法とCDNを使用する方法の2種類があります。それぞれのメリットとデメリットを把握してから、導入方法を選択するのがおすすめです。そしてjQueryを記述する場所は、HTMLのヘッダーです。

jQueryの基本構文は、主にセレクタ・メソッド・パラメータから構成されます。jQueryは学習コストが比較的低いため、今後Web制作に携わりたいと考えている方は、ぜひ勉強してみましょう。

Twitterをフォローしよう!
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部オススメコンテンツ

eyecatch_visual_coder
Adobe製品を使わない"デザイナー"?「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
三角
2020.06.16

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから