JavaScript のスニペット集

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

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • 下記のページにも JavaScript 関係のスニペットがあります。
  • できるだけ素の IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox)

スニペット

strict モード

(function(){
    'use strict';

    // 処理
})();

合計

const arr = [1, 2, 3, 4];
const sum = arr.reduce((a, c) => a + c);

配列のユニーク化

IE11 非対応
const arr = [1, 2, 3, 3, 1, 4];
const a = [...new Set(arr)]; // [1,2,3,4]
IE11 対応
const arr = [1, 2, 3, 3, 1, 4];
const a = arr.filter(function(x, index, _){ return _.indexOf(x) == index }); // [1,2,3,4]

配列のマップ (Object) 化

const arr = [ { name: 'a', value: 1 }, { name: 'b', value: 2 } ];
const map = arr.reduce(function(a, c){ a[c.name] = c; return a; }, {}); // { a: { name: 'a', value: 1 }, b: { name: 'b', value: 2 } }

マップ (Object) の反転

IE11 非対応
const map = { a: 'c', b: 'd' };
const reverseMap = Object.entries(map).reduce((a, c) => { a[c[1]] = c[0]; return a; }, {}); // { c: 'a', d: 'b' }
IE11 対応
const map = { a: 'c', b: 'd' };
const reverseMap = Object.keys(map).reduce(function(a, k){ a[map[k]] = k; return a; }, {}); // { c: 'a', d: 'b' }

数値のフォーマット

const formatted = new Intl.NumberFormat('ja').format(1000);

日時のフォーマット

yyyy/mm/dd hh:mm:ss

yyyy/mm/dd hh:mm:ss
const d = new Intl.DateTimeFormat('ja', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date()).replace(/[年月]/g, '/').replace(/日/g, '');

yyyymmddhhmmss

yyyymmddhhmmss
const d = new Intl.DateTimeFormat('ja', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date()).replace(/[\/ :年月日]/g, '');

yyyy/mm/dd

yyyy/mm/dd
const d = new Intl.DateTimeFormat('ja', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date()).replace(/[年月]/g, '/').replace(/日/g, '');

yyyymmdd

