JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのMathオブジェクト入門！round・sqrt・powなど主要メソッドの使い方を実例付きで解説

Mathオブジェクトとは

JavaScriptのMathオブジェクトは、数値に対してさまざまな数学的操作を実行するための組み込みオブジェクトです。円周率（PI）などの数学定数や、四捨五入・平方根・べき乗といった計算に便利なメソッドが用意されています。

Mathオブジェクトはコンストラクタではないため、new演算子でインスタンスを生成する必要はありません。すべてのプロパティとメソッドは、Math.round() のように直接呼び出すことができます。

よく使われるMathオブジェクトの主なメソッド

  • Math.round(x)：数値を最も近い整数に四捨五入して返します。
  • Math.sqrt(x)：数値の平方根を返します。
  • Math.pow(x, y)：xのy乗（べき乗）を返します。
  • Math.abs(x)：数値の絶対値を返します。
  • Math.floor(x) / Math.ceil(x)：小数点以下の切り捨て・切り上げを行います。
  • Math.random()：0以上1未満のランダムな数値を生成します。

サンプルコード

以下は、Mathオブジェクトの代表的なメソッドを使った実装例です。ボタンをクリックすると、それぞれの計算結果が画面に表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Math Object</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript Math Object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、Mathオブジェクトの各メソッドの実行結果を確認できます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    document.querySelector(".Btn").addEventListener("click", () => {
        sampleEle.innerHTML = 'Math.round(7.7) = ' + Math.round(7.7) + '<br>';
        sampleEle.innerHTML += 'Math.sqrt(121) = ' + Math.sqrt(121) + '<br>';
        sampleEle.innerHTML += 'Math.pow(4,4) = ' + Math.pow(4,4) + '<br>';
    });
</script>
</body>
</html>

実行結果

JavaScriptのMathオブジェクト入門！round・sqrt・powなど主要メソッドの使い方を実例付きで解説

「CLICK HERE」ボタンをクリックすると、次のように各メソッドの計算結果が赤字で表示されます。

  • Math.round(7.7) = 8：7.7を四捨五入した結果
  • Math.sqrt(121) = 11：121の平方根
  • Math.pow(4,4) = 256：4の4乗（4×4×4×4）

JavaScriptのMathオブジェクト入門！round・sqrt・powなど主要メソッドの使い方を実例付きで解説

このように、Mathオブジェクトを使えば複雑な数学ライブラリを導入しなくても、日常的な数値計算を簡単に実装できます。用途に応じて他のメソッドも組み合わせて活用してみましょう。

  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars