jQuery無しでも$(ドル記号)で要素選択したい

昨今のモダンブラウザに於けるJava Scriptの標準仕様(ECMAScript)への準拠の流れを受けて、わたしもChrome拡張(エクステンション)など実行環境を制限出来るウェブアプリの開発に於いてはjQueryに頼らないコーディングを心がけるようになりました。

ただ、いくらネイティブJavaScriptが高度化したとはいえ現状ではまだまだ発展途上な感が否めず要素を選択するだけでもソースが冗長になりがち。

// jQuery
$(".class");

// 非jQueryだと長ったらしい
document.querySelector(".class");

jQueryの開発チームもECMAScript標準化には関与しているそうなので、将来的に「$()」が「document.querySelector()」のエイリアスになるんじゃね?なんて思っていたら、既にChromeブラウザのdevToolsはそのような実装をしている模様。ちなみに、「$$()」は「document.querySelectorAll()」と同様の結果を返してきます。


自分のスクリプトでもこれと同様のことが出来るよう予め「$()」や「$$()」を定義しておけば毎度長ったらしいコードを書かずに済むよね?ということでサンプルを漁って見たものの…

window.$  = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);

これでは、documentが常にrootになってしまうためfind的な使い方が出来ずスマートではありません。devTools上の「$()」の実装も二番目の引数でstartNodeを指定可能なのでそれに準拠した形に改善。

window.$  = (selector, startNode = document) => startNode.querySelector(selector);
window.$$ = (selector, startNode = document) => startNode.querySelectorAll(selector);

この方が使い勝手も宜しいかと思います。さらに短くしたければ下記のような形でも良いかと。

window.$ =function(b,a){a=void 0===a?document:a;return a.querySelector(b)};
window.$$=function(b,a){a=void 0===a?document:a;return a.querySelectorAll(b)};

    この記事へのコメント

    メールアドレスが公開されることはありません。

    頂戴したコメントは管理者に承認されるまで表示されません。