jQueryはデザイナーなど普段はあまりコードを書かない人でも実装ができる手軽さ、各種ブラウザの互換性、様々なスニペット・プラグインが公開されているなどの理由で多くの方が利用していると思いますし、中には「JavaScriptを使う = jQueryを使う」という人も少なくないと思います。ただ、少し前からは古いIEのサポート終了やちょっとした動きならCSSで実現できるようになったことなどをきっかけに、jQueryは使わずにネイティブなJavaScriptで実装するという人も多くなっている印象で、実際にそういった脱jQueryしたい時に参考になるドキュメントやエントリーもいろいろと公開されているので備忘録も兼ねてまとめてみました。紹介しているもののほとんどが「jQueryのこれは、ネイティブではこう記述する」という形になっているので、特にjQueryはある程度使えるという人にはわかりやすいものが多いと思います。
You Might Not Need jQuery
jQueryで$(el).html();
と書くのはネイティブだとel.innerHTML
、jQueryで$(el).on(eventName, eventHandler);
と書くのはネイティブだとel.addEventListener(eventName, eventHandler);
といったように、jQuery使用時の記述がネイティブなJavaScriptだとそれぞれどのような記述になるのかをズラッと一覧化しているものです。
ページ上部ではメソッドで検索したり、IEのサポートバージョンをスライダーで切り替えたりすることができるようになっています。
You Don’t Need jQuery
同じくjQuery使用時の記述がネイティブなJavaScriptだとそれぞれどのような記述になるのかを一覧化しているものです。
上のキャプチャから飛ぶリンクは英文となっていますが他の言語にも翻訳されており、日本語の場合は下記より確認できます。
そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集 | ゆっくりと…
「SitePoint」で脱jQueryに関することについて書かれたエントリーを紹介したり補足したりしつつ、ネイティブを使用した代替Tipsをまとめたエントリーです。
jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編 | mae’s blog
ajax
,on/off
,css
など、jQueryでよく実装されるような処理で且つこの記事公開時点で先ほど紹介した「You Don’t Need jQuery」ではまだ紹介されていなかったものを幾つか紹介しています。
DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。(DOMおれおれAdvent Calendar 2015 – 24日目) | Ginpen.com
タイトル通り、jQuery使用時の記述がjQueryなしではどのようになるのかをまとめて紹介しています。
JavaScript without jQuery: Tips and practical examples
同じくjQuery使用時の記述がjQueryなしではどのように記述するかのTipsをまとめて紹介しています。
脱jQuery Tips Advent Calendar 2015 – Adventar
「q-Az」というブログが去年のAdvent Calendarで書いた脱jQuery Tips集です。
上で紹介してきたような1エントリー内で沢山の記述がズラッと並べられているとかではなく、1エントリー内で数種類(平均2~4程度)のメソッドを紹介していくという形なので、それぞれなぜそのような記述になるのかの説明やちょっとした注意点なども併せて紹介されていてわかりやすいと思います。
A Year Without jQuery | We Are Colony Blog
英文になりますが、脱jQueryについて書かれたエントリー。
A Guide to Vanilla Ajax Without jQuery
こちらはjQueryなしでAjaxを実装するガイドエントリーです。
Vanilla List: The Vanilla Javascript Repository
最後は以前「Vanilla JavaScriptのプラグインをまとめた「Vanilla List」」というエントリーでも紹介した、Vanilla JavaScriptで作成されたプラグインが多数まとめられているサイトです。
ちょっとした記述はネイティブにできてもプラグインが…という時など、ここで探してみると十分jQueryプラグインの代替となるなるものを見つけられるかもしれません。
以上、脱jQueryしたい時に参考になるドキュメントやエントリーまとめでした。
念のため補足しておくと、タイトルで脱jQueryと言ってるので人によってはjQueryはやめるべきなどの意味で捉えてしまう人もいるかもしれませんが決してそういうことではなく、むしろ個人的にはこういったものを見ると改めてjQueryって便利なんだなと感じます。
ただ、実際「わざわざjQuery使わないでも…」と思う機会が増えたり、レギュレーションなどでもできればjQueryは使わずにみたいなことも増えてきてはいるので、そういった時に上で紹介したドキュメントやエントリーは大変参考になりますし、冒頭にも書きましたが特にjQueryはある程度理解しているつもりという人がネイティブなJavaScriptで書けるようになりたいという時には理解しやすいと思います。