現在JavaScriptでWebアプリなどを作成するとき、何かしらのJavaScriptライブラリを利用することが一般的です。

ライブラリを利用することで冗長なコードを簡潔に書くことができたり、Webアプリで必須のAjaxやイベントドリブンといった難しい概念を簡単に使うことができたりと、もはやJavaScript開発には欠かせない存在となっています。

このような便利なJavaScriptライブラリですが、その源流をたどっていくとjQueryという有名なライブラリに行き着きます。

JavaScriptライブラリの草分け的存在であり今でも使われ続けるjQueryについて、紹介とこれから学び始めることについて解説していきます。

jQueryとは

jQueryとは、最も知られたJavaScriptライブラリの一つです。

jQueryがリリースされたのは2006年で、当時はJavaScriptのライブラリという概念がなく、JavaScriptをそのまま書くのが通常のことでした。

JavaScriptのバージョンが古かったり、主なWebブラウザの対応具合がまちまちだったこともあり、当時のJavaScript開発は冗長で煩雑なコードとの戦いだったのです。

そんな中、彗星のごとく現れたのがjQueryです。

定型的な長いコードを簡潔に書けるjQueryは驚きと喜びを持って受け入れられ、瞬く間にJavaScript開発におけるデファクトスタンダードとなりました。

直感的な設計とコード記述量の少なさから、様々な先進的ライブラリが乱立する今でも愛用する人は少なくありません。

そんなjQueryの作者はアメリカ人のジョン・レシグで、jQuery開発後も様々なライブラリやソフトウェアを開発したり、Mozilla Corporationなどのオープンソースコミュニティに貢献しています。

ジョン・レシグはJavaScriptに関する技術書も執筆しており、和訳もされていて日本で特に有名なのは「JavaScript Ninjaの極意」です。

JavaScriptのパフォーマンスTipsが惜しげもなく披露されている当初は、日本でも国外でも高い評価を得ています。

jQueryの長所・特徴

では、次にこのjQueryの長所や特徴を見ていきましょう。

DOM操作が簡単にできる

jQueryの特徴といえば、なんといってもDOM操作が簡単に行えるということです。

JavaScriptが単なるページ上の賑やかしのための小道具から、今でいうWebアプリのような用途で使われるようになり、HTML上の要素をJavaScript側から取得するためのDOM操作が重要視されるようになりました。

しかし、ピュアなJavaScriptではDOMを取得するたびに

document.getElementById(‘nodeId’)

などとする必要があり、要素が一意に定まらないクラス指定やセレクタ指定ではさらに複雑なコードが必要とされました。

例えば、クラスは1ページ内に複数個存在します。

この時、指定のクラスの全てに同じ処理をするためにループ処理を書く・・・などです。

しかしjQueryでは

