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

【参考】[jQuery](https://jquery.com/)
【参考】[JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

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

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

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

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

jQueryでできること一覧を紹介！スライドショーの作成も可能

## jQueryのメリット・デメリット

ここでは、jQueryのメリットとデメリットについて説明します。**jQueryは便利な面もありますが、デメリットもあります。**jQueryを取り入れる前に、メリットとデメリットを理解してから導入を検討してください。

### メリット1.短いコードで記述できる

**jQueryを使用してコードを記述すれば、JavaScriptでコードを記述するよりもコードの量が大幅に少なくなります。**少ないコードで記述できることによって、開発効率を上げたりコーディングミスを減らしたりする効果があります。またコードが見やすくなるため、ほかの人が書いたコードを扱う場合や、コードレビューの際も作業が楽になるでしょう。

### メリット2.すべてのブラウザで使用できる

JavaScriptを使用して同じ動作を同じコードで記述した場合でも、Safari・Google Chrome・Microsoft Edgeなどのブラウザによって処理が実行されないことがあります。しかし、**jQueryを使用すればすべてのブラウザで同じ動作を実現することが可能**です。そのため、ブラウザごとにコードを手直しする必要がないので管理がしやすくなります。

### メリット3.HTMLのDOM操作が簡単になる

**jQueryは、HTMLの部品であるDOM操作が簡単になることもメリット**です。DOM操作には、テキストボックス内の中身を取得・変更することや、ボタン1つで画面の部品を表示・非表示にすることなどがあります。JavaScriptを使用するよりも簡単にDOM操作ができるため、Webページに複雑な動作を盛り込みたいときも便利です。

### デメリット1.処理が遅くなる場合がある

**コードの量によっては、JavaScriptの方がjQueryよりも処理が早くなる場合があります。**jQueryは、処理を実行する際にライブラリを読み込む必要があるため、その分処理に時間がかかるためです。JavaScriptとjQueryで処理速度の違いを理解し、処理速度が速い方を使うようにしましょう。

### デメリット2.JavaScriptの知識が不十分になる

**jQueryはJavaScriptを完璧に理解していなくても使えるため、JavaScriptの知識が不十分になる**場合があります。そのため、トラブルが発生した場合に修正の仕方がわからないといった状況になることもあります。トラブル発生時にきちんと対処できるように、jQueryだけでなくJavaScriptについても十分に理解しましょう。

### デメリット3.フレームワークと競合する可能性がある

**JavaScriptのフレームワークである「Vue.js」や「React.js」とjQueryを併用すると、処理が競合してエラーが発生する**場合があります。フレームワークとjQueryを併用して処理が競合する場合、jQueryを使用せずにJavaScriptだけでコーディングするといった対応が必要です。

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

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

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

【参考】[jQuery](https://jquery.com/)

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

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

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

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

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

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

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

jQuery入門！基本情報からライブラリの使い方まで解説

**セレクタには、操作対象となる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の記述を効率化できる！

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

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

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

jQueryのおすすめ本をレベル別に紹介！勉強方法も解説

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

jQueryとは、JavaScriptのコードをより簡単に記述できるように設計されたJavaScriptライブラリの1つです。当記事では、jQueryの概要・特徴・できること・メリット・デメリット・使い方・導入方法・入門者向けの基本文法について解説します。

jQueryとは、JavaScriptのコードを簡潔に記述できるように設計されたJavaScriptライブラリ

jQuery導入方法は、公式リファレンスからダウンロードする方法とCDNを使用する方法の2種類がある

jQueryの基本構文は、主にセレクタ・メソッド・パラメータから構成される

jQueryとは？特徴・できること・導入方法・使い方を解説！

**jQueryとは、2006年にリリースされたオープンソースのJavaScriptライブラリを指します。**jQueryを使用すれば、一般的にJavaScriptでできることを短いコードで表現可能です。ここでは、jQueryでできることの一覧をわかりやすく解説します。

文字の装飾にはCSSの言語を使用するのが一般的です。例えばCSSを用いて、文字のサイズ・太さ・文字色・背景色を指定することができます。また**jQueryを使用すれば、簡潔なコードで文字に装飾を加えることが可能です。**例えば文字の状態を変えたり、装飾を外したりすることができます。jQueryでは修正・更新したい文字と、どのような装飾を加えたいかを指定すれば、簡単に文字の装飾を行うことが可能です。

### Ajax使用時の外部ファイルの読み込み

**jQueryでできることとして、Ajax機能を使用して外部ファイルを読み込めることがあります。**Ajaxとは「Asynchronous JavaScript and XML」の略称で、JavaScriptを使用してサーバと通信を行い、Webページを更新する技術を指します。Ajaxで最も身近な利用例は、GoogleMapです。*Ajaxによりサーバ側とデータをスムーズにやり取りできるため、Webサイトの訪問者の許容待ち時間を減少させることができます。*

**近年のWeb制作現場ではPCだけではなく、スマホやタブレットなど様々な端末に自動的に最適化されるレスポンシブデザインの作成が重要です。**レスポンシブデザインに対応していないWebサイトの場合、スマホで閲覧した際に記事が読みづらく、ユーザーがすぐに離脱してしまうことも少なくありません。

レスポンシブデザインは一般的にCSSの言語を使用して表示の制御を行いますが、*jQueryを使用すれば、CSSでは実現できないブラウザ動作のイベント検知が可能です。*またスマホアプリでは、一般的にiOSとAndroidで開発されているプログラミング言語は異なります。しかしjQueryを使用すれば、iOSとAndroidどちらにも1つのプログラムで対応することが可能です。

**jQueryを使用すれば、マウスオーバーやクリックで開閉するメニュー機能を実装することが可能です。**近年ではPCだけではなく、スマホやタブレットなど様々な端末でWebサイトを閲覧する機会が増えています。そのためWebサイトには端末に合わせて様々な工夫が必要であり、メニュー機能を実装すれば、ユーザーの利便性が向上します。またjQueryに加えて、レスポンシブデザインを用いれば、メニューは必要時のみに表示でき、ユーザーに配慮したWebサイトを作成できます。

近年ではTwitter・Facebook・InstagramなどのSNSを利用して、記事をシェアしたいというニーズが増加しています。**jQueryのプラグインを使用すれば、Webサイト内にSNSでコンテンツを簡単にシェアできる「シェアボタン」を設置することが可能です。**なおプラグインとは、IT用語としてはアプリケーションの機能を拡張するソフトウェアを指します。

また記事のシェアだけではなく、SNSの機能の1つである「いいね」をクリックすることも可能です。*SNSシェアボタンを設置すれば、記事のシェアなどのためにSNSに遷移する必要がなくなるため、ユーザーは快適に操作できるようになります。*

### マウスオーバーでのエフェクト

近年ではWebサイトの画像やボタンの上にマウスのカーソルを置くと、画像の背景やサイズが変化するサイトが少なくありません。このような**マウスオーバーによるエフェクトも、jQueryにより実装が可能です。**jQueryではユーザーのキーボード操作やマウス操作などのイベント検知に関するコードを比較的簡単に記述できるため、イベント発生時に様々なエフェクトをかけることができます。エフェクトをかけることで、ユーザーの利便性が向上するでしょう。

**jQueryを使用すれば、フェードイン効果やフェードアウト効果を利用したスライドショーを比較的簡単に作成することができます。**画素数が同様の画像ファイルと切り替わる時間を指定するだけで、複数の画像を使用したスライドショーを作ることが可能です。これらをJavaScriptのみを使用して作成するのは困難と言えます。

### リアルタイムで動く画像作成

**jQueryを使用すれば、静止画だけではなく、リアルタイムで動く画像も作成できます。**例えば株価・為替レート・天気などはリアルタイムで確認したいニーズが多いでしょう。jQueryを使用すれば指定した時間に最新情報が表示される画像を作成できるため、チャートの変化などを確認できるサイトが作成できます。またサーバとの交信の間隔は、1秒ごとなど任意に設定することが可能です。さらに*サーバとは非同期に交信を行うため、サーバに対する負荷を減少させることもできます。*

jQueryを使用すればできることが数多くあることは理解できたでしょうか。この他にも、できることは様々にあります。例えば、*「jQuery UI」というjQueryの機能を集めたツールを使用すれば、ドラッグアンドドロップ・カレンダー・スライダーなどあらゆるUIを簡単に作成することが可能です。*jQuery UIを使用したい方におすすめのサンプル集を紹介したWebサイトも数多くあるため、ぜひ参考にしてみてください。

ここではJavaScriptのコードを短く記述できる他に、jQueryを使用するメリットについてわかりやすく紹介します。

システム開発やWeb制作を行っている際に、特定のブラウザで不具合が出てしまうことは少なくありません。例えば、「Internet Explorer」では問題ないが「Firefox」では不具合が発生してしまうということもあります。

ブラウザそれぞれに仕様があるため不具合は仕方ありませんが、**jQueryを使用すればブラウザに対する考慮がほとんど必要ありません。jQueryは複数のブラウザに対応しつつ、各ブラウザの挙動を一致させることができます。**

jQueryには様々なプラグインがあります。例えばアニメーションやエフェクトの種類を増やしたり、スライドバーを簡単に作成したりできるプラグインがあります。jQueryのプラグインは、jQueryの公式サイトやWeb検索ですぐに見つけることが可能です。*無料で使用できるプラグインもあるため、自分に合ったプラグインを利用すれば、効率よく開発を行うことができます。*

jQueryは使用するまでの過程は比較的容易ですが、注意点がいくつかあります。ここでは、jQueryを使用する際の注意点について詳しく紹介します。

### 修正対応が大変になる可能性あり

jQueryはコードの記述が比較的簡単であるため、JavaScriptに関する知識がある程度あれば使用可能です。そのため**不具合やトラブルが生じた際の修正対応が困難になる可能性がある**という点には注意する必要があります。jQueryを使用する場合、JavaScriptでもコードが記述できるように、処理内容をきちんと把握したうえで利用しましょう。

### 処理速度が遅くなる可能性がある

jQueryでは読み込みの時間が生じるため、JavaScriptで処理する場合よりも処理速度が遅くなることもあります。そのため**簡単な機能を実装する場合や、短いコードで記述できる場合には、JavaScriptでプログラムを作成することも考慮に入れましょう。**

### フレームワークを導入するには動作確認が必要

**近年では、Web制作の現場でJavaScriptフレームワークである「React」「Vue.js」などが使用される機会が増えています。**使用するコードによっては処理が競合する可能性があるため、jQueryを使用せずにコードを記述することも少なくありません。これがjQueryが「必要ない」「終わった」と言われる理由の1つです。しかしjQueryの学習コストの低さは魅力的であるため、使用用途や目的によってはこれからも需要があると言えるでしょう。

フレームワークを導入しているプロジェクトでjQueryを使用する場合には、*きちんと動作するか、エラーやバグが発生しないかなどの動作確認を行う*のが大切です。またJavaScriptフレームワークを導入する場合、jQueryを使用することができない可能性もあるため注意しましょう。

## 注意点に気を付けてjQueryを上手く活用しよう！

これまでに、jQueryでできること・メリット・注意点についてできる限りわかりやすく解説しました。QueryとはJavaScriptのライブラリの1つであり、JavaScriptでできることを短いコードで表現することが可能です。

また複数のブラウザに対応していることや、豊富なプラグインがあることもjQueryを使用するメリットです。**jQueryを使用すれば、Ajax使用時の外部ファイルの読み込み・スライドショーの作成・レスポンシブデザイン対応・SNSシェアボタンの設定など、あらゆることができます。**

しかし、処理速度や修正コストなどに注意する必要があります。加えて、Web制作の現場ではJavaScriptフレームワークである「React」「Vue.js」などが使用されることが増加しており、jQueryを使用すると処理の競合が発生し、上手く動作しないことも多いです。*jQueryを使用する際は注意点を押さえて開発を行いましょう。

jQueryとはJavaScriptのライブラリであり、JavaScriptでできることが短いコードで表現可能です。jQueryでできることは数多くあります。当記事では、jQueryでできること・メリット・注意点についてわかりやすく解説します。

jQueryでできることは、Ajax使用時の外部ファイルの読み込み・スライドショーの作成・レスポンシブデザイン対応・SNSシェアボタンの設定など

jQueryのメリットは複数のブラウザに対応していることや、豊富なプラグインがあることなど

jQueryとフレームワークを同時に使用する場合は、動作確認をする必要がある

*jQuery*とは、**JavaScriptライブラリの1つ**でコードをシンプルに開発するために考案されました。*イベントハンドラ・アニメーション・Ajax*をシンプルに記述するためのAPIが提供されます。*最小のコード量で、より多くの事を実装すること*を目標として開発されました。
参考：[jQuery](https://jquery.com/)

*jQuery*は以下のような特徴があり、*JavaScript開発者*の多くは標準的にjQueryを使用しています。
・**コードが軽量であること**
コードサイズが100KB未満でコンパクトであるため、あらゆるモジュールに利用可能です。
・**CSS3に準拠していること**
CSS3準拠のため、スタイルシートの標準活用が可能です。
・**ブラウザ互換性が高いこと**
Chrome・Edge・Firefox・Internet Explorer・Safari・Opera等、主要なブラウザに対応しますので高い互換性があります。

実際の開発コードも、jQueryを使用することでJavaScriptやCSSのコード量を削減することができるのでおすすめです。

*jQueryライブラリ*は**公式ダウンロードサイトからダウンロード**します。公式サイト最新版は*3.6.0*です。
参考：[jQuery Download](https://jquery.com/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](https://code.jquery.com/)

*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](https://learn.jquery.com/about-jquery/how-jquery-works/)

ここでは*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要素
・**動作設定「どうするのか」**
　色を変更する・追加表示する等

具体的な指定方法については、以降で説明していきます。

*条件設定*の方法は*イベントAPIの定義*に従います。以下は代表的なイベントの例です。
・**ページがロードされた場合**
　ready()で指定し実行します。

その他マウスやキーボード操作に対応したイベントの多くを指定することができます。
・**イベントが発生した場合**
　クリックイベント時の処理をclick()で指定します。
　ダブルクリック時の処理をdblclick()で指定します。
　エラー時の処理をerror()で指定します。
　フォーカス時はfocus()で指定します。
　選択オプションの変更時はchange()で指定します。
　キー操作時はkeyup()・keypress()・keydown()で指定します。
　マウス操作時はmouseup()・mousedown()・mouseover()・mouseenter()・mousemove()・mouseleave()で指定します。

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>

動作設定を記載する際には以下のような指定を行います。
**\<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の記述と併用可能*です。従来個別に設定していた指定が一括で行ったりイベントハンドラを簡単に設定したりすることができます。ウェブコンテンツの**開発生産性が向上**するため、ぜひ利用しましょう。

jQueryは、イベントハンドラ・アニメーション・Ajaxをシンプルに記述するためのJavaScriptライブラリで、コードサイズがコンパクトで人気があります。ここでは、jQuery初心者向け情報からライブラリの使い方までを入門講座として説明していきます。

jQueryとは、コードをシンプルに開発するために考案されたJavaScriptライブラリを指します

jQueryを使用することでJavaScriptやCSSのコード量を削減することができます

ウェブコンテンツの開発生産性が向上しますので、おすすめです

## jQueryを学習するときのおすすめ本の選び方

**jQueryとはJavaScriptライブラリの1つであり、JavaScriptでできることを短いコードで簡潔に記述することができます。**jQueryのメリットは、特定のブラウザに依存しないことや、プラグインの豊富さなどです。jQueryを勉強するにあたって、本を活用したいと考えている方は多いのではないでしょうか。

ここでは、jQueryを学習する際の本の選び方について詳しく紹介します。

### サンプルコードが記載されている本

**本や参考サイトを利用すれば、jQueryに関する体系的な知識を勉強することができます。しかし*プログラミングスキルを身に付けるには、インプットだけではなく、アウトプットするのが大切です。*

特に初心者の場合、本を読んでjQueryについて理解したつもりでも、コーディングしてみると何を記述すれば良いかわからないという事態はよく発生します。インプットとアウトプットを繰り返し、試行錯誤することで、コーディングスキルは身に付きます。

そのため、jQueryの基本的な知識に加えて、*サンプルコードや練習問題が記載されている本を選ぶのがおすすめ*です。

### 専門用語がわかりやすく解説されている本

IT用語には数多くの専門用語があります。普段使われている言葉でも、IT用語では別の意味で用いられることも少なくありません。また**実務経験のない方がjQueryについて勉強すると、本によっては説明が難しいといったこともよくあります。

**そのため*jQuery初心者やプログラミング未経験の方は、専門用語について嚙み砕いて解説されている本を選ぶのがおすすめです。*

IT業界は他の業界と比較して、トレンドの移り変わりが激しいです。*jQueryもバージョンアップが繰り返し行われています。*本も同様で改訂版が出版されていることは少なくありません。

出版日が古い本を選んでしまうと、既に廃止されている技術を誤って覚えてしまう可能性もあるため、注意が必要です。**できる限り出版日が最新の本を選ぶようにしましょう。**

jQueryのおすすめ本の選び方については理解できたでしょうか。ここでは、jQueryの具体的なおすすめ本についてレベル別に紹介します。

初級者向けに、jQueryのおすすめ本を紹介します。


**本書籍は知識のない未経験でも、jQueryを効率よくできるように、徐々に難易度の上がるステップアップ形式で解説されているのが特徴です。**jQueryの勉強につまずいた経験がある方にもおすすめの1冊です。また*サンプルコードは敢えて途中までのみ記載することで、ユーザーの創造力を養うような仕組みを採用しています。

*最終的には、Webデザイナーやエンジニアが作成するようなWebサイト*を制作します。そのため本書籍を活用すれば、jQueryの基礎から実践的なスキルまで身に付けることが可能です。
（ 参考：https://www.shiftbrain.com/book/jquery/ ）


**本書籍は、HTMLやCSSの知識はあるけれど、JavaScriptやjQueryの経験のない初心者向けのjQuery勉強本です。**全部で30レッスンあり、図やイラストが豊富に使用されているのが特徴です。本書籍では、jQueryの基礎の知識や文法を学び、実際にサンプル作品を作りながら、jQueryの仕組みや使い方を学ぶ流れです。

各レッスンは*講義と実習で構成されているため、効率よくインプットとアウトプットができスキルが身に付きやすい*です。またメニュー・ナビゲーション・UIパーツなど、Web制作でよく使用される技術もきちんと習得することができます。本書籍は、Web制作者・デザイナーを目指したい方におすすめです。
（参考：https://www.shoeisha.co.jp/book/detail/9784798136226 ）

ここでは中級者向けに、jQueryのおすすめ本を紹介します。

*1.プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート*

**本書籍の対象読者は、jQueryの入門書は読み終えた方や、プラグインの使用方法を理解している方などです。**jQueryには数多くのプラグインがあり、エフェクトやアニメーションなどのバリエーションを増やすことができます。しかし*jQueryのメソッドやイベントアクションの理解を深め、*プラグインを使用する必要がない場面では、必要最低限のプログラムを自力で実装し、jQueryを上手に活用できるようになることが本書籍の目的です。

また、*jQueryの様々なAPIを把握し、プラグインの中身を理解できる*と、不要な機能を削除するなど軽量化もできるようになります。
（ 参考：[https://www.sbcr.jp/product/4797385274/](https://www.sbcr.jp/product/4797385274/) ）

*2.jQueryデザインブック 仕事で絶対に使うプロのテクニック*


**本書籍を読めば、仕事で活用できる様々なスキルを身に付けることができます。**例えばナビゲーションの制作・SNSとの連携・jQuery Mobileなどのスキルを習得することが可能です。そのため本書籍は、jQueryを使いこなしたいという方におすすめと言えます。Web制作の実務現場で使用されているjQueryのコードを、ステップバイステップ形式で解説しているのが特徴です。

また、*サンプルコードをダウンロードして利用できるため、実際の動作を確認することができます。*さらに、セレクター・メソッド・イベントなどのjQueryの基礎もきちんと学ぶことが可能です。このように本書籍を利用すれば、jQueryの基礎から応用までのスキルを身に付けることができます。
（ 参考：https://books.mdn.co.jp/books/3211303011/ ）

ここでは上級者向けに、jQueryのおすすめ本を紹介します。


**本書籍ではjQueryコミュニティの最先端で活動している著者陣が、役立つ情報や技術を解説しています。**仕事のプロジェクトでjQueryを使用する、一流のフロントエンドエンジニアのパターンやプラクティスが記載されているのが特徴です。

また、*実際課題に対するベストプラクティスをトピックごとに取り上げているため、役立つスキルを身に付けることができます。*jQueryの基礎を踏まえ、jQueryの高度なテクニックやアイデアを吸収することで、実務の問題解決に必要なスキルを習得することが可能です。
（ 参考：https://www.oreilly.co.jp/books/9784873114682/ ）

*2.jQuery+jQuery UI+jQuery Mobile逆引きハンドブック*


**本書籍はjQueryに加え、インタラクティブなWebサイトを制作するための「jQuery UI」や、スマートフォンサイト制作に使えるフレームワーク「jQuery Mobile」に関する逆引きリファレンスです。

**それぞれの機能について体系的に解説しているのが特徴です。またサンプルコードも掲載しているため、実際に動作確認を行うこともできるでしょう。
（ 参考：https://www.c-r.com/book/detail/982 ）

**jQueryは本だけではなく、学習サイトを活用して学ぶことが可能です。**jQueryを学べる学習サイトは「ドットインストール」「Progate」「Udemy」などが挙げられます。ただし、*本や学習サイトは費用コストが低いですが、独学で勉強しなければならないため、独学が苦手な方はプログラミングスクールの利用を検討しましょう。*

*本を利用するメリットは体系的な知識を習得できる点で、デメリットは手を動かす機会が少ないため、実績的なスキルが身に付きづらい点が挙げられます。また*学習サイトを利用するメリットは、手を動かしながら勉強を進められる点です。*そのためコーディングスキルを身に付けやすいという特徴*があります。

一方、jQueryの知識が全くない状態で、学習サイトで勉強を始めてしまうとエラーやバグが発生し、途中で挫折してしまう方も少なくありません。**本と学習サイトを併用して学習するのがおすすめです。**

## 自分に合ったjQueryの本を活用して効率よく勉強しよう！

これまでにjQueryの本の選び方・おすすめ本の紹介・勉強方法について解説しました。**jQueryとはJavaScriptライブラリの1つであり、Web制作に役立つ豊富な機能があります。**

*jQueryの本を選ぶにあたって、サンプルコードの記載されているかどうかをチェックするのが大切です。*また初心者であれば、難しい専門用語がわかりやすく解説している本を選びましょう。さらに**本だけではなく、学習サイトと併用すると効率よく勉強できます。**ただし独学が苦手な方は、プログラミングスクールの受講も検討してみましょう。

*自分のレベルに合った本と学習サイトを選ぶのが大切であり、効率のよいjQueryのスキルアップを目指しましょう。*

jQueryとはJavaScriptライブラリの1つであり、JavaScriptでできることを短いコードで簡潔に記述することができます、当記事では、jQueryの本の選び方・おすすめ本の紹介・勉強方法について解説します。

jQueryのサンプルコードの記載されている本を選ぶのが大切

jQuery初心者の場合、難しい専門用語をわかりやすく解説している本を選ぼう

jQueryを勉強するにあたって本と学習サイトを併用するのがおすすめ

jQueryの記事（1ページ目）