yyyymmdd
const d = new Intl.DateTimeFormat('ja', { year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date()).replace(/[\/年月日]/g, '');

hh:mm:ss

hh:mm:ss
const d = new Intl.DateTimeFormat('ja', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date());

hhmmss

hhmmss
const d = new Intl.DateTimeFormat('ja', { hour: '2-digit', minute: '2-digit', second: '2-digit' }).format(new Date()).replace(/:/g, '');
  • Intl.DateTimeFormat のオプションに year: 'numeric', month: '2-digit', day: '2-digit' を指定した結果が yyyy年mm月dd日 (IE11) になるか yyyy/mm/dd (その他) になるかブラウザごとに異なるため、変換結果として出てくる可能性のあるすべての区切り文字を replace() で置換しています。
  • Date.prototype.toJSON() を使うとタイムゾーンが UTC になるため日本時間と9時間差異が生まれます。

クエリストリングのパース

URLSearchParams (location から)

const params = new URL(location).searchParams;
ループ (ES2015~)
for (let [k, v] of params) {
    // console.log(k, v);
}
  • URLURLSearchParams は IE11 では使用できません。

URLSearchParams (文字列から)

const params = new URLSearchParams(location.search);
const params = new URLSearchParams('?a=1&b=2');

URLSearchParams を使わない簡易的なもの (object)

const search = location.search.substring(1);
const params = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');

ユーティリティ関数

HTML エスケープ

/**
 * 指定文字列を HTML エスケープします。
 * @param {string} s 指定文字列 
 * @returns {string}
 */
const h = function(s) {
    const map = { '<' : '&lt;', '>' : '&gt;', '&' : '&amp;', '"': '&#quot;', '\'' : '&#39;' };
    return String(s).replace(/[<>&"']/g, function(c){ return map[c]; });
};

文字列のフォーマット

/**
 * テンプレート文字列に値を代入します。(例 format('a = {aaa}, b = {bbb}', { aaa: 1, bbb: 2}) → 'a = 1, b = 2')
 * @param s テンプレート文字列
 * @param params 代入する値
 */
const format = function(s, params) {
    return s.replace(/\{(.+?)}/g, function(m, m1){ return params[ m1 ]; });
};

値の範囲制限

/**
 * 指定値が最小、最大の範囲外の場合に最小、最大値を、範囲内の場合に指定値をそのままを返します。(Math.max(min, Math.min(x, max)) と同等)
 * @param {Number} x   指定値
 * @param {Number} min 最小値
 * @param {Number} max 最大値
 * @returns {Number} 補正された値
 */
const minmax = function(x, min, max) { return x < min ? min : max < x ? max : x; }

度 → ラジアン

/**
 * 度 → ラジアンに変換します。
 * @param {Number} deg 度数 (45 等) 
 * @returns {Number}
 */
const rad = function(deg){ return deg * (Math.PI / 180); }

日時のフォーマット (Intl を使わない)

/**
 * Date オブジェクトを文字列化します。
 * @param {Date} date Date オブジェクト
 * @param {string} formatString フォーマット文字列
 * @returns 日時文字列
 */
const dateFormat = function(date, formatString){
    const format = function(s, params) { return s.replace(/\{(.+?)}/g, function(m, m1){ return params[ m1 ]; }); };
    const d2 = function(n){ return ('00' + n).slice(-2) };
    return format(formatString, {
        yyyy: date.getFullYear(), MM: d2(date.getMonth() + 1), dd: d2(date.getDate()), 
        hh: d2(date.getHours()), mm: d2(date.getMinutes()), ss: d2(date.getSeconds()) 
    });
};
const yyyymmdd = function(date){ return dateFormat(date, '{yyyy}{MM}{dd}') };
const yyyymmddhhmmss = function(date){ return dateFormat(date, '{yyyy}{MM}{dd}{hh}{mm}{ss}') };
const formatDate = function(date){ return dateFormat(date, '{yyyy}/{MM}/{dd}') };
const formatDateTime = function(date){ return dateFormat(date, '{yyyy}/{MM}/{dd} {hh}:{mm}:{ss}') };
const formatIso8601 = function(date){ return dateFormat(date, '{yyyy}-{MM}-{dd}T{hh}:{mm}:{ss}') };

日時の追加

/**
 * moment.js の add() に近い形で Date オブジェクトに値を追加します。
 *
 * @param {Date} date Date オブジェクト
 * @param {number} value 追加する値
 * @param {string} unit 単位 (y, year, years, M, month, months, d, day, days, h, hour, hours, m, minute, minutes, s, second, seconds, ms, millisecond, milliseconds)
 * @returns 新しい Date オブジェクト
 */
const dateAdd = function(date, value, unit) {
    const newDate = new Date(date.getTime());
    const nUnit = unit == "M" ? unit : unit.toLowerCase();
    if (/^(?:y|year|years)$/.test(nUnit)) {
        newDate.setFullYear(newDate.getFullYear() + value);
    } else if (/^(?:M|month|months)$/.test(nUnit)) {
        newDate.setMonth(newDate.getMonth() + value);
        // 月末を超える (日にちが変わる) 場合は月末に調整
        if (date.getDate() != newDate.getDate()) {
            newDate.setDate(0);
        }
    } else if (/^(?:d|day|days)$/.test(nUnit)) {
        newDate.setDate(newDate.getDate() + value);
    } else if (/^(?:h|hour|hours)$/.test(nUnit)) {
        newDate.setHours(newDate.getHours() + value);
    } else if (/^(?:m|minute|minutes)$/.test(nUnit)) {
        newDate.setMinutes(newDate.getMinutes() + value);
    } else if (/^(?:s|second|seconds)$/.test(nUnit)) {
        newDate.setSeconds(newDate.getSeconds() + value);
    } else if (/^(?:ms|millisecond|milliseconds)$/.test(nUnit)) {
        newDate.setMilliseconds(newDate.getMilliseconds() + value);
    }
    return newDate;
};

// console.log(dateAdd(new Date("2019-01-31"), 1, "y"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "M"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "d"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "h"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "m"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "s"));
// console.log(dateAdd(new Date("2019-01-31"), 1, "ms"));

日時の差異

/**
 * moment.js の diff() に近い形で2つの日時の差異を取得します。(例 dateDiff(new Date('2019-01-31'), new Date('2019-01-01'), 'd'))
 *
 * @param {Date} date1 Date オブジェクト
 * @param {Date} date2 Date オブジェクト
 * @param {string} unit 単位 (y, year, years, M, month, months, d, day, days, h, hour, hours, m, minute, minutes, s, second, seconds, ms, millisecond, milliseconds)
 * @returns 差異
 */
const dateDiff = function(date1, date2, unit) {
    const nUnit = unit == 'M' ? unit : unit.toLowerCase();
    const f = function(d) {
        const d2 = function(n){ return ('00' + n).slice(-2) };
        return d.getFullYear() + d2((d.getMonth() + 1)) + d2(d.getDate()) + d2(d.getHours()) + d2(d.getMinutes()) + d2(d.getSeconds()) + d2(d.getMilliseconds());
    };
    if (/^(?:y|year|years)$/.test(nUnit)) {
        return Math.floor((f(date1) - f(date2)) / 1000000000000);
    } else if (/^(?:M|month|months)$/.test(nUnit)) {
        const f1 = f(date1), f2 = f(date2);
        const diff = (f1.slice(0, 4) - f2.slice(0, 4)) * 12 + (f1.slice(4, 6) - f2.slice(4, 6));
        return f1.slice(6) - f2.slice(6) >= 0 ? diff : diff - 1;
    } else if (/^(?:d|day|days)$/.test(nUnit)) {
        return Math.floor((date1.getTime() - date2.getTime()) / 1000 / 60 / 60 / 24);
    } else if (/^(?:h|hour|hours)$/.test(nUnit)) {
        return Math.floor((date1.getTime() - date2.getTime()) / 1000 / 60 / 60);
    } else if (/^(?:m|minute|minutes)$/.test(nUnit)) {
        return Math.floor((date1.getTime() - date2.getTime()) / 1000 / 60);
    } else if (/^(?:s|second|seconds)$/.test(nUnit)) {
        return Math.floor((date1.getTime() - date2.getTime()) / 1000);
    } else if (/^(?:ms|millisecond|milliseconds)$/.test(nUnit)) {
        return date1.getTime() - date2.getTime();
    }
};

// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "y"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "M"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "d"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "h"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "m"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "s"));
// console.log(dateDiff(new Date("2020-01-31"), new Date("2019-01-31"), "ms"));