jQueryってなんだっけ？

この記事はアンテクアドベントカレンダー2022の3日目の記事です。

https://adventar.org/calendars/7821

皆さんこんにちわ。サーバーサイドエンジニアのレイジー先生です。
最近はあんまりコード書く機会がなくなってきたのですが、たまには技術の話でもしようかと思います。

んで、jQueryなんですけど、最近はすっかりVue.jsとかAlpineJSとか違うのばっかり使っててさっぱり親しみがなくなってしまったのですが、昔はjQueryなしでjs書けないエンジニアだったので、jQueryに助けれもらい続けてた日々だったのですよ。

技術的に役立つのかどうかはわかりませんが思い出話でもしようと思います。

jQueryとの出会い

確か11年前ぐらいの某大手デジカメメーカーの画像共有サイトの制作を手伝っていた頃だった気がします。

その時はActionScript使って画像アップローダーのFLEXパーツを作っていたのですが、ビューアー部分が作りきれなくて浜松のつよつよエンジニアさんに引き継いでもらったのですが、サーバーからパーツに情報伝達するためのjsは別途用意しないといけないことになっていて、そこをjQueryで書いていました。どんなふうに書いていたのかは忘れましたが……

本格的に扱うようになったのはその次の某特許検索サービスのリニューアル案件でした。

AJAXがしたいんや

時は2012年、まだInternet ExplorerとFirefoxとGoogle Chromeが群雄割拠している時代です。

この頃はまだブラウザ間での使えるjsやcssの差異がえげつなくていわゆる「クロスブラウザ対応」がえげつないほど大変な時代でした。。。

そんな頃に燦然と振り降りてきたjsライブラリがPrototype.jsとjQueryです。

ただ、Prototype.jsは難しく、あっという間にjQueryが覇権を握っていきました。記法がかなり特殊なJSライブラリでしたが、意外と直感的に使えるところが人気を博したのです。

で、jQueryの強力な機能の一つがAJAX（Asynchronous JavaScript And XML）という非同期通信の機能です。

これ、今のjsなら fetch() という関数を使うだけでかなりかんたんに実装できますが、昔はゲロ吐くほど大変だったのです。

https://developer.mozilla.org/ja/docs/Web/API/fetch

Axiosという通信ライブラリもありますが、あいつはこないだ事故ってひどい目に遭ったので今後は使わないようにしたいと思います……

参考: https://zenn.dev/mn87/articles/a6784e2d3633b4

jQueryではこんな書き方で実現できていました。

$.ajax({
  url: 'hogehoge',
  type:'GET',
  dataType: 'jsonp',
  success: function (data) {
    $('#fugafuga').append(data);
  },
  error: function () {
    console.log('エラーが起きました');
  },
});

今では success は done に、 error は failになり、そもそも $.ajax が Promissを返すようになったのでもっといい書き方が出てきたのですが、当時はこれが革命的だったのですよ。ええ、successの中でコールバック地獄になると知らずに……

DOM操作もしたいんや

実はjQueryの最も強力な機能がDOM操作です。まあ、何かというと、特定のHTMLエレメントをcssの記法を使って拾ってきて、cssクラスを変更したり、スタイルを変えたりできたのです。それ以外にも色々できますが。

cssの記法で拾ってくるって、こういうやつですね。

<p>hogehoge</p>

<p class="fuga">fugafuga</p>

<script type="text/javascript">
// どっちのpタグにも適用する
$('p').css('color', 'red');

// fugaクラスのついてるpだけに適用する
$('p.fuga').css('color', 'blue');
</script>

$()の引数のところにCSSのセレクタを入れるわけですね。つまりCSSがわかればまあまあそれっぽくかけるようになるということです。しゅごい！

イベントリスニングしたいんや

ボタンをクリックしたらこんな動きさせたい！っていうのを書くのもjQueryならどんと来いだったのです。

昔々はこうでした。

<button id="click-button">おしてみそ</button>

<script>
var buttonElm = document.getElementById('click-button');

//IEでの書き方
buttonElm.attachEvent('click', function(e){alert('押された');});

//IE以外での書き方
buttonElm.addEventListener('click', function(e){alert('押された');});
</script>

それがjQueryを使ったらこうじゃ。

<button id="click-button">おしてみそ</button>

<script>
$('#click-button').bind('click', function(e){alert('押された');});

// こっちでもいい
$('#click-button').click(function(e){alert('押された');});

</script>

こりゃ簡単でいいですよね！ みんな飛びつくのもわかるでしょ？

まあ、時を経てAlpineJSで書いたらこんな感じなんですけどね。

<div x-data="{}">
  <button @click="alert('押された')">おしてみそ</button>
</div>

世の中どんどん便利になっていきますね。

まとめ

というわけで、jQueryの思い出を書きました。

次はAngularJSの思い出話を書くかもしれません。

• Twitter
• Facebook
• LINE
• はてブ