まず、jQueryとはどんな技術なのか、そしてどんなことができるのかについて説明していきます。

jQueryとは？

jQueryはジョン・レシグ氏によって開発され、2006年にリリースされたJavaScriptライブラリです。
ライブラリというのは、あらかじめプログラムされた便利なパーツのまとまりのようなもので、本来ならば何行もコードを書かなければ実現できないような処理でも、1行コードを書いてパーツを呼び出すだけで簡単に実現することができます。
jQueryの登場によってJavaScriptを用いた処理をとても簡単に実装できるようになり、　Webサイトの開発効率が飛躍的に向上しました　。
また、次に説明するjQueryの特徴によって、多くの開発者やWebデザイナーがJavaScriptを利用しやすくなり、Web業界の発展に大きく貢献したライブラリであると言えます。

jQueryでできること

jQueryの主な特徴として以下の点が挙げられます。

• DOM操作を簡単に実装できる
• Ajax（非同期）処理を簡単に実装できる
• ブラウザ間の差異を吸収してくれる

これらの特徴によって、jQueryは非常に便利な使い方が可能となり、広く利用されるようになりました。

DOM操作を簡単に実装できる

DOMとはDocument Object Modelの略で、HTMLの画面部品のことを言います。
jQueryの優れている点として、このDOM操作の簡略化があります。
例えば、以下のような操作が可能です。

• ユーザがボタンをクリックしたら画面上の見た目を変化させる
• テキストボックスに入力された値を取得する
• 画面スクロールに合わせて表示内容を切り替える

そして、Webデザイナー等も簡単に扱えるようにするため、CSSセレクタ（「#」や「.」を使ってスタイルシート上のHTML部品を指定する方法）を使ってHTML部品を操作できるように工夫されています。

Ajax（非同期）処理を簡単に実装できる

AjaxとはAnsynchronous JavaScript And XMLの略で、JavaScriptによる非同期（ユーザの画面操作と連動しない）通信のことを言います。
通常、ユーザの画面操作に対して画面表示を切り替えるには、ユーザのボタン押下などを起点としてサーバーへ通信を行い、サーバー上でユーザの操作内容を取得して、それの応じたページ内容をページ遷移という形で返却するという手順を踏みます。
非同期通信が可能になることで、画面遷移を伴わずにユーザの操作に応じて表示内容を切り替えることができるため、ユーザがより快適にサイト利用することができるようになります。

ブラウザ間の差異を吸収してくれる

jQueryのベースとなるJavaScriptは、Google ChromeやInternet Exproler、Firefoxなどのブラウザに搭載されたエンジンによって実行されます。
そのため、ブラウザ間で微妙に使えるメソッドや書き方に差異が発生することがあります。
ブラウザ間で書き方や動作に違いがあると、エンジニアは当然それを意識してプログラムを書く必要があるため、「対応ブラウザをどれにするか？」や「このメソッドを使いたいけどこっちのブラウザで動かない」など多くの問題が発生します。
jQueryはそんなブラウザ間の差異を吸収し、書き方や動作を統一してくれるため、エンジニアがブラウザ間の差異を意識せずに済みます。

続いて、jQueryを使用する際のメリットとデメリットについてご紹介していきます。
ライブラリのメリットとデメリットを理解したうえで採用することで、開発途中段階になってから問題発生するリスクを抑えることができます。

jQueryのメリット

開発作業においてjQueryを使用する際の主なメリットは以下になります。

• 少ないコード量で処理を実装できる
• ブラウザに依存しない
• プラグインによって機能を拡張できる
• ネット上の技術情報が豊富

ひとつずつ見ていきましょう。

少ないコード量で処理を実装できる

jQueryを使うことで、通常のJavaScriptでコーディングする場合と比べて、コード量がかなり削減できます。
例えば、画面上のnameというidを持つ要素を取得する場合、通常のJavaScriptだと

と書く必要があるのに対して、jQueryの書き方だと

これだけで同じことが実現できます。
コード量が少なければ、それだけコードを読みやすくなり、結果的にバグを減らすことができます。
作業スピードも早くなりますので、とても大きなメリットであると言えます。

ブラウザに依存しない

jQueryが世界的に普及している大きな要因が、この「ブラウザに依存しない」という特徴になります。
Internet ExplorerやEdge、Google Chrome、Safariなど、世の中には様々なブラウザが存在します。
このブラウザごとのJavaScriptの挙動の微妙な差異がエンジニアにとって悩みの種となっていました。
jQueryが登場し、ブラウザ間の差異を吸収してくれたことによって、エンジニアはブラウザの違いを気にすることなく、コーディングすることが可能になりました。

プラグインによって機能を拡張できる

jQueryは、単体でもとても強力なライブラリであると言えますが、jQuery UIやjQuery Mobileなどの拡張機能を追加することによってさらに便利に利用することができるようになります。
jQuery UIはボタンやダイアログ、整ったウィジェットなどの機能をあらかじめ部品として提供してくれますし、jQuery Mobileを使えば、スマホでのタッチやスワイプなどの操作に最適化されたWebサイトを簡単に構築することができます。
この拡張性の高さもjQueryが優れている点のひとつです。

ネット上の技術情報が豊富

