【6日でできるJavaScript入門】Mathオブジェクト

　JavaScriptで高度な数値計算や、乱数を用いたゲーム・ツールを作る場合には、「Mathオブジェクト」の活用が不可欠です。Mathオブジェクトは、数学の定数や関数、ランダムな値の生成など、多様な機能を持つ組み込みオブジェクトです。
　ここでは、Mathオブジェクトの主要プロパティ・メソッドと、実用例までを表やサンプルプログラムを交えて解説します。

１．Mathオブジェクトのプロパティと定数

1.1. 主要プロパティ（定数）

プロパティ内容例
Math.PI円周率（π）3.141592...
Math.E自然対数の底（e）2.718281...
Math.SQRT22の平方根1.414213...
Math.SQRT1_21/2の平方根0.707106...

使い方例

let radius = 4;
let area = Math.PI * radius * radius;
console.log(area); // 50.265...

1.2. 主要メソッド（数値処理）

メソッド内容例・解説
Math.abs(n)絶対値を返すMath.abs(-5) → 5
Math.floor(n)小数点以下切り捨てMath.floor(3.8) → 3
Math.ceil(n)小数点以下切り上げMath.ceil(3.2) → 4
Math.round(n)四捨五入Math.round(3.5) → 4
Math.min(a, b,…)最小値Math.min(2,5,1) → 1
Math.max(a, b,…)最大値Math.max(2,5,1) → 5
Math.sqrt(n)平方根（√n）Math.sqrt(9) → 3
Math.pow(a, b)aのb乗Math.pow(2,3) → 8

1.3. 乱数・三角関数

メソッド内容例・解説
Math.random()0以上1未満のランダムな数値を返すMath.random() → 0.538...
Math.sin(x)サイン（xはラジアン）Math.sin(Math.PI/2) → 1
Math.cos(x)コサイン（xはラジアン）Math.cos(0) → 1
Math.tan(x)タンジェント（xはラジアン）Math.tan(0) → 0

２．サンプルプログラムと応用例

2.1. 四捨五入・切り上げ・切り捨ての動作

ファイル名： lesson26-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🧮 数値の丸め操作デモ</title>
</head>
<body>
  <h1>🧮 数値の丸め操作（四捨五入・切り上げ・切り捨て）</h1>
  <input type="number" id="num" step="any" value="4.56">
  <button id="calcBtn">計算</button>
  <div id="output"></div>
  <script>
    document.getElementById('calcBtn').addEventListener('click', function(){
      let n = Number(document.getElementById('num').value);
      let res = 
        `元の値：${n}\n` +
        `Math.floor：${Math.floor(n)}\n` +
        `Math.ceil ：${Math.ceil(n)}\n` +
        `Math.round：${Math.round(n)}`;
      document.getElementById('output').textContent = res;
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例

元の値：4.56
Math.floor：4
Math.ceil ：5
Math.round：5

2.2. 乱数の実用例：おみくじプログラム

ファイル名： lesson26-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎲 おみくじ</title>
</head>
<body>
  <h1>🎲 今日の運勢</h1>
  <button id="luckBtn">おみくじを引く！</button>
  <div id="luckResult"></div>
  <script>
    const results = [
      "【大吉】とても素晴らしい1日になります！",
      "【中吉】何か良いことがありそうです。",
      "【小吉】穏やかな1日でしょう。",
      "【吉】平凡ですが無事に過ごせます。",
      "【凶】今日は慎重に行動しましょう。"
    ];
    document.getElementById('luckBtn').addEventListener('click', function(){
      let idx = Math.floor(Math.random() * results.length);
      document.getElementById('luckResult').textContent = results[idx];
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例
【大吉】とても素晴らしい1日になります！

2.3. サイコロの出目をランダムに表示

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

js-math-objectダウンロード
dice1.pngdice2.pngdice3.pngdice4.pngdice5.pngdice6.png

ファイル名： lesson26-3.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🎲 サイコロを振る</title>
</head>
<body>
  <h1>🎲 2つのサイコロ</h1>
  <button id="diceBtn">サイコロを振る</button>
  <p>
    <img id="diceA" src="dice1.png" width="50">
    <img id="diceB" src="dice1.png" width="50">
  </p>
  <div id="diceResult"></div>
  <script>
    document.getElementById('diceBtn').addEventListener('click', function(){
      // 1～6のランダム整数
      let a = Math.floor(Math.random()*6)+1;
      let b = Math.floor(Math.random()*6)+1;
      document.getElementById('diceA').src = `dice${a}.png`;
      document.getElementById('diceB').src = `dice${b}.png`;
      document.getElementById('diceResult').textContent = `合計：${a+b}`;
    });
  </script>
</body>
</html>

ブラウザの出力例

出力例

  • サイコロ画像が2つランダムで変わり、「合計：10」などと表示される

まとめ

  • Mathオブジェクトは、定数・丸め・三角関数・乱数など、さまざまな数学処理に使える。
  • Math.random()やMath.floor()を組み合わせることで乱数やサイコロ・くじ引き等のロジックが簡単に作れる。
  • Mathの機能を使って、Webアプリの幅広い演出・計算を楽しもう！