JavaScript のスニペット集

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

目次

注意

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

スニペット

オブジェクトのソート

昇順ソート (id)
const data = [
    { id: 1, name: '山田太郎' },
    { id: 3, name: '斎藤花子' },
    { id: 2, name: '鈴木次郎' },
];
data.sort(function(aObj, bObj){
    const a = aObj.id, b = bObj.id;
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
});
昇順ソート (dept。空を最後)
const data = [
    { id: 1, name: '山田太郎', dept: '02' },
    { id: 3, name: '斎藤花子', dept: '01' },
    { id: 2, name: '鈴木次郎', dept: '' },
];
data.sort(function(aObj, bObj){
    const a = aObj.dept, b = bObj.dept;
    const aEmpty = (a == ''), bEmpty = (b == '');
    if (aEmpty && !bEmpty) return 1;
    else if (!aEmpty && bEmpty) return -1;

    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
});
降順ソート (id)
const data = [
    { id: 1, name: '山田太郎' },
    { id: 3, name: '斎藤花子' },
    { id: 2, name: '鈴木次郎' },
];
data.sort(function(aObj, bObj){
    const a = aObj.id, b = bObj.id;
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
});
降順ソート (dept。空を最後)
const data = [
    { id: 1, name: '山田太郎', dept: '02' },
    { id: 3, name: '斎藤花子', dept: '01' },
    { id: 2, name: '鈴木次郎', dept: '' },
];
data.sort(function(aObj, bObj){
    const a = aObj.dept, b = bObj.dept;
    const aEmpty = (a == ''), bEmpty = (b == '');
    if (aEmpty && !bEmpty) return 1;
    else if (!aEmpty && bEmpty) return -1;

    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
});

合計

