JavaScriptでランダムなことを

こんにちは、さるまりんです。

すみません。

かなりベタなつまらないものを、ベタベタな実装で作ってしまいました。。。

タイトルの通りJavaScriptで何かランダムなことをしたいなと思いまして。

ランダムなこと。運まかせ。そういうことです。

おみくじです。

ランダムなことをするにはランダムな数値を生成、それを元に条件分岐し実行することを変える、となります。

JavaScriptでランダムな数値を生成するには

Math.random()

を使います。

全体ではこんなHTMLとJavaScriptを書いています。

HTML

<div id="button-area">
<button id="my-button">押してみて</button>
</div>
<div id="result-area" style="display: none;">
あなたの運勢は「<span id="result">xxxx</span>」です。
</div>

JavaScript

jQuery(function($){
  $('#my-button').click(
    function(){
      var value = Math.random();
      // 大吉 0.25、中吉 0.10、小吉 0.13、吉 0.25、末吉 0.15、凶 0.11
      var border = [0.25, 0.35, 0.48, 0.73, 0.88, 0.99];
      var result = '大凶';
      var color = '#dc143c';
      if(value < border[0]) {
        result = '大吉';
        color = '#006400';
      } else if (value >= border[0] && value < border[1]) {
        result = '中吉';
        color = '#556b2f';
      } else if (value >= border[1] && value < border[2]) { 
        result = '小吉';
        color = '#32cd32';
      } else if (value >= border[2] && value < border[3]) {
        result = '吉';
        color = '#191970';
      } else if (value >= border[3] && value < border[4]) {
        result = '末吉';
        color = '#2e8b57';
      } else if (value >= border[4] && value < border[5]) {
        result = '凶';
        color = '#4b0082';
      }

      $('#my-button').text('もう一度？');
      $('#result').css('color', color);
      $('#result').text(result);
      $('#result-area').show();
    });
});

やっていることはいたってシンプルです。

ボタンが押された時に

1. 初期化

最初の段階では結果は大凶にしてあります。配列には各結果の境界となる値を持っています。

2. ランダム値を生成

Math.random()では0以上1未満の数値が生成されます。

3. 生成した値を元におみくじの結果と表示の色を決定

生成された値がどの範囲に当たるかをif-elseで検査しています。

4. 結果表示

結果の文字列と色を設定、結果部分を表示します。同時に押されたボタンのラベルの文字列も変更しています。

でも、もっと格好いい実装がありますよね。

これからはJavaScriptやCSS、フロントの技術を勉強したいなって思っています。
スマートにわかりやすい実装ができるプログラマーになりたいと思います。