without wasted jQuery な生活を夢見るブログ

こんにちは。
開発チームのワイルド担当、まんだいです。

JavaScriptで開発をしていると、ついついjQueryをササッとインストールして事を済ませてしまう局面は多いかも知れません。
でも、本当に必要としている機能って、1つや2つだけと言った場合はないでしょうか？

jQueryは使い勝手のいいライブラリですし、今後も使うとは思いますが、全面的に使うと決めた時以外は他の選択肢があってもいいと思います。

今回は、あの機能だけ欲しいの「あの機能」を紹介したいと思います。

お品書き

 

初稿

• $.ready() が欲しい
• $('div#hogehoge > .fuga') でオブジェクトをガサッと取ってきたい
• $('hoge').on() が欲しい
• datepicker() が欲しい
• $('hoge').addClass() が欲しい

 

$.ready() が欲しい

jQuery最大の発明はこれじゃないかと思うんですが、Promiseを使えば、自分で実装する事も可能です。
window.onloadで問題なければ、それでもいいかも知れません。
が、ここは一つ、ready()だけを提供するスモールモジュールを使ってササッと済ませてしまいましょう。

• domready
• document-ready
• doc-ready

幾つか候補はありますが、この辺りではないでしょうか。
どれも概ね期待通りの動きをしますが、ブラウザ（主にIE）対応に若干の違いがありますので、各々サイトでご確認くださいませ。

 

$('div#hogehoge > .fuga') でオブジェクトをガサッと取ってきたい

これはブラウザ標準のもので大丈夫ですね。

• ID指定したい場合は、getElementById()
• 単発のクラス指定をする場合は、getElementsByClassName()
• 込み入った指定がしたい場合は、document.querySelector()、document.querySelectorAll()

これで問題なしです。

document.querySelector()は非常に強力で、CSSセレクタなら何でもOKですから、IDセレクタでの検索も可能ですが、getElementById()には速度面で劣ります。

ただ、getElementById()以外のメソッドは、実装時期もバラバラで未対応のブラウザもあります。
広い範囲のブラウザをカバーする必要がある場合は、jQueryを使う選択はアリだと思います。

Can I Useで確認

 

$('hoge').on() が欲しい

これもブラウザ標準のaddEventListener()メソッドで対応できます。

var hoge_obj = document.getElementById('hoge');

// お手軽版
hoge_obj.addEventListener('', (e)=>{
    // 何らかの処理
});

// removeEventListener()で削除管理できる版
var hoge_func = (e) => {
    // 何らかの処理
};

hoge_obj.addEventListener('click', hoge_func);

// リスナーを削除する
hoge_obj.removeEventListener('click', hoge_func);

 

addEventListener()の第二引数に無名関数をセットして簡単に書く事ができますが、この場合のデメリットとして、登録したリスナーをremoveEventListener()で削除できないという問題があります。
これを回避するためには、第二引数の無名関数を事前に宣言した上で、登録するという形を取ります。
この手順によって、removeEventListener()で関数の特定ができるようになり、不要になったリスナーを削除する事ができるようになります。

ただし、IEへの対応次第では、jQueryを使うという策もアリではないかと思います。

Can I Useで確認

 

datepicker() が欲しい

datepickerはjQueryの得意分野なので、なかなかjQueryに依存しないパッケージを探すのが大変かも知れません。
今回は、2種類のパッケージをご紹介します。

• flatpickr
• Pikaday

この2つはどちらがどうという訳ではなく、デザイン面で方向性が異なるので、両方とも知っておいて損はないかと思います。

flatpickrはフラットな感じのデザインで、マテリアルデザインと相性がよいように思います。
Pikadayの方はというと、どことなくBootstrap的な印象で、クセのないデザインのように思います。

両者とも、jQueryのモジュールとして読み込んで使う事もできるので、jQueryはまだしも、jQuery UIはちょっと...という場合にもいいんじゃないでしょうか。

 

$('hoge').addClass() が欲しい

jQueryを使ったクラスの登録（addClass）・削除（removeClass）は、非常に簡単なものです。
ですが、今では、JavaScript標準のメソッドも種類が一気に増え、className以外にもクラスを扱えるインターフェイスが実装されています。

それが今回ご紹介する、classListです。

var hoge_obj = document.getElementById('hoge');

hoge_obj.className = 'class_a class_b';

// クラス情報の取得
console.log(hoge_obj.classList);         // 配列としてクラス情報を取得（読み取り専用）
console.log(hoge_obj.classList.length);  // スペースで分割してパースされた状態なので、2が返ってくる

hoge_obj.classList.add('class_c');       // class_cが追加される
hoge_obj.classList.remove('class_b');    // class_bが削除される
hoge_obj.classList.toggle('class_d');    // class_dがなければ登録、あれば削除
hoge_obj.classList.contains('class_c');  // class_cを含む場合は true

 

classListを使うことで、クラス周りの処理が劇的に簡単になりました。
こちらもブラウザによって使えない場合もあるので、要件に合わせて利用する必要があります。

Can I Useで確認

 

まとめ

パッと思いついたものを挙げてみましたが、ブラウザの種類、バージョンによって使えるもの、使えないものがあるので、要確認です。

あと、jQueryを追い出すために、色々とライブラリを組み込むと、読み込み時間が逆に長くなってしまうという罠もあるので、オールインワンで済むような時は、素直に使ったほうがいいんじゃないかと思います。

随時追加していきます。

以上です。