jQueryとは？その特徴や導入方法を解説します【jQuery離れが起きてます】

jQuery jqueryロゴ

今回の記事は、

  • jQueryを始めてみたい
  • jQueryとJavascriptはどう違うの？
  • そもそも、今からjQueryを始めるべき？

というお悩みを解消するための記事になっています。

この記事の前半では、「jQueryの特徴やその導入方法」をご紹介しつつ、後半では「jQuery離れの実情」について解説させていただきます。

なお、Javascriptの機能や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

【初心者向け】Javascriptとは？その便利な機能や特徴をわかりやすく解説します！

今回は、Javascriptの機能や特徴、そしてその将来性についてご紹介していこうと思います。Javascriptは今後もまだまだその需要拡大が見込まれており、これから勉強を始めようと思われている方も多いのではないでしょうか？隅々まで分かりやすく簡潔にご説明していきますので、ぜひ最後まで読んでみてくださいね。

それでは参りましょう！

目次

jQueryとは何なのか？

それではまずは、jQueryの基本情報を見ていきましょう。

jQueryは2006年1月にリリースされたJavaScriptのライブラリであり、ここで言う「ライブラリ」とは、使用頻度の高い機能をより簡単な形でまとめてくれているファイルです。

つまり、このjQueryは「JavaScriptのライブラリ」ですので、JavaScriptで使用頻度の高いメソッドをより簡単な形で整理してくれています。

例えば、同じ機能を実現しようとする場合、JavaScriptで5行書かなければならなかったものが、jQueryでは1~2行だけで済んでしまうケースが多々あります。

このようにして、これまでのコードを大幅に簡略化できるということで、jQueryは登場当初からめきめきとその人気を伸ばしていきました。

jQueryの特徴

続いてはjQueryの特徴を見ていきます。

jQueryの特徴として特筆すべきは、主に以下の3点になります。

  • 1. コードの簡略化
  • 2. 拡張性の高さ
  • 3. ブラウザの互換性

jQueryの特徴その１ コードの簡略化

こちらは先ほどの章でも軽くご紹介しましたが、jQueryを使うととにかくコードが簡略化されます。

同じ機能を実装するのに、「長く難しい」コードを書くのと「短く簡単な」コードを書くのとでは、当然後者の方を選びますよね。

コードを簡略化することで、実際の開発工程が短縮できるだけでなく、何よりもコード全体の見やすさも向上しますので、コードの読み違いなどによる人為的なミスも大幅に減らすことができます。

jQueryの特徴その２ 拡張性の高さ

jQuery自身だけでも十分便利ではあるのですが、加えて数多くのプラグインが用意されていることで、スライダーやカレンダー機能などを簡単に実装することができます。

これらのプラグインは、jQueryの開発者自身が作っているというわけではなく、jQueryを利用している世界中のプログラマーが開発しています。

有料のものもあるのですが、ほとんどが無料で公開されているため、これらを利用しない手はないと思います。

導入する際には、そのプラグインのREADMEに始め方や実装方法などが記載されていますので、そちらを参考にしていきます。

例えば、スライダー機能を実装する際によく使用される「Slick」はこちらのレポジトリ（https://github.com/kenwheeler/slick）が公開されており、こちらのREADMEの手順を順番に進めていくことで簡単にスライダー機能を実装することができます。

jQueryの特徴その３ ブラウザの互換性

JavaScriptの場合、ブラウザ（Google Chrome, IE, Firefox など）毎に対応状況が異なっており、「Chromeでは動いた機能がIEでは全く動かない…」ということも発生します。

しかしjQueryを導入すると、これらのブラウザ間の差異を極力ゼロにしてくれます（jQuery側で吸収してくれるため）。
（なお、Javascriptでブラウザを判別する方法についてはこちらの記事（【2020年版】Javascriptでブラウザを判定する方法まとめ【コピペで使える】）にて詳しく解説していますので、ぜひこちらもご覧くださいね。）

この点がとても画期的で、それまでブラウザ互換対応に苦しんでいたプログラマーたちはこぞってjQueryを使用するようになりました。

他方で、「極力」といった言葉を使っている通り、ブラウザ間の差異を完全に無くしてくれるということではありませんので、この点はくれぐれもご注意ください。

jQueryは現在もバージョンアップが繰り返されている一方で、社内の業務システムなどでサポートの終了したバージョンのブラウザを使用しているケースもあり、そのような場合にはさすがのjQueryも対応はしきれません。

そのため、jQueryを導入する際には、その導入先のブラウザ環境をしっかり確認した上で実装していくようにしましょう。

jQueryの導入方法

続いてはjQueryの導入方法を見ていきましょう。

jQueryを導入するには以下の2種類があります。

  • 1. jQueryのファイルをダウンロードする
  • 2. CDNを利用する

