【JavaScript】ワンライナーでユーザーと対話してソートする

 JavaScript にはwindow.confirmというダイアログを表示してユーザーの応答を要求し、その応答内容を使えるメソッドが存在します。

window.confirm – Web API | MDN

 名前の通り確認のために使うのが主であり、凝ったデザインが不要なページの確認をはさむ操作でよく使うメソッドです。これを並び替えの比較関数に用いることで簡単にユーザーに比較を任せたソートを作れます。具体的には次です。

arr.sort((a, b) => window.confirm(`${a} > ${b} ?`));

 かなり短いです。JavaScript の sort は次の様に並び替えの順序を定めます。このため true か false を返せばそのまま大なり小なりの役割を果たしてくれます。

compareFn(a, b) の返値 ソート順
> 0 ab の後に並べる
< 0 ab の前に並べる
=== 0 ab の元の順序を維持する

Array.prototype.sort() – JavaScript | MDN

 このソートを実際に組み込んだコードとデモが次です。

<html lang="ja">
<head>
    <meta charset="utf-8">  
    <title>対話ソートデモ</title>
</head>
<body>
<div id="display"></div>
<button onclick="handleSort()">並び替え開始</button>
<script>
const arr = [0, 4, 3];
document.getElementById('display').innerText = JSON.stringify(arr);

const handleSort = () => {
    arr.sort((a, b) => window.confirm(`${a} > ${b} ?`));
    document.getElementById('display').innerText = JSON.stringify(arr);
}
</script>
</body>
</html>

単なる数字ですといまいち良いところがないですが、複雑なモノの主観ランキングを簡易につけようとする時は便利です。次の様に構造体を JSON 化して表示するだけで違う構造の同士などの複雑な比較を人間の感覚でそれっぽくできます。

 
const arr = [{name: '浜松太郎'}, {name: '静岡太郎'}, {type: '猫'}];
arr.sort((a, b) => window.confirm(`${JSON.stringify(a)} > ${JSON.stringify(b)} ?`));
  •  この記事いいね! (0)
>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7 浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください。

CTR IMG