[JavaScript] 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になってしまうためjQueryで言うところのfind的な使い方が出来ずスマートではありません。

そこでdevToolsの実装に合わせて二番目の引数でstartNodeを指定可能とし、さらにアロー関数を使ってより短くシンプルに整理したものがこれ。

window.$  = (b, a = document) => a.querySelector(b);
window.$$ = (b, a = document) => a.querySelectorAll(b);

こちらの方が使い勝手も宜しいかと思います。