2019/02/18

指定範囲からランダムで重複なしのn個の値を取得する(JavaScript)

JavaScriptで指定範囲からランダムな値を任意の個数取得する方法を通常とワンライナーの2種類紹介する。たとえば、「1〜100からランダムかつ重複なく50個の値を取得する」ようなことだ。


指定範囲からランダムで一意なn個の値を取得する


const pickN = (min, max, n) => {
  const list = new Array(max-min+1).fill().map((_, i) => i + min);
  const ret = [];
  while(n--) {
    const rand = Math.floor(Math.random() * (list.length + 1)) - 1;
    ret.push(...list.splice(rand, 1))
  }
  return ret;
}

const list1 = pickN(1, 100, 30);
console.log(list1);
// [47, 69, 19, 73, 27, 35, 68, 21, 88, 41, 86, 14, 50, 42, 94, 26, 2, 43, 83, 76, 57, 31, 97, 45, 84, 99, 46, 22, 9, 81]

const list2 = pickN(500, 800, 10);
console.log(list2);
// [714, 557, 523, 760, 750, 677, 632, 566, 798, 587]

new Array(max - min + 1).fill().map((_, i) => i + min)は、min〜mixまでの値が入った配列を生成している。そして、ret.push(...list.splice(rand, 1))でさきほどの配列からランダムな位置の1つの値を取得し、結果用の配列に追加している。

2019/02/12

position:stickyでスクロール可能なテーブルの行・列ヘッダを固定する

テーブルに表示する情報が多いとき、行ヘッダや列ヘッダを固定して表示したいときがある。そんなときにはposition: stickyを使うと簡単に実装できる。
ただしIEは対応していないため、ポリフィルが必要となる。

完成予想イメージは以下のとおり。

2019/02/04

Firefoxでbackground-imageなどに指定したInline SVGで色が反映されない

NES.cssの開発をしているときに、特定のブラウザ(Firefox)だけSVGの色が反映されないバグを発見した。IE、Safari、Chromeでは再現しない。
background-imageborder-imageにInline SVGを指定したときに発生する。Inline SVGとは以下のように、url("data:image/svg+xml;...")で指定する方法を指す。
.item {
  /* 色が反映されない */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M10 10 H 80 V 80 H 10 L 10 10' fill='#ff0000'/></svg>");
}