coding, photo, plant and demo

*脱jQueryのススメ

btz tech photo 20130722 002947
jQueryというのは大変便利なライブラリです。
どう便利かというと、
  • ブラウザ間の互換をあまり気にせず書ける
  • 膨大なjQueryを使ったライブラリが使える
  • 簡潔な表現でDOM等の操作ができる
の3点ではないかと思います。

しかしながら、俗にいうHTML5の影響かブラウザ実装や文化の成熟の結果、
  • ブラウザ間の互換性が改善されてきた *0
  • リッチな表現がライブラリに頼らずCSSだけで出来るようになってきた
  • セレクタなどがIEでも当たり前に使える *1
ということから、レガシーなブラウザを切り捨てればもうjQueryが無くても大丈夫なんじゃない?と最近思うようになりました。

ただ、jQueryを捨てると良いことは細かい事を挙げても、
  • ダウンロード量が減る(minified+gzipで約32KB)
  • jQueryのパース、コンパイル時間が減る
  • JavaScriptヒープの消費量が減る
  • jQueryを介さない分実行速度が上がる
くらいのもので、実質的にユーザーメリットがあるのはページロードの速度が少し上がるくらいです。しかもボトルネックとなるダウンロード時間もCDN版を使えば高確率でキャッシュにヒットするでしょうから、実はそんな意味はなさそうです。

そこで敢えてススメ、と書いたのは、たまには生のDOMとか触ろうよ、ってことです。いきなりjQueryから始めていて基礎的な事が分かっていない人ってたまにいますので。いやいや、C書く前にアセンブラで書けるようになれよ、みたいなロートル的志向を僕は持ってるんで、jQueryもせめてjQueryなしで書ける状態でjQueryを使おうよ、とか思うんですよね。

ということで、あんまり意味ないんだけど、まずは自分でやってみないとわかんないよね、ってことでここのブログを脱jQueryしてみました。こうなると、結局lightbox的なものを作ったりしないといけないわけで、結構それが面倒くさかったし、意外と自分も分かっていないことが多かったってのもあるけど、総じて昔の自分の作ったコードの技術的負債がデカ過ぎて、なんつーか脱jQuery以前にちゃんとコード書かないとアカンだろ(赤面)、という凄く当たり前の結論を体感したのでした。合掌。


クリックすると拡大する自作lightboxもどき。やっぱまだ微妙に最近のブラウザ間でも挙動が違うので御座いました…
*0 : モバイル系は未だ主にandroidのせいでカオスすぎる状態で酷いけど、もうこれはjQueryでどうにかなるレベルじゃないんで
*1 : querySelectorもIE8からは普通に使える。ただjQueryの表現の簡潔さ、設計の美しさは結局捨てがたいんだけどねえ