脱jQuery～JavaScriptに支配されないための真の思考法～

少し前に話題になった「脱○畜サ○ン」を文字って、「脱jQuery～JavaScriptに支配されないための真の思考法～」というタイトルで、元々jQueryで書いていたコードをあえて使わずに普通のJavaScript(別名VanillaJS)の場合をリスト形式で紹介する。

そもそも何故脱jQueryなのか？

それを考えるには、逆にjQueryを使っていた理由を考えてみる。

かなりの主観と推測が入り混じっているが書いていきたい。

jQueryが登場したのは2006年と言われている。

その当時、Internet Explorer 6がものすごい勢いでシェアを占めており、その横で、Firefox、Safari、Internet Explorer 7、Operaと色々なブラウザが存在していた。

特に、IE6、IE7、FirefoxにJavaScriptを対応させようとすると、書き方が違うため、実装と検証に、ものすごく工数がかかるのである。

そこで同じ処理でいっぺんに動くように開発されたのが、prototype.jsだったりjQueryだったりするわけだが、2019年となった今では、ほぼ全てのブラウザ(IE11をのぞく)が同一の関数やメソッドを実装しているため、jQueryを使わなくても、一つのコードで、すべてのブラウザをカバーできてしまうのである。

したがって、原点回帰ではないが、脱jQueryというわけである。

いっぺんにすべてのメソッドを書くと手が腱鞘炎になりそうなので、徐々に追加していく予定だ。

jQueryからネイティブJavaScriptの変換一覧リスト

• Selector
• readyメソッド
• findメソッド
• clickメソッド
• resizeメソッド
• scrollメソッド
• parentメソッド
• appendメソッド
• attrメソッド
• addClassメソッド
• removeClassメソッド
• emptyメソッド
• removeメソッド
• beforeメソッド

更新履歴

• 2019年4月22日 Selectorを追加
• 2019年4月23日 findメソッドを追加
• 2019年4月24日 clickメソッドを追加
• 2019年4月25日 readyメソッドを追加
• 2019年4月26日 resizeメソッドを追加
• 2019年5月7日 scrollメソッドを追加
• 2019年5月8日 parentメソッドを追加
• 2019年5月9日 appendメソッドを追加
• 2019年5月10日 attrメソッドを追加
• 2019年5月16日 addClassメソッドを追加
• 2019年5月17日 removeClassメソッドを追加
• 2019年5月22日 emptyメソッドを追加
• 2019年5月23日 removeメソッドを追加
• 2019年5月24日 beforeメソッドを追加