JavaScriptを使って簡単なおみくじプログラムを作ろう【初心者向け】

2022年1月10日

JavaScriptを使ったおみくじプログラムの作り方

今回はJavaScriptを使って、おみくじプログラムを作ってみましょう。
おみくじは神社によって吉凶の種類に違いがありますが、ここでは大吉、中吉、小吉、末吉、凶、大凶の６つのパターンを用います。
画面上にボタンを配置して、そのボタンを押下すると、配列に定義した吉凶がランダムで選ばれて、それを画面に表示するというプログラムです。
ただ、JavaScriptには配列からランダムに要素を選択する関数はありませんので、Math関数を組み合わせて実現します。

配列からランダムに要素を選択する方法

配列からランダムに要素を選択する方法は、以下のようになります。

var 配列名 = [要素1,要素2,...,要素n];
var 変数名 = 配列名[Math.floor(Math.random() * 配列名.length)];

配列を定義して、その配列にMath.floor(Math.random() * 配列名.length)]とすると、変数にランダムで配列の要素が一つ代入されます。
なお、配列名.lengthは、配列の要素の数を返すメソッドです。
使用する二つのMath関数の使い方と内容を以下に示します。

Math.floor(数値)	小数点以下の切り捨て
Math.random()	0～1未満の乱数

おみくじプログラム

上記の内容を踏まえたおみくじプログラムは、以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fortune</title>
</head>
<body>
  <input type="button" value="おみくじを引く" onclick="drawFortune();"></input>
  <div id="pos1"></div>
  <script type="text/javascript">
    // おみくじ関数
    function drawFortune() {
      var array = ['大吉','中吉','小吉','末吉','凶','大凶'];
      var value = array[Math.floor(Math.random() * array.length)];
      var id1 = document.getElementById('pos1');
      id1.style.fontSize = "32pt";
      id1.style.color = "blue";
      id1.innerHTML = value;
    }
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Fortune</title>

</head>

<body>

// おみくじ関数

function drawFortune() {

var array = ['大吉','中吉','小吉','末吉','凶','大凶'];

var value = array[Math.floor(Math.random() * array.length)];

var id1 = document.getElementById('pos1');

id1.style.fontSize = "32pt";

id1.style.color = "blue";

id1.innerHTML = value;

}

</script>

</body>

</html>

プログラムを実行すると、「おみくじを引く」というボタンが表示され、そのボタンを押下すると配列に定義した吉凶がランダムに表示されます。

JavaScriptの詳しい使い方は、以下の「MDN Web Docs」を参照してください。

MDN Web Docs ～ JavaScript