スナック「jQuery」

　……あら、いらっしゃい。
　若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。
　何飲む？　……水割り？　わかったわ。
　じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。

## What is jQuery?

　この店――『[jQuery](https://jquery.com/)』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？　……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。

　その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。
　他のブラウザは、[Safari](https://www.apple.com/jp/safari/)がバージョン3がMacとWindowsに公開されていた頃で、[Firefox](https://www.mozilla.org/ja/firefox/)はまだバージョン2.0。[Google Chrome](https://www.google.com/intl/ja_jp/chrome/)は生まれてさえなかったのよね。

　でね、それぞれのブラウザで、JavaScriptの仕様の解釈がけっこうバラバラだったんだよね。こっちのブラウザで動くコードが、あっちのブラウザじゃ動かない。今でも100%の互換性ってわけじゃないけど、当時はもう、今と比べ物にならないくらいヒドかったのよ？
　そんな時に颯爽とオープンしたのが、この『jQuery』だったんだよねえ。

　それぞれのブラウザの仕様の違いを吸収してさ、ひとつのコードでどのブラウザでも動くようにしたんだよね。これ、画期的なことだったんだよ。キャッチコピーも『write less, do more』だしね。このおかげで、ブラウザ毎に違うコードを書く……という非効率的な作業から開放されたわけ。

## DOM Traversal and Manipulation

　あとね、当時のJavaScriptライブラリ――あ、ウチらみたいな業種のことね。……で、その考え方って、初めにHTMLありき、DOMありきなんだよね。わかる？　別に用意したHTMLに対し、後から内容を操作するっていう。古き良き時代の『ホームページ』って、そんな感じだったじゃない？　なんだか懐かしいわ。
　……ただね、こういう手法だと、速度面とか開発のし難さとか、弱点もけっこうあったんだよね。そのあたりが、後発のお店に影響を与えていくんだけどさ。

## Ajax

　あ、あと、『Ajax』って聞いたことある？　『非同期通信』なんて呼ばれ方もするけど。WebサービスやWebアプリを開発する上で、もはや常識の技術よね。
　この店がオープンした頃が、まさにAjaxが世に出始めた頃でね。いや、そういう技術自体はもっと昔からあったんだけど。ページ遷移無しにコンテンツを書き換えるような技術。でもね、そういう技術が『Ajax』と呼ばれるようになって、よりインタラクティブなWebページがもてはやされるようになってきた頃。
　その発展にも一役買ったんだよね。さっきも言ったように、ブラウザ毎にコードの書き方が違うから、実装にも一苦労だったんだけど。それが簡単にできるようになって、Ajaxを実装するならjQuery、みたいな空気になったんだよね。

## Promise (Deferred)

　それからさ、非同期処理を管理する『Promise』ってあるじゃない？　もちろん知ってるわよね？　ウチはさ、バージョン1.5から『Deferred』って機能を追加したんだけど、これがまさにPromiseなんだよね。
　さっきのAjaxもそうだけど、非同期での処理がWebの主流になってきたの。だけど、非同期って言う事は、処理の順番が担保されないって事なのよね。

　……あれ、ピンときてない？　じゃ、カンタンに説明するわね。
『水割りを飲む』には、『水割りを注文する』ていう処理が終わるのを待たなきゃいけない。同時に実行したり、注文より先に飲むわけにもいかないよね？
　こんな時は、最初の処理が終わってから、その結果を元に次の処理を実行する……っていう風に実装しないといけない。その仕組みが、いわゆるPromiseチェーンね。直列処理なんて言う人もいるわね。
　一方、『水割りを注文する』のと『カラオケで歌う』ってのは、順番を気にしなくてもいいし、同時に処理できるじゃない？　水割りを作るのに、あなたが歌い終わるのを待つ必要はない。これが並列処理。わかった？
　こういう、直列や並列の処理が複雑に組み合わさったコード、Promiseを使わずに書くのはとっても大変だったんだよね。Promiseのおかげでスッキリ書けるようになった。

## Bootstrap

　あとは、[Bootstrap](https://getbootstrap.com/)さんトコと提携したのも大きかったよね。当然知ってるわよね？　Bootstrapさんって、2011年にオープンしたWebアプリケーションフレームワークなんだけど。それに正式に採用されたんだよね。Bootstrapさんトコが大きくなっていくのと一緒に、ウチの店も大きくなっていったの。

## JavaScript framework

　……でも、この頃までがピークだったかな。
　今、この街で、一番人気の店って知ってる？　……そうそう。[React](https://ja.reactjs.org/)さんとか[Angular](https://angular.io/)さんとか、あと[Vue.js](https://jp.vuejs.org/index.html)さんとかね。2012年くらいから次々とオープンしたんだけど、今やウチよりも大人気で、お客さんはほとんどそっちに流れちゃったんだけどね。

　そもそも、そのあたりのお店とウチとでは、営業方針が違うんだよね。
　一番の違いは、ほぼすべてをJavaScriptで書いちゃうってところ。それぞれのルールでコードを書いてさ、最後にひとつのWebコンテンツとしてコンパイルするっていうやり方。実行速度とか、開発のしやすさとか、ウチの弱点が見事に解決されてるんだよねえ。今は完全にそっちの方が主流になっちゃってね。ま、それも時代の流れよね。

----

　そんなわけで、今はご覧のような状態よ。Bootstrapさんも、次のバージョンでウチとの提携を打ち切っちゃうし。jQueryはもう古いとかオワコンだとか、そんな風に言われてるのも知ってるけどさ。
　でも、あたしはそれでいいと思ってるんだよね。あたしの出番が無くなったっていう事は、めでたいことじゃない。それだけJavaScriptもブラウザも、それから開発手法も進化したって事なんだから。あたしがいなくても、先進的なコードがどのブラウザでも動くようになった、って事なんだから。
　それでも、競争の激しいこの街で、こんなに長いこと愛されてきたのは、間違いないんだから。それは、誇りに思うわよ。

　……なんか愚痴っぽくなっちゃったね。長い話に付き合わせてゴメンね。どう、もう一杯飲む？　あ、もう帰る？　わかった、じゃ、お会計ね。30ドルになります。
　……え？　なんで円じゃなくてドルなんだ、って？　そりゃ、jQueryは`$`がないと始まらないからね。