MD-Blog_Web Creative

どうも、フロントエンドエンジニアのスギヤマです。

早いもので入社してからちょうど１年が過ぎました。
１年経ってようやくヤマさんと生まれかつてない呼ばれ方にも慣れてきました。笑

さて、Windowsの下位OSも続々とサポートが終了して公式的にはIEも11〜となって、案件も対応がIE11〜というものが多くなってきた昨今。

元来JavaScript、CSSも、各ブラウザで差異が多かったレガシーブラウザと戦うために導入していたjQueryをそのまま使用していて良いものかと...。
jQueryはファイルサイズ自体が若干重いですしね...。

ということでココ最近は、

• 古い環境にも対応しなければならない！！
• このjQueryプラグインが使いたい！！

とかがなければjQueryは抜いて開発するようにしています。
そこで気づいたポイントなど書いていきたいと思います。

jQueryの便利な所

jQuery抜く前から分かっていたことですがjQueryで何が便利かって要素の選択ですね。
IDを１つ選択するのにjQueryだと、

$('#hoge');

で済みますが、jQueryなしだと

document.getElementById('hoge');

と長々と書かないといけません。

ほかイベントの add, remove もjQueryだとjQueryオブジェクトにまとめて on すればjQueryが良い感じにしてくれますが、ネイティブだと毎度毎度 forEach を回したりしないといけないです。

などなどありますが、その辺りはエディターのコード補完も効くのでそこまで気にならなかったです。

それよりもよく使う関数（個人的には addClass, removeClass など）が手軽に使えたら楽だなー。と思って、Google先生に聞いたら 先人の知恵を教えてくれました。最近は専らTypeScriptの環境になっていますが、環境用にいじったものをありがたく使わせて頂いています。

addClass ぐらいのコード量だったらそれくらい最初からテメーで書けよ...って気がしないでもないですが。笑
ここのコードはレガシーブラウザでも動くやつなので最新ブラウザ合わせで作り直しても良いかなーとは思ってますよ？

Webサイトでデファクトスタンダードな要素

ajax、アニメーションなどなどJavaScriptで様々な要素を実装しますが、中でも全サイトで入っているのではないかという要素があります。

そう、スムーススクロール！！

ボタン押すと該当箇所までスルスルっと移動したり、ページの先頭までもどるアイツです。
jQueryを使っていれば、

$('a[href^=#]').click(function(){
  var speed = 500;
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $("html, body").animate({scrollTop:position}, speed, "swing");
  return false;
});

これくらいのコード量で済みますがネイティブで書くとそうはいきません。

その他のアニメーションだったりはほぼCSSでclassの付け替えだけで済んでいたり、Canvasだったり、SVGだったり...etc。

他の代案がいくらでもあるのですが、これだけは困りもの...。

と思っていることは他でも思われているようで ライブラリが公開されていたり、その解説が公開されています。

こちらは requestAnimationFrame が使用されているので Polyfill を使用しないとIE10〜しか動かないかと思いますが、今となっては大きく問題はないでしょう。

ありがたいことにMITライセンスなので、こちらも自分の環境用に多少手を入れて組み込ませてもらっています。

まとめ

そんなこんながありますが、ajaxなどは毎回あるわけではないので現状特に不自由はしていません。
それこそajaxは専用のライブラリとかありますし。

むしろイベントの on/off とかJQueryに依存しているとそこまで深く考えなくても良かったことを、より思慮するようになったかなと思います。

まともにjQueryなしで書くのは、はじめてJavaScript書いたときに、勉強と思って敢えてjQuery使わなかったとき以来？かもしれないですが、ちゃんと？コード書いてるって気がして楽しいですね。

なければ無いで不自由することもあるかもしれないですが、「なければ自前で持ってしまえの精神」で、自分ライブラリを拡充していければなと思います。
とはいえjQueryは手軽で便利ですし、必要に応じて使っていければ良いかなと思います。