IE11 非対応
const arr = [1, 2, 3, 4];
const sum = arr.reduce((a, c) => a + c);
IE11 対応
const arr = [1, 2, 3, 4];
const sum = arr.reduce(function(a, c){ return 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 s = new Set(); arr.forEach(function(v){ s.add(v); });
const a = []; s.forEach(function(v){{ a.push(v) }}); // [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' }

数値のフォーマット

toLocaleString()
const num = 1000;
const formatted = num.toLocaleString('ja'); // 1,000
Intl
const num = 1000;
const formatted = new Intl.NumberFormat('ja').format(num); // 1,000

日時のフォーマット

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;', '\'' : '&apos;' };
    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"));

かな変換

/**
 * かな変換します。
 * @param s 対象文字列
 * @param name 変換する種類名
 * @returns 変換後の文字列
 */
const convertKana = (function(){
    // 全角かな
    const zh  = [
        'あ゙','か゚','き゚','く゚','け゚','こ゚','せ゚','つ゚','と゚','ら゚','り゚','る゚','れ゚','ろ゚',
        'わ゙','ゐ゙','ゔ','ゑ゙','を゙','ゎ','ゐ','ゑ',
        'ゕ','ゖ','。','「','」','、','・','ー','゛','゜',
        'が','ぎ','ぐ','げ','ご','ざ','じ','ず','ぜ','ぞ','だ','ぢ','づ','で','ど','ば','ぱ','び','ぴ','ぶ','ぷ','べ','ぺ','ぼ','ぽ',
        'ぁ','あ','ぃ','い','ぅ','う','ぇ','え','ぉ','お','か','き','く','け','こ','さ','し','す','せ','そ','た','ち','っ','つ','て','と',
        'な','に','ぬ','ね','の','は','ひ','ふ','へ','ほ','ま','み','む','め','も','ゃ','や','ゅ','ゆ','ょ','よ','ら','り','る','れ','ろ',
        'わ','を','ん',
    ];
    // 全角カナ
    const zk = [
        'ア゙','カ゚','キ゚','ク゚','ケ゚','コ゚','セ゚','ツ゚','ト゚','ラ゚','リ゚','ル゚','レ゚','ロ゚',
        'ヷ','ヸ','ヴ','ヹ','ヺ','ヮ','ヰ','ヱ',
        'ヵ','ヶ','。','「','」','、','・','ー','゛','゜',
        'ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','パ','ビ','ピ','ブ','プ','ベ','ペ','ボ','ポ',
        'ァ','ア','ィ','イ','ゥ','ウ','ェ','エ','ォ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ッ','ツ','テ','ト',
        'ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ャ','ヤ','ュ','ユ','ョ','ヨ','ラ','リ','ル','レ','ロ',
        'ワ','ヲ','ン',
    ];
    // 半角カナ
    const hk = [
        'ア゙','カ゚','キ゚','ク゚','ケ゚','コ゚','セ゚','ツ゚','ト゚','ラ゚','リ゚','ル゚','レ゚','ロ゚',
        'ヷ','イ゙','ヴ','エ゙','ヺ','ワ','イ','エ',
        'カ','ケ','。','「','」','、','・','ー','゙','゚',
        'ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','パ','ビ','ピ','ブ','プ','ベ','ペ','ボ','ポ',
        'ァ','ア','ィ','イ','ゥ','ウ','ェ','エ','ォ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ッ','ツ','テ','ト',
        'ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ャ','ヤ','ュ','ユ','ョ','ヨ','ラ','リ','ル','レ','ロ',
        'ワ','ヲ','ン',
    ];
    const zhm = Object.keys(zh).reduce(function(m, i){ m[zh[i]] = i; return m }, {});
    const zkm = Object.keys(zk).reduce(function(m, i){ m[zk[i]] = i; return m }, {});
    const hkm = Object.keys(hk).reduce(function(m, i){ m[hk[i]] = i; return m }, {});
    const zhp = new RegExp(zh.join('|'), 'g');
    const zkp = new RegExp(zk.join('|'), 'g');
    const hkp = new RegExp(hk.join('|'), 'g');
    const fn = {
        hankanaToZenkana: function(s){ return s.replace(hkp, function($0){ return zk[hkm[$0]] }) },
        hankanaToZenhira: function(s){ return s.replace(hkp, function($0){ return zh[hkm[$0]] }) },
        zenkanaToHankana: function(s){ return s.replace(zkp, function($0){ return hk[zkm[$0]] }) },
        zenkanaToZenhira: function(s){ return s.replace(zkp, function($0){ return zh[zkm[$0]] }) },
        zenhiraToHankana: function(s){ return s.replace(zhp, function($0){ return hk[zhm[$0]] }) },
        zenhiraToZenkana: function(s){ return s.replace(zhp, function($0){ return zk[zhm[$0]] }) },
        zenkana: function(s){ return fn.hankanaToZenkana(fn.zenhiraToZenkana(s)) },
        hankana: function(s){ return fn.zenkanaToHankana(fn.zenhiraToHankana(s)) },
        zenhira: function(s){ return fn.hankanaToZenhira(fn.zenkanaToZenhira(s)) },
    }
    return function(s, name) { return fn[name](s) };
})();
const hankanaToZenkana = function(s){ return convertKana(s, 'hankanaToZenkana') }; // 半角カナ→全角カナ
const hankanaToZenhira = function(s){ return convertKana(s, 'hankanaToZenhira') }; // 半角カナ→全角かな
const zenkanaToHankana = function(s){ return convertKana(s, 'zenkanaToHankana') }; // 全角カナ→半角カナ
const zenkanaToZenhira = function(s){ return convertKana(s, 'zenkanaToZenhira') }; // 全角カナ→全角かな
const zenhiraToHankana = function(s){ return convertKana(s, 'zenhiraToHankana') }; // 全角かな→半角カナ
const zenhiraToZenkana = function(s){ return convertKana(s, 'zenhiraToZenkana') }; // 全角かな→全角カナ
const zenkana = function(s){ return convertKana(s, 'zenkana') }; // 半角カナ・全角かな→全角カナ
const hankana = function(s){ return convertKana(s, 'hankana') }; // 全角カナ・全角かな→半角カナ
const zenhira = function(s){ return convertKana(s, 'zenhira') }; // 半角カナ・全角カナ→全角かな

// const s = 'あ゙か゚き゚く゚け゚こ゚せ゚つ゚と゚ら゚り゚る゚れ゚ろ゚わ゙ゐ゙ゔゑ゙を゙ゎゐゑゕゖ。「」、・ー゛゜がぎぐげござじずぜぞだぢづでどばぱびぴぶぷべぺぼぽぁあぃいぅうぇえぉおかきくけこさしすせそたちっつてとなにぬねのはひふへほまみむめもゃやゅゆょよらりるれろわをんア゙カ゚キ゚ク゚ケ゚コ゚セ゚ツ゚ト゚ラ゚リ゚ル゚レ゚ロ゚ヷヸヴヹヺヮヰヱヵヶ。「」、・ー゛゜ガギグゲゴザジズゼゾダヂヅデドバパビピブプベペボポァアィイゥウェエォオカキクケコサシスセソタチッツテトナニヌネノハヒフヘホマミムメモャヤュユョヨラリルレロワヲンア゙カ゚キ゚ク゚ケ゚コ゚セ゚ツ゚ト゚ラ゚リ゚ル゚レ゚ロ゚ヷイ゙ヴエ゙ヺワイエカケ。「」、・ー゙゚ガギグゲゴザジズゼゾダヂヅデドバパビピブプベペボポァアィイゥウェエォオカキクケコサシスセソタチッツテトナニヌネノハヒフヘホマミムメモャヤュユョヨラリルレロワヲン';
// console.log('半角カナ→全角カナ\n' + hankanaToZenkana(s) + '\n');
// console.log('半角カナ→全角かな\n' + hankanaToZenhira(s) + '\n');
// console.log('全角カナ→半角カナ\n' + zenkanaToHankana(s) + '\n');
// console.log('全角カナ→全角かな\n' + zenkanaToZenhira(s) + '\n');
// console.log('全角かな→半角カナ\n' + zenhiraToHankana(s) + '\n');
// console.log('全角かな→全角カナ\n' + zenhiraToZenkana(s) + '\n');
// console.log('半角カナ・全角かな→全角カナ\n' + zenkana(s) + '\n');
// console.log('全角カナ・全角かな→半角カナ\n' + hankana(s) + '\n');
// console.log('半角カナ・全角カナ→全角かな\n' + zenhira(s) + '\n');