特定範囲内に収めたい | 数値操作 | JavaScript 目的別リファレンス

スポンサーリンク

このプログラムでは、Math.min()とMath.max()メソッドを使って、数値を指定した範囲（例：0〜100）の中に収める方法を紹介します。

スポンサーリンク

特定範囲内に数値を収めるプログラム

以下のコードでは、数値120を範囲0〜100の中に収め、その結果を表示しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>特定範囲内に数値を収める方法</title>
    <script>
        window.onload = function() {
            // 数値を特定範囲内に収める関数
            function clamp(value, min, max) {
                return Math.min(Math.max(value, min), max); // 値をminとmaxの範囲に収める
            }

            // テスト用の数値
            const number = 120;

            // 数値を0〜100の範囲内に収める
            const clampedValue = clamp(number, 0, 100);

            // 結果をHTMLに表示
            document.getElementById('clampedValue').textContent = `${number} を 0〜100 の範囲内に収めた結果: ${clampedValue}`;
        }
    </script>
</head>
<body>

    <h1>特定範囲内に数値を収める方法</h1>

    <div id="clampedValue"></div>

</body>
</html>

プログラムの解説

このプログラムでは、Math.min()メソッドとMath.max()メソッドを使って、数値を指定した範囲内に収めています。まず、Math.max()を使って数値が最小値以上であることを保証し、その結果をMath.min()で最大値以下に制限しています。

以下は使用したメソッドの注意点です。

  • Math.max()は、引数に渡された値のうち最も大きな値を返します。複数の値を比較する際に便利です。
  • Math.min()は、引数に渡された値のうち最も小さな値を返します。
  • 範囲外の数値が与えられた場合、その数値は自動的に範囲内に収められます。例えば、数値120が範囲0〜100に収められると、結果は100となります。

Mathオブジェクト メソッドの機能一覧

Mathオブジェクト メソッドの機能一覧 | JavaScript リファレンス
JavaScriptのMathオブジェクトは、数学的な定数や関数を提供するオブジェクトで、静的メソッドのみを持ちます。以下に、Mathオブジェクトのメソッドをアルファベット順にまとめています。Mathオブジェクトの静的メソッド メソッド名 説明と注意点 Math.abs(x) 数値の絶対値を返します。注意点: 引数が数...
programming-cafe.com
スポンサーリンク