jQueryを使用しなくても$(ドル記号)は使えるようにしたほうが良い

$は使えるようにする

最近は古いブラウザでもIE11を推奨環境にしてIE9は対象に含めないことが多いためjQueryを使用しないケースが増えてきている。

しかしjQueryを使用しないとid, class, タグなどの要素を$('#foo')のように簡潔に記述できなくなってしまうため、あらかじめjQueryの$のような使い方ができるよう関数を作成しておいたほうが便利だ。

$関数の作成方法

関数の引数の1文字目を取得して、1文字目が「#」の場合はdocument.getElementByIdを使用して、それ以外のclassやタグはdocument.querySelectorを使用するようにする。

処理速度を考慮するならgetElementsByClassNameを使用するなど細かく条件を分けたほうが良いが、通常のWebサイトであれば体感できるような差は発生しない。

const $ = function(e) {
  const c = e[0];
  const len = e.split(' ').length;
  if (c === '#' && len === 1) {
    return document.getElementById(e.slice(1));
  } else {
    return document.querySelector(e);
  }
}

上記の記述があれば下記のように$('#foo')や$('.bar')を使用することができる。

$('#foo').textContent = 'Hello';
// <h1 id="foo">Hello</h1>


$('.bar').textContent = 'world!';
// <h2 class="bar">world!</h2>

ただし、jQueryでは$('.bar')のように指定した場合、すべてのclassが対象になるが、querySelectorは最初の要素しか対象にならない。

そのためquerySelectorAllを使用した$$変数を別途作成する必要がある。

const $$ = function(e) {
  return document.querySelectorAll(e);
};

$$('.bar').forEach(function(x) {
  x.textContent = 'world!'
});
// <h2 class="bar">world!</h2>
// <h2 class="bar">world!</h2>      

$と$$を使用して要素を指定したサンプル