便利なJavaScriptワンライナー

開発でよく遭遇するするユースケースに対するワンライナーをまとめてみました。
適切に使用することで短くて読みやすいコードを書いていきましょうー

EcmaScript

配列をシャッフル

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5)
shuffleArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// [8, 6, 5, 7, 9, 1, 2, 3, 10, 4]

@culageさんから偏りがある並び替えになるとご指摘をいただきました。
@culageさんのコメント
(2022-10-30 追記)

ユニークな配列を取得

const removeDuplicateArray = (arr) => [...new Set(arr)]
removeDuplicateArray([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1])
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

数値の配列の平均を取得する

const average = arr => arr.reduce((a, b) => a + b) / arr.length
average([43, 94, 13, 35, 73])
// 51.6

変数が配列かどうか

const fruit = '🍎'
const fruits = ["🍎", "🍌", "🥭", "🍊", "🍇"]
const isArray = (arr) => Array.isArray(arr)

isArray(fruit) // false
isArray(fruits) // true

先頭の一文字を大文字にする

// 
// const capitalize = str => str.split(' ').map(word => word[0].toUpperCase() + word.slice(1)).join(' ')
const capitalize = str => str.replace(/(^\w{1})|(\s+\w{1})/g, match => match.toUpperCase())
capitalize("javascript programing language")
//Javascript Programing Language

文字列を逆にする

const stringReverse = str => str.split('').reverse().join('')
stringReverse("回文とは")
// はと文回
stringReverse("たけやぶやけた")
//たけやぶやけた

小数点以下の数字を特定の桁数に丸める

JavaScriptで浮動小数点の少数を丸めるのは、少々扱いにくいです。
toFiexed()を使うと、指定した桁数で丸められますが、浮動小数点演算の仕組みが原因で、場合によっては誤差が発生します。

// ✅
Number((1.059).toFixed(2)) //1.06 OK
Number((1.047).toFixed(2)) //1.05 OK

// ❌
console.log(Number((1.005).toFixed(2))) // 1    NG. expected 1.01
console.log(Number((1.055).toFixed(2))) // 1.05 NG. expected 1.06

この動作を回避するために、数値を指数表記で表し、Math.round()を使用することで
指定の桁数に丸められた小数を取得できます。

const round = (n, d) => Number(Math.round(n + 'e' + d) + 'e-' + d)
round(1.005, 2) //1.01 OK
round(1.055, 2) //1.06 OK

@fujitanozomuさんから指数表現で渡すと想定外の結果が返ってきてしまうとご指摘をいただきました。
@fujitanozomuさんのコメント
(2022-10-30 追記)

ランダム文字列生成

const randomString = () => Math.random().toString(36).slice(2)
randomString(); //pjxl9h0x3k

@uasiさんからMath.random()がきりのいい値を返すと文字列が短くなってしまうとご指摘をいただきました。
@uasiさんのコメント
(2022-10-30 追記)

ランダムな 16 進数の色を生成する

const hexColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')
hexColor() // #942d7e

@fujitanozomuさんから#ffffffが生成されないとご指摘をいただきました。
@fujitanozomuさんコメント
(2022-10-30 追記)

メールアドレスからドメイン名を抽出

const getDomain = (email) => email.substring(email.indexOf('@') + 1)
getDomain('[e-mail]') // gmail.com

日付形式を逆にする

const transDate = (date) => date.split("-").reverse().join('-')
transDate('2022-10-23') // 23-10-2022

日の間隔を取得

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date('2022-10-01'), new Date('2022-10-23')) //22

Windowオブジェクト

クリップボードにコピー

const copyToClipboard = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copyToClipboard("Hello World!")

ダークモードの検出

const isDarkMode = () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode()); // true or false

トップにスクロール

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: 'smooth', block: 'start' })
const target = document.getElementById('topElement')
scrollToTop(target) // topElementまでスクロール

下にスクロール

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: 'smooth', block: 'end' })
const target = document.getElementById('bottomElement')
scrollToBottom(target) // bottomElementまでスクロール

ユーザーがページの一番下までスクロールしたかどうかを確認する

const scrolledToBottom = () => 
    document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight
scrolledToBottom() // true or false

要素の表示を切り替え

const toggle = element => element.style.display = (element.style.display === 'none' ? 'block' : 'none')
const target = document.getElementById('targetElement')
toggle(target) // hide
toggle(target) // show

@uasiさんからdisplay:blockでない要素に対して使うとまずいとご指摘をいただきました。
@uasiさんコメント
(2022-10-30 追記)

要素がフォーカスされているかどうかを確認

const isFocus = (element) => element == document.activeElemnt
const target = document.getElementById('targetElement')
isFocus(target) // true or false

全てのCookieを消去

const clearCookies = () => 
    document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))
clearCookies()

テキストから HTML を取り除く

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || ''
stripHtml('<p><em>hello</em> <strong>world</strong></p>') // 'hello world'

@uasiさんから不可解な挙動があるとご指摘をいただきました。
@uasiさんコメント
(2022-10-30 追記)