jQuery見直した。jQueryはいいぞ〜

世間一般はSinglePage

そんなことはわかっている。 世の中は、AngularとかTypeScriptとかWeb開発技術は10年前とは大きく変わっていることはもちろん、そんな技術を使って開発したいと常々思っている。

でもね。世の中にはまだあるんですよ。 MS社と法人契約でIE9を延命サポートしてもらってまで維持しないといけないシステムや、予算の関係で過去の遺産やノウハウを使い回しでやりくりしないといけないプロジェクトが。 いまどきStruts1とか使っちゃったりして。死ねばいいのに。

ただ、そんな10年前の技術バリバリで開発するプロジェクトではjQueryって本当に重宝する。

前の更新から1年以上経ってしまったが、久しぶりに記事にしたいと思ったくらいに。

jQueryが嫌われ始めた理由

個人的には以下じゃないかと思う。

  • ブラウザが進歩して標準サポートする機能が多くなった
    • 昔はjQueryで機能を補ってた
  • ブラウザごとの機能差異がなくなってきた(統一されてきた)
    • 今まではjQueryが差異を吸収してくれてた
  • JavaScriptという言語自体(ECMAScript)が成長した
    • MVCの概念を実現しやすくなり、MVCフレームワークが注目を浴び始めた
    • クラスやモジュールの概念が強くなってグローバル領域に作られるjQuery($)が嫌われる理由になってしまった

でも、これって新しいブラウザで動くシステムを作るならってことだよね。

jQueryの強み

ひとことで言うと 昔のやり方で開発するなら超便利ってこと。

昔はJavaScriptオブジェクト指向MVCな設計をしようとすると、かなりトリッキーな方法で実装しないといけないのが普通だった。 だからこそjQueryが重宝して、jQueryがあれば古いブラウザでも簡単に実装できた。

あと、jQueryが得意とするDOM操作だけど、近年これが嫌われる原因ってSinglePageだからだよね。 Struts1使ったサーバレンダリング方式なら、ページ遷移で毎回メモリ解放されるから、それがjQueryの嫌われる原因を軽減してくれる。

たとえば、ページ遷移すればDOMに登録したイベントも消えるし、「イベント管理地獄」にも陥りにくい。 そのページで完結するJSロジックだけを考えることに集中できるから、グローバル変数も管理できる範囲に収まる。

そもそも、サーバレンダリング方式だとサーバに主なロジックがあるからJavaScriptのロジックが少なくて、保守するJSコード自体が少なくなる。 また、Struts1だとJSPのカスタムタグを利用するのが普通だからJSでDOM操作は必須になる。

今の状況はまさにこれ。

.data()

最近知ったjQueryの便利機能。 いや、厳密に言えば、HTML5のカスタム属性の操作に使うやつだと思い込んでたんだけど、 これを知っているかどうかで、設計が大きく変わると思う。

https://api.jquery.com/data/

<div id="aaa"></div>
$("#aaa").data("controller", new MyDivController());
var myController = $("#aaa").data("controller");

こんな感じで任意のオブジェクトもjQueryオブジェクトに登録できる。 <table>みたいに構造を持ったDOMにある処理を実行したい時、外部から規定のイベントに頼らず処理を呼び出せるようになるよね。

$.ajax()

言わずとしれた非同期通信API。 Struts1だとJSONを受け取ってくれないので(受け取ってくれてもBeanに展開してくれないので)、application/jsonをPOSTすることはないけど。

何気に優秀なのは受信時のデータ。 JSONだったらもちろん、xmlでも解析してくれるんだよね。

.serialize()

Struts1時代はJSONなんて考慮してないから<form>でsubmitするのが基本で、JSONをPOSTすることはない。 だけど非同期通信を完璧になくすのは困難な場合、これさえ使えば <form>タグ内のinputデータをシリアライズしてくれる。

でもdisabled<input>タグはシリアライズ対象外になってしまうことには注意しないとね。

jQuery UI

jQueryの超有名なライブラリ。 これがあるからダイアログもカレンダーも簡単に実装できる。 showModalDoalog()とか開発者ツールが開かない画面をいつまで使うつもりですか?