JavaScript のスニペット集

このページは、JavaScript のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • 少なくとも IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox)

スニペット

strict モード

(function(){
    "use strict";

    // 処理
})();

matches()

// polyfill (https://developer.mozilla.org/ja/docs/Web/API/Element/matches)
if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
document.addEventListener("click", function(e){
    if (e.target.matches(".btn, .btn *")) {
        // .btn (.btnそのものか、.btn内の要素) がクリックされたときの処理
    }
});
  • matches() は 対象要素が指定したCSSセレクタに合致するか確認するためのメソッドです。 (jQuery.is() に近い)
  • 上記のような形でイベントリスナ追加をしていると、対象要素が動的に追加されるケースにも対応できて便利です。

querySelectorAll() + forEach()

Array.prototype.forEach.call(document.querySelectorAll("セレクタ"), function(el, i){
    // 処理
});
  • jQuery.each() のような、セレクタで選択した要素すべてになにかする処理をライブラリ無し (+ for of が使えない) の環境で行うときに使います。

resize イベント + 間引き (requestAnimationFrame)

(function(){
    let requestId;
    // リサイズ時
    window.addEventListener("resize", function(){
        cancelAnimationFrame(requestId);
        requestId = requestAnimationFrame(function(){
            // 処理
        });
    });
})();
  • ブラウザウィンドウをリサイズすると resize イベントが大量に発生するため、requestAnimationFrame() を使用して処理を間引きます。

wheel イベント

// ホイールスクロール時
document.addEventListener("wheel", function(e){
    // 下スクロール
    if (e.deltaY > 0) {
    }
    // 上スクロール
    else if (e.deltaY < 0) {
    }
});

要素が画面上 (ビューポート上) に入っているか確認する

const viewportWidth = document.documentElement.clientWidth; // ビューポート幅 (スクロールバー除く)
const viewportHeight = document.documentElement.clientHeight; // ビューポート高さ (スクロールバー除く)
const rect = el.getBoundingClientRect(); // 要素の位置 (ビューポート上)
const yOK = (0 <= rect.top && rect.top <= viewportHeight) || (0 <= rect.bottom && rect.bottom <= viewportHeight); // 上辺または下辺がビューポート内
const xOK = (0 <= rect.left && rect.left <= viewportWidth) || (0 <= rect.right && rect.right <= viewportWidth); // 左辺または右辺がビューポート内

matchMedia()

幅のチェック (1回)

if (window.matchMedia("(min-width: 680px)").matches) {
    // 幅680px以上
}
else {

}

幅のチェック (イベント)

const handle = function(list) {
    if (list.matches) {
        // 幅680px以上
    }
    else {
        // 幅680px未満
    }
};
let list = window.matchMedia("(min-width: 680px)");
list.addListener(handle); // 幅変更時確認
handle(list); // 初回確認