脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

  • Posted on
  • Category : Tips
脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

jQueryはデザイナーなど普段はあまりコードを書かない人でも実装ができる手軽さ、各種ブラウザの互換性、様々なスニペット・プラグインが公開されているなどの理由で多くの方が利用していると思いますし、中には「JavaScriptを使う = jQueryを使う」という人も少なくないと思います。ただ、少し前からは古いIEのサポート終了やちょっとした動きならCSSで実現できるようになったことなどをきっかけに、jQueryは使わずにネイティブなJavaScriptで実装するという人も多くなっている印象で、実際にそういった脱jQueryしたい時に参考になるドキュメントやエントリーもいろいろと公開されているので備忘録も兼ねてまとめてみました。紹介しているもののほとんどが「jQueryのこれは、ネイティブではこう記述する」という形になっているので、特にjQueryはある程度使えるという人にはわかりやすいものが多いと思います。

You Might Not Need 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

You Don't Need jQuery

同じくjQuery使用時の記述がネイティブなJavaScriptだとそれぞれどのような記述になるのかを一覧化しているものです。
上のキャプチャから飛ぶリンクは英文となっていますが他の言語にも翻訳されており、日本語の場合は下記より確認できます。

そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集 | ゆっくりと…

そのコード、本当にjQueryが必要ですか?ネイティブ関数の代替Tips集 | ゆっくりと…

「SitePoint」で脱jQueryに関することについて書かれたエントリーを紹介したり補足したりしつつ、ネイティブを使用した代替Tipsをまとめたエントリーです。

jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編 | mae’s blog

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

DOMを使って、jQueryなしでいろいろやってみよう。コピペでどうぞ。(DOMおれおれAdvent Calendar 2015 – 24日目) | Ginpen.com

タイトル通り、jQuery使用時の記述がjQueryなしではどのようになるのかをまとめて紹介しています。

JavaScript without jQuery: Tips and practical examples

JavaScript without jQuery: Tips and practical examples

同じくjQuery使用時の記述がjQueryなしではどのように記述するかのTipsをまとめて紹介しています。

脱jQuery Tips Advent Calendar 2015 – Adventar

脱jQuery Tips Advent Calendar 2015 - Adventar

「q-Az」というブログが去年のAdvent Calendarで書いた脱jQuery Tips集です。
上で紹介してきたような1エントリー内で沢山の記述がズラッと並べられているとかではなく、1エントリー内で数種類(平均2~4程度)のメソッドを紹介していくという形なので、それぞれなぜそのような記述になるのかの説明やちょっとした注意点なども併せて紹介されていてわかりやすいと思います。

A Year Without jQuery | We Are Colony Blog

A Year Without jQuery | We Are Colony Blog

英文になりますが、脱jQueryについて書かれたエントリー。

A Guide to Vanilla Ajax Without jQuery

A Guide to Vanilla Ajax Without jQuery

こちらはjQueryなしでAjaxを実装するガイドエントリーです。

Vanilla List: The Vanilla Javascript Repository

Vanilla List: The Vanilla Javascript Repository

最後は以前「Vanilla JavaScriptのプラグインをまとめた「Vanilla List」」というエントリーでも紹介した、Vanilla JavaScriptで作成されたプラグインが多数まとめられているサイトです。
ちょっとした記述はネイティブにできてもプラグインが…という時など、ここで探してみると十分jQueryプラグインの代替となるなるものを見つけられるかもしれません。

以上、脱jQueryしたい時に参考になるドキュメントやエントリーまとめでした。
念のため補足しておくと、タイトルで脱jQueryと言ってるので人によってはjQueryはやめるべきなどの意味で捉えてしまう人もいるかもしれませんが決してそういうことではなく、むしろ個人的にはこういったものを見ると改めてjQueryって便利なんだなと感じます。
ただ、実際「わざわざjQuery使わないでも…」と思う機会が増えたり、レギュレーションなどでもできればjQueryは使わずにみたいなことも増えてきてはいるので、そういった時に上で紹介したドキュメントやエントリーは大変参考になりますし、冒頭にも書きましたが特にjQueryはある程度理解しているつもりという人がネイティブなJavaScriptで書けるようになりたいという時には理解しやすいと思います。

Back to Top

脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

脱jQueryしたい時に参考になるドキュメントやエントリーまとめ

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。