【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜】インフラ / サーバーサイドエンジニア募集中!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

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

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

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

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

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

お品書き

 

初稿

 

$.ready() が欲しい

jQuery最大の発明はこれじゃないかと思うんですが、Promiseを使えば、自分で実装する事も可能です。
window.onloadで問題なければ、それでもいいかも知れません。
が、ここは一つ、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種類のパッケージをご紹介します。

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

随時追加していきます。

以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
0
読み込み中...
0 票, 平均: 0.00 / 10
229
X facebook はてなブックマーク pocket
【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2024.6.30 CentOS サポート終了】CentOS サーバー移行ソリューション

【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

【大阪 / 横浜】インフラエンジニア・サーバーサイドエンジニア 積極採用中!

この記事をかいた人

About the author

萬代陽一

ソーシャルゲームのウェブ API などの開発がメイン業務ですが、ありがたいことにマーケティングなどいろんな仕事をさせてもらえています。
なおビヨンド内での私の肖像権は CC0 扱いになっています。