お役立ちコンテンツ | フリーランスエンジニアの案件・求人なら【テクフリ】

jqueryの将来性は? 現役エンジニアが教えます

2021.03.24

フラン健史郎

Javascript

目次

    ここ一年で一番びっくりした質問が、あるプログラミング初学者から、ぶつけられた「JavaScriptとjQueryの違いって、なんですか?」です。

    自分の感覚だと、“プログラミング言語のJavaScript”と“ライブラリーのjQuery”は、“自転車”と“自転車のサドル”くらいの違いがあるため、そのような質問が出てくることを、まったく想定していませんでした。

    しかし、jQueryがあまりに流行しているため、JavaScriptとjQueryの違いが曖昧になっている初学者さんも多いのかもしれません。この両者の違いを理解していないまま、学習を進めるのは、大変、危険なことです。

    そこで、今回は、JavaScriptとjQueryの違いについて、見ていきたいと思います。

    JavaScriptとは

    まず、JavaScriptについて見ていきましょう。

    上でも触れましたが、JavaScriptはプログラミング言語です。人間が使う言葉にも、日本語、英語、ドイツ語、フランス語、中国語と様々な言語があるように、システム開発に使われるプログラミング言語にも様々な種類があります。その一つが、JavaScriptです。

    プログラミング言語である、JavaScriptの特徴は、JavaScriptが生まれた歴史的背景を知れば、理解できます。

    JavaScriptは1995年に登場したのですが、当時、多くのWebサイトがHTMLとCSSのみで構成されており、Webサーバーから一方的に送り付けられたデータが、Webブラウザ上に表示するだけでした。

    今のように、ECサイトで、買い物をしていて、「この商品をショッピングカードに入れる」ボタンを押すと、右上のショッピングカードマークのところに、商品が入ったことを知らせるアイコンが表示されるような仕組みを持っているサイトは、まずありませんでした。

    このような、Webブラウザを見ている人の操作に合わせて、Webブラウザ上の表示を変える仕組みを持つページのことを動的ページと言いますが、動的ページを作るために生み出されたのがJavaScriptなのです。

    JavaScriptの実装例として有名なのが、Googleマップです。

    ところで、Googleマップで「地図」を表示したあと、経路情報を検索して、そのルートを地図上に表示させる、という使い方を行う人も多いと思いますが、その過程でページの更新は起きないですよね? これ、実はすごいことで、本来、Webブラウザ上の表示を変える際は、サーバーとクライアント(Webブラウザ)は同期通信、つまりページの更新が必要です。

    なぜ、Googleマップではページの更新が起きないかというと、ページの更新が不要になる特別な技術が取り入れられているからです。その技術の名前をAjax(Asynchronous JavaScript + XML)と言い、JavaScriptの利用が前提になっています。

    このAjaxの技術が大変に注目を集め、JavaScript
    はWebコンテンツ開発で主要なプログラミング言語となりました。さらに、Webコンテンツ開発の技術を応用した、スマートフォン向けアプリ開発でもJavaScriptを利用することが多いです。

    また、JavaScriptを扱えるエンジニアが増えたことで、本来の得意領域である、Webコンテンツ開発以外のところでも、JavaScriptを使いたい、というニーズも生まれました。その結果、サーバーで動くJavaScript開発環境のNode.jsが登場しました。あるいは、JavaScriptで人工知能開発を行いたい人向けのライブラリーTensorFlow.jsも登場しています。

    もともとは、動的なWebコンテンツを作りためのプログラミング言語でしたが、利用シーンは多岐に渡るようになっています。

    JavaScriptの案件を見る >

    jQueryとは

    JavaScriptについて、理解できたところで、続いてjQueryについて見ていきましょう。

    jQueryはライブラリーです。ライブラリーというのは“あるプログラミング言語でシステム開発するのに、役立つプログラム(メソッド)を集めたツール”です。つまり、「JavaScriptというプログラミング言語で開発作業を進める際に用いられる便利ツールがjQueryというライブラリー」なのです。

    JavaScriptはプログラミング言語で、jQueryはライブラリーと、まったくの別物であることは、ご理解できたでしょうか?

    ではなぜ、JavaScriptとjQueryを混乱する方が多いかというと、jQueryには「write less, do more」というスローガンがあります。和訳すると、「書くのは少なく、できることは多く」といったくらいの意味でしょうか。

    このスローガンの通り、jQueryを使うと、jQueryを使わないで記述するより、はるかに少ないソースコードで同じか、それ以上のことができることもあります。そのため、JavaScriptプログラマー側も「jQueryを使って開発」するのと「jQueryを使わずに開発」するのでは、“別のプログラミング言語を扱っている”ように感じている方が、少なからず存在します。

    そして、“別のプログラミング言語を扱っている”ように捉えている方たちは、ついつい、jQueryを“一つのプログラミング言語”のように扱って、正確には「jQueryライブラリーを使って、JavaScriptで開発しましょう!」と表現するべきところを、「jQueryで開発しましょう!」と表現しがちです。

    ある程度、プログラミング経験のある方であれば、「jQueryで開発しましょう!」だけでも、“ああ、プログラミング言語としてはJavaScriptを使うのね”と分かるのですが、初学者の方が、そこまで思い至るのは難しいでしょう。結果、「JavaScriptとjQueryって、なにが違うの?」という疑問になってしまっていると感じます。

    jQueryの案件を見る >

    jQuery のメリットとデメリット

    さて、JavaScriptとjQueryの違いについて分かってきたところで、ライブラリーjQueryについて、今から学ぶ、メリット・デメリットをご紹介いたします。

    「jQueryで開発しましょう!」と書いただけで、“プログラミング言語はJavaScriptを使うのか” と、ある程度のプログラミング経験者であれば誰でも分かる、というのは、“ITエンジニアたちの間で、jQueryがどれだけ有名なJavaScriptライブラリーなのか”を証明している、とも言えます。

    jQueryにはJavaScriptを用いてWebコンテンツ開発するのに非常に便利なメソッドが収録されており、JavaScriptの標準ツールではないのですが、高い確率でJavaScript開発でjQueryが利用されてきました。

    日本はやはり保守的で、IT業界においても、既存の信頼性が高い技術から新しい技術への乗り換えを躊躇する傾向が強く、jQueryの利用率が高くなっています。

    デメリットとしては、メリットの書き方で気が付いた方もいらっしゃるかと思いますが、世界的にはjQueryの採用率が緩やかですが、確実に低下している、という点です。

    jQueryは2006年にリリースされて以来、ほぼ毎年、バージョンアップを重ねているのですが、最新のモダンなWebコンテンツ環境開発には時代遅れという評価を下す方も多く、新規開発時に、敢えて採用しないという状況がみられるようになってきました。

    世界的には2018年頃に、Facebookが作ったJavaScriptライブラリーである、React(React.jsまたはReactJSとも)に利用率1位の座を譲ったという資料もインターネット上で出回っており、今後も、じわじわとシェアを低下させていくと見られています。

    まとめ:プログラミング言語? ライブラリー? 正しく理解しよう!

    繰り返しになりますが、JavaScriptはプログラミング言語であり、jQueryはライブラリーとまったく別物です。関連性が深いので、分かりにくいかもしれませんが、それぞれの本質を、しっかりと理解しましょう。

    また、jQueryは利用率を減らし、他のライブラリーに注目度が高まっていることをお伝えしましたが、盛者必衰という言葉もある通り、また数年すれば、別のライブラリーが人気を集める、ということも十分に考えられます。

    これは、ライブラリーだけでなく、プログラミング言語にも言えることです。現在、様々な分野で使われているJavaScriptも、数年後には、他の言語にとって代わられている可能性は、あまり考えられないけれど、否定もできません。

    IT業界で戦い続けるには、技術動向にも興味・関心を持ってウォッチし、自分のスキルをブラシュアップしていく姿勢が重要です。

    今すぐシェアしよう!

    B!
    <span class="translation_missing" title="translation missing: ja.layouts.footer.icon_back_to_top">Icon Back To Top</span>
    TOP