jqueryは簡単だけど副作用も多い。Javascriptを覚えて負の連鎖から抜けだそう。

スポンサーリンク

20160206_1

今の仕事を始める前はjavascriptは一切書けなかった。そして職場にエンジニアとしての先輩が居なかったのもあって完全に一人で独学していかなければならなかった。それが間違えた道への始まりだったんだ・・

俺はJavascriptが書けないっ!!
正しく言うと少しは書けるけど殆どJquery。

Jqueryからぬけ出すのは容易ではない

独学で覚え始めた頃はJqueryが大人気だった。「Javascriptなんて書けねーよ」とハードルが高かったのか、逃げの一択で気づいたらJqueryばっかり勉強していた。自分に言うけど、本当にダメね。

JqueryってDOMの取得がめちゃくちゃ簡単なのね。例えば何らかのボタンがあったとして、

var $btn = $(".btn");

これだけ。うっわ簡単。でもネイティブだと

var btn =  document.querySelectorAll(".btn")//あるいは
var btn2 = document.getElementsByClassName("btn");

長げぇええ!!

querySelectorAllならばまだしも、getElementsByClassNameとか絶対打ち間違えるわ。getElementByClassNameとか書いた挙句、値が取得できずに2時間程悩んだ結果「Elementsのsが抜けてましたー」とかなる。

そんなこんなでJqueryは短く書けて便利だしCSSを知っていると何だか直感的に理解しやすかったりする。

人は楽な方に流れるもの。一度染み付くと抜け出すのが容易ではない。ついつい書いてしまう。また代入後にその値を使用する場合も書き方が違ったりする。例えばquerySelectorAllではオブジェクトが配列として取得される。

var list = document.querySelectorAll("li")

などとしてliが5つあるならばlist[i]として参照しなければならない。jqueryならばconsole.log(list)だとしても全部はき出してくれるけどね。このような差異により今まで通りに書けないのでどうも抜け出せなくなる。

それでもネイティブjavascriptで書きたい理由

それは幾つか理由はあるが、一番の理由はJqueryはJavascriptのライブラリであるからだ。

Jqueryしか覚えてないとバグが直せない

つまりさJavascriptあってのJqueryなのだ。JqueryはJavascriptから出来ているのでJavascriptが読めなければ最終的にJqueryも理解できない。そして理解が出来ないことはバグが出た場合に牙をむくのだ。
Jqueryから始めた人はJavascriptの言語仕様部分がスッポリと抜けたまま始める。別に言語仕様が解らなくたって、ちょっとググれば解決するのだ。でもその言語仕様絡みでバグを出したら当然直せない。

Jqueryはプラグインがめちゃくちゃ多い。Jqueryしか書けない人はプラグインに頼りがちになるだろう。
新しく職場に入ってきた子がMacとWindowsのline-heightの初期値の違いを直せなくて、わざわざプラグインを使って直していたのには驚いた。CSSでリセットしたら良いだけなのだけどな。それが解らなかったそうでプラグインを入たらしい。

そのプラグインはbody要素にWindowsだとwinとMacならmacとクラス名を付けるらしいのだけど、そんなもんプラグインでやるまでもない。javascriptさえ必要でないけど、UserAgentで取得できるな?!

話はそれてしまったけど、もしもプラグイン内でバグを出してしまったら、そのプラグインの中身修正できる?大抵は出来ない。プラグインを自作してしまう様な人はJavascriptも理解している。当然内部はネイティブなJavascriptのコードも多く混ざってる。モーダルウィンドウのプラグインであるファンシーボックスやライトボックスの中見読める?読めるわけがない。

そうなってくると、バグの修正以外にも拡張したい場合も出来ない。何も出来ないのだ。

処理速度も遅い

Jqueryは便利だが処理速度も遅い。先ほどのDOMの取得の例でも上げた通り、複数の方法があるが、どれも取得にかかる時間が違う。一番遅いのは言うまでもなくJqueryだ。具体的な速度は知らないが数倍違うといっても過言じゃない。もしかしたら数十倍違うかもしれない。

何度も何度もDOMを取得することだろうし、その積み重ねが徐々にパフォーマンスを悪くさせていく。「お前の作ったサイト遅いな」って言われたくないので、やっぱりJavascriptで最終的には全てまるっと済ませたい。

簡単な所から始めよう

Jqueryに汚染されている自分らは、いきなりネイティブなJavascriptコードに変われないのは解りきっている。だから少しずつ始めよう。例えば

var n = $("li");
n.each(function(index,element){
console.log(n.eq(index))
});/*タダの繰り返しに使いたいのなら*/

for(var i=0; i < n.length; i++){
console.log(n.eq(i))
}

eq()使ってるのは置いといてだ、繰り返し処理だっていちいちeach関数で処理しなくても良い訳で・・for文使ったら良いじゃないかですよ。こういう小さな所から始めていけばその内直るはずだ。

そんなこんなでJqueryの亡霊に取り付かれているが何とか抜け出したいと思っている次第だ。

by カエレバ

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法