Math.random関数とアプリのデザイン

Math.random() - JavaScript | MDN によると、JavaScriptのMath.random()は、

[0,1) 、……つまり、0 以上 1 未満の範囲で疑似乱数を返します。Java と同様に、現在時刻をシードとして乱数を生成します。

という関数です。

プログラムを書いてアプリを作成していると、ランダムな数は様々な場面で重宝します。私がアプリのUIをデザインするときにしばしば直面する問題もランダムな数に解決してもらっています。少しだけ紹介させてください。

問題点の代表例

アプリの細かい部分の配色パターン候補がN通りあり、全候補とも自分では最高だと思っており、どれを採用すればよいか迷い先に進めなくなってしまう。

私は、このような「細かいところにこだわりすぎ or 優柔不断」な場合に遭遇したときには、Math.random()に運命に託すことにしています。以下のような自分のルールのもとでこれを実行しています。

ランダムなデザインは「アプリの起動時」に確定させる
- Math.random()を実行するのは、「ビルド時」や「リリース準備時」ではなく、「アプリが起動した時」にするようにしています。こうする方が頻繁にデザインが変わるので見ていて楽しいです。一度アプリを起動したら、次回の起動までは変更させないことがポイントです。
ユーザーに迷惑が掛からない範囲で行う
- デザインがガラッと変わってしまうようなランダムはやめています。

プログラムの例

以下は、idがsampleの要素の文字色の色を、配列colorsの候補でランダムに表示させる関数の定義の例です。実行するときはrandomStyle();と記述します。

function randomStyle() {
  var colors = ["#FFFFFF", "#F1F1F1", "#EADFC6"];
  var idx = Math.floor(Math.random() * colors.length);
  document.querySelector("#sample").style.color = colors[idx];
}

もしも、同じような境遇で困っている方の参考になれば嬉しいです。