$(‘#nodeId’)

だけでよく、クラスやCSSセレクタも直接指定できるため、非常に簡潔かつわかりやすいコードを書くことが可能になりました。

$記号から始まる命令群は当時のモダンなJavaScriptコードの象徴となり、まさに新たな時代の幕開けとなったといえます。

学習コストが低い

学習コストが低い点もjQueryの大きな特徴の一つです。

jQueryは当時のJavaScript開発において非常に革命的な存在でしたが、その一方で、手探りしながらなんとなく使えるというわかりやすさも併せ持っていました。

上で述べましたが、DOM操作におけるノードの指定はCSSセレクタの表記がそのまま使えます。

jQueryの構文はピュアJavaScriptやCSSを踏襲したものが多いため、jQuery特有のお作法を覚える必要量は少なく、基本的なルールを覚えれば後はガンガンコードを書き進めることができるのです。

プラグインやコード資産が大量にある

jQueryは歴史が長いため、ネットに集積された情報量が多いというメリットも見逃せません。

情報というか、ある機能を実現するためのjQueryを用いたコード片がたくさん存在しますので、善し悪しはさておきコピペだけでプロダクトができてしまうほどです。

また、jQueryにはプラグイン機構が存在します。

jQueryにプラグインを導入すると、jQueryコアだけでは実装が困難な機能を簡単に実装できるようになりますが、このプラグインの数も非常に豊富です。

jQueryそのものよりも、便利なjQueryプラグインが手放せないためにjQueryから離れられないという人もいるほどです。

jQueryの短所

多くのサイトで利用されるjQueryですが、一方で短所もあります。

現在では設計が古い

jQueryは今見ても優れたライブラリではありますが、さすがに設計の古さが問題となることが多くなりました。

わかりやすさで多くのユーザーを引きつけたjQueryのDOM操作ですが、内部的に計算コストの効率的な設計にはなっておらず、速度面では他の新しいライブラリに差を付けられています。

最近は本格的なWebアプリも作られるようになり、データベースと連携して大量のDOMを操作するようなシーンもでてきました。

そのようなとき、他のライブラリでは難なく処理できても、jQueryではフリーズしてしまうようなこともあります。

また、速度面だけでなく開発において想定されているモデルも古く、今のライブラリに慣れているエンジニアにとってはストレスがたまることが多いかもしれません。

コードが複雑になりがち

現在のライブラリは様々な工夫を持って、コードの再利用性やメンテナンス性を高めて開発をサポートしています。

モジュール等のブロックに分けて呼び出すような形を取ることで、コードがごちゃごちゃしないようにしています。

しかしながらjQueryは開発時期を鑑みると仕方ないのですが、あくまでJavaScriptの冗長さをショートカットできるような役割として作られているため、現代的なモジュール機構などの仕組みを備えていません。

そのため、素のJavaScriptと同じく手続き式的なコードになりがちで、非常にごちゃごちゃしがちです。

jQueryの学習コストが低いことも相まって、各々が好き勝手にコードをかけるという点もチーム開発ではデメリットになりがちで、コードの秩序を保つにはルールでガチガチに縛る必要が生じます。

こうなると、jQueryのメリットがまるで活きず、何のために採用しているのかわからなくなってしまいます。

プラグインの諸問題

jQueryの豊富なプラグインは特徴の一つですが、それにまつわる問題もいくつかあります。

まずは、プラグイン間の依存問題です。

jQueryの有名プラグインは便利なものが多いため、そのような便利プラグインに依存したプラグインも多くなります。

実際のところ、jQueryの多くのプラグインは複数の依存プラグインを持っていることが多いです。

そうすると、あるプラグインを使いたいだけなのに、依存プラグインや依存プラグインの依存プラグイン……といった形で芋づる式にプラグインを導入する羽目になりがちです。

また、jQueryが使われなくなっていくにつれて、整備されなくなっていくプラグインも増えています。

多くのプラグインから依存されているプラグインがメンテナンスされなくなってしまうと大問題で、セキュリティリスクを抱えたり最新バージョンのjQueryで動かなくなってしまうことで、依存元のプラグインまで動かなくなってしまいます。

このように、jQueryの大きな特徴であるプラグインは、時がたって問題の温床ともなっているのです。

今からjQueryを学ぶのはあり？

このように新しいライブラリと比べて問題を抱えるjQueryですが、今から学ぶのはどうでしょうか？

まず始めに、jQueryの案件は現在でもかなりの量存在します。

jQueryを用いて作られたWebサイト・アプリは膨大な量に上りますので、これらのメンテナンスや改修などの仕事が全くなくなるのはずっとずっと先のことでしょう。

また、新規案件でもjQueryを用いるものがまだ見られます。

このように、需要面から見るとjQueryを学び始める価値はまだまだあるといえます。

また、学習コストが低いため、簡単なプロダクトをさっと作るには今でも非常に適したライブラリです。

jQueryのデメリットは保守性などの問題が多いため、書き捨てるにはそれらのデメリットをほとんど度外視することができます。

また、現代的なライブラリはやや抽象的な概念を理解する必要があったり、導入時にトランスパイラ等のツールを導入する必要があったりと、素のJavaScriptしか知らないとハードルが高い面も否定できません。

そう考えると、小回りのきくツールとして学ぶ価値もまだまだあるでしょう。

迷っている間に覚えよう！

jQueryには需要も必要性もまだあることは間違いありません。

ですので、ここで提言したいのは、jQueryは学習コストが低いことが大きな特徴ですから、もしjQueryを学ぼうか迷っているならば、迷っている間に学習してしまった方がいいということです。

現代的な開発とは異なるとしても、jQueryを用いたWebアプリ等の開発の経験は、現代的なライブラリを用いるときにも役立つでしょう。

エンジニア歴の長いフロントエンドエンジニアはほぼjQueryを学んでいます。

今からjQueryを学び、ベテランの足跡をたどってみるのも意義深いはずです。

JavaScriptのシステム開発ならAMELAに

今回は、JavaScriptにおける最も有名なライブラリである、jQueryについて見てきました。

最近は、JavaScriptでサーバーサイド処理を書くなど、用途が広がってきて、昔のような

「ちょっとサイトに動きを付けるための言語」

ではなくなってきました。

実際、私の知り合いは、JavaScriptでサーバーサイド処理を書くNode.jsにて
「複数のシステムのデータ連携をするための業務用システム」
をJavaScriptで作っていました。

AMELAは、業務用システムを始め様々なシステム開発を得意としています。

特にJavaScriptでの開発実績は非常に多いため、開発を検討中であれば、是非ご相談いただければと思います。