jQueryは前述した通り導入するメリットがとても多いため、必然的に世界中で利用され、それに伴ってインターネット上の技術情報や開発者の発信なども豊富に存在します。
できたばかりであまり普及していない言語や、人気のない技術の場合、何かエラーなどで困った際にもネット上でピンポイントの技術情報を探すのに苦労することがありますが、jQueryの情報は比較的簡単に見つけることができますので、開発もスムーズに進められることでしょう。

jQueryのデメリット

次にjQueryのデメリットについても整理しておきます。
具体的には以下のようなデメリットが発生する可能性があります。

• 実装次第で処理が遅くなる場合がある
• 他のフレームワークと干渉する可能性がある

順に説明していきます。

実装次第で処理が遅くなる場合がある

jQueryは前述の通り、便利な機能を集めたライブラリと呼ばれるものです。
jQueryを使用する際には、ライブラリを読み込むという処理が必要になります。
JavaScriptの処理はほとんど行わないようなWebページで、無駄にライブラリの読み込みを行ってしまうと、ページの読み込みが遅くなり、ユーザの利便性が犠牲になってしまいます。
例えるなら、国語の授業がない日に、ランドセルに国語辞典と漢和辞典を入れて登校するようなものです。
jQueryの読み込み自体はそこまで重い処理ではないので、あまり神経質になる必要はないかもしれませんが、処理速度に影響を与える可能性があることは認識しておくべきでしょう。

他のフレームワークと干渉する可能性がある

最近のWebアプリケーション開発の現場では、ReactやVueなどのJavaScriptフレームワークを導入するケースが多くなってきています。
これらのフレームワークとjQueryなどのライブラリを併用する場合に、使用するコードによって処理が干渉する可能性があります。
フレームワークとライブラリ双方が、使いたい部分で問題なく動作するかをしっかり検証しながら開発を進める必要があります。

最後に、jQueryの導入方法と基本的な書き方について紹介します。
導入方法といっても非常に簡単ですので、すぐに使い始めることができると思います。
また、jQueryは書き方もシンプルで直感的ですので、初めての方でもすぐに慣れて使うことができると思います。

jQueryの導入方法

jQueryをWebページで使用する場合、以下の2通りの導入方法があります。

• CDNを利用する
• ライブラリをダウンロードする

ひとつずつ見ていきましょう。

CDNを利用する

CDN（Contents Delivery Network）は、外部のサーバー上に配置されたライブラリをインターネット経由で参照し利用する方法です。
具体的な方法としては、jQueryを使いたいWebページのHTMLファイル内でbodyタグの中に以下のような1行を追加するだけです。



この1行を追加したら、あとは実装したい処理をjQueryの書き方にそって記述していけば、問題なく利用することができます。
注意点としては、ページを表示するたびにインターネット経由でライブラリを読み込むため、インターネットに接続できる環境が必要であること。
また、CDNでのライブラリ提供が急に終了することがあり、使えなくなってしまう可能性があるという点です。

ライブラリをダウンロードする

jQueryを利用するためのもうひとつの方法は、ライブラリをダウンロードして使用するというものです。
ライブラリはjQueryの公式ページ（https://jquery.com/download/）からダウンロードすることができます。
ダウンロードしたJavaScriptファイルをHTMLファイル内で読み込むことでjQueryを使うことができるようになります。
この方法の注意点は、パフォーマンスの低下です。
ライブラリをまとめてダウンロードして使うため、サーバーのリソースを多く使うことになります。
必要なライブラリを見極めて、適切に参照することを意識する必要があります。

jQueryの書き方

続いて、jQueryの基本的な書き方をご紹介していきます。
jQueryの書き方は大きく分けて以下の2つの手順になります。

• 1.ページ上からDOMを取得する
• 2.DOMに対する操作を指定する

こちらも順に見ていきましょう。

1.ページ上からDOMを取得する

まず1つ目の手順として、HTML上のどのパーツ（DOM）を操作対象にするかを指定します。
指定方法は、CSSの書き方と全く一緒（CSSセレクタ）なので、デザイナーさんも馴染みやすいというのが特徴です。
例えば、HTML上に"name"というidのinputタグがあったとすると、以下の書き方で指定できます。



このように非常に簡単にDOMの指定を行うことができます。

2.DOMに対する操作を指定する

次に1つ目の手順で指定したDOMに対する操作（メソッドといいます）を記述します。
例えば先ほどの"name"というidのinputタグに値を設定する場合、以下のように書きます。



「.」（ドット）以降がメソッドと呼ばれる操作の指定になります。
同じことをjQueryを使わずに書こうとすると、こんな感じになります。



これを見ると、jQueryの記述方法がいかにシンプルかがお分かりいただけると思います。

JavaScriptと上手に使い分けよう

お伝えした通り、jQueryはブラウザ間の差異を吸収してくれたり、CSSセレクタを使ったシンプルで直感的な記述ができ、とても便利に使用することができます。
ただし、フレームワークとの干渉や複雑な処理を書く場合にかえって使いづらいと感じる場面も出てくることでしょう。
実際のWebサイト制作などでjQueryを利用する際には、そのメリットとデメリットを把握した上で、基本となるJavaScriptと上手に使い分けを行いながら開発を進めていくことをオススメします。
ライブラリを適切に利用して、スピーディに作業することを目指していきましょう。