jQueryの導入方法その１ ファイルをダウンロードする

まずはjQueryのファイルをダウンロードする方法です。

jQueryは公式サイトにてファイルが公開されていますので、そちらをダウンロードすることですぐに使い始めることが可能です。

具体的な手順は以下の通りになります。

  • 1. jQueryの公式サイトへアクセスする
  • 2. ファイルをダウンロードする
  • 3. 使用したいプロジェクトにファイルを格納する

jQueryのファイルをダウンロードする手順その１ jQueryの公式サイトへアクセスする

まずはjQueryの公式サイト（https://jquery.com/download/）へアクセスしてください。

jQueryのファイルをダウンロードする手順その２ ファイルをダウンロードする

以下のような画面が表示されると思いますので、赤枠部分のリンクを右クリックして、「リンク先を別名で保存」を選択するとjsファイルがダウンロードされます。

jQueryのファイルをダウンロードする手順その３ 使用したいプロジェクトにファイルを格納する

その後、以下のようにして、使用したいプロジェクトのbodyの閉じタグ（</body>）の前にscriptを埋め込んであげれば大丈夫です。

<body>
<script type="text/javascript" src="js/jquery-3.5.0.js" ></script>
</body>

なお、ここでjs/jquery-3.5.0.jsとしている箇所は、実際には格納しているディレクトリ/ダウンロードしたファイル名を記載する必要がありますので、ご注意くださいね。

jQueryの導入方法その２ CDNを利用する

続いては、CDNを利用してjQueryを導入する方法を見ていきます。

CDNというのは、「Contents Delivery Network」の略で、コンテンツ（ここではjQueryファイル）を配布するためのサーバーを立て、配布先（ユーザー）に近いネットワークを経由してコンテンツを配布する仕組みです。

このCDNを使ってjQueryを導入する手順は以下の通りです。

  • 1. jQueryの公式サイトへアクセスする
  • 2. Google CDNページへアクセスする
  • 3. 使用したいバージョンのスニペットをコピーする
  • 4. コピーしたスニペットをコードへ貼り付ける

CDNを使ってjQueryを導入する手順その１ jQueryの公式サイトへアクセスする

まずはjQueryの公式サイト（https://jquery.com/download/）へアクセスしてください。

CDNを使ってjQueryを導入する手順その２ Google CDNページへアクセスする

しばらくスクロールすると「Other CDNs」という章があると思いますので、その中の「Google CDN」へアクセスしてください。

CDNを使ってjQueryを導入する手順その３ 使用したいバージョンのスニペットをコピーする

続いて、使用したいバージョンのスニペットをコピーしてください。

CDNを使ってjQueryを導入する手順その４ コピーしたスニペットをコードへ貼り付ける

その後、以下のようにして、使用したいプロジェクトのbodyの閉じタグ（</body>）の前に、コピーしたスニペットを貼り付けてあげれば大丈夫です。

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>

jQueryは不人気？

さて、ここまでjQueryの良い点ばかりをご紹介してきましたが、実のところ、近年、徐々に「jQuery離れ」が起きてきています。

その理由はズバリ、「Webサイトのモダン化」です。

昨今、SPAをはじめとした「Webサイトのモダン化」が進んでおり、それによってWebサイトの重きはサーバーサイドからフロントエンドへと移りつつあります。
（SPAについてはこちらの記事（SPAって一体なに？【初心者向け】最近Web業界で人気のSPAの特徴やそのメリット・デメリットをご紹介します！）にて詳しく解説していますので、こちらもぜひご覧くださいね。）

こうした流れの中で、肥大化し続けるフロントエンドを処理するために「仮想DOM」という新たな概念が登場し、それらをサポートするAngularやReact、Vue.jsなどのフレームワークも台頭してきました。

この「仮想DOM」の登場によって、直接DOMを操作することは少なくなり、それに伴ってjQueryを使用するプロジェクトも段々と少なくなってきているのです。

ただし、現在もjQueryを使用しているプロジェクトは依然として多いですし、また、jQueryを素のJavascriptに戻したり、或いは他のフレームワークに置き換える際に「jQueryで何を実現しているか」程度は把握しておく必要があります。

そのため、これからjQueryを勉強しようと思っている方は、「深く」学ぶのではなく、「広く浅く」学んでいくということを心がけておけばよいと思います。

最後に

さて、ここまで、jQueryの特徴やその導入方法、およびjQueryの現状について解説してきましたがいかがでしたか？

これまでWebサイトの発展を力強く支えてきてくれたjQueryですが、SPAなどの登場によって、その役割はどんどん小さくなっており、その傾向はこれからも続くことが見込まれます。

こうした新たな技術の台頭によって、それまでの功労者もこうやって淘汰されていくのだなーとしみじみしてしまいますね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。