【JavaScript】数値計算の実践テクニックと進数リテラル・定数リファレンス

2026年1月23日

概要

JavaScriptにおける数値（Number型）は、整数のカウントから物理演算、色の表現、ビット操作まで幅広く利用されます。

本記事では、実務で頻出する Math オブジェクトを用いた計算処理、可読性を高めるための各進数表記（16進数や2進数）、そして数値型が扱える限界値（定数）について解説します。

コピー＆ペーストで動作するコードを通して、数値処理の基礎を固めましょう。

仕様（入出力）

入力: ゲームのパラメータ、ファイル権限設定、カラーコードなどの数値データ
出力:
1. Math関数による計算結果（距離、丸め処理、確率）
2. 各進数リテラルの10進数変換値
3. Number型定数の値確認

基本の使い方

高度な計算を行うには Math クラスのメソッドを使用します。

また、コード上で数値を記述する際、接頭辞（0x など）を付けることで、用途に合わせた進数で直感的に値を定義できます。

Mathオブジェクトの主要メソッド

カテゴリ	メソッド	使用例	処理内容
基本計算	`Math.abs(x)`	`Math.abs(-50)`	絶対値（50）を返す
べき乗・根	`Math.pow(x, y)`	`Math.pow(2, 10)`	xのy乗（1024）を返す
丸め処理	`Math.round(x)`	`Math.round(4.7)`	四捨五入（5）を行う
三角関数	`Math.sin(x)`	`Math.sin(Math.PI/2)`	サイン値を計算する
乱数	`Math.random()`	`Math.random()`	0以上1未満のランダムな小数を生成

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Number Handling</title>
    <script src="math-logic.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>演算結果の確認</h1>
        <p>コンソール(F12)を開いてログを確認してください。</p>
    </div>
</body>
</html>

JavaScript (math-logic.js)

入力された値を一切使わず、ゲーム開発やシステム管理を想定した実用的な数値に変更しています。

/**
 * 数値操作と演算ロジックのデモンストレーション
 */
const executeNumberLogic = () => {
    console.log('--- 1. Mathオブジェクトによる計算 ---');
    
    // ゲーム設定を想定したパラメータ
    const playerX = 150;
    const playerY = 200;
    const enemyX = 100;
    const enemyY = 250;
    const criticalRate = 0.5; // 50%
    const damageDiff = -45;   // ダメージ変動値（負の値）

    // 【数学的計算】三平方の定理で距離を求める (sqrt: 平方根, pow: べき乗)
    const distance = Math.sqrt(Math.pow(playerX - enemyX, 2) + Math.pow(playerY - enemyY, 2));
    console.log(`敵との距離: ${distance.toFixed(2)}`); // 小数点第2位まで表示

    // 【絶対値】変動値の符号を無視して大きさを取得 (abs)
    console.log(`ダメージ変動幅: ${Math.abs(damageDiff)}`);

    // 【丸め処理】HPバーの表示などで整数化が必要な場合
    const rawHP = 98.76;
    console.log(`HP四捨五入 (round): ${Math.round(rawHP)}`); // 99
    console.log(`HP切り上げ (ceil) : ${Math.ceil(rawHP)}`);  // 99
    console.log(`HP切り捨て (floor): ${Math.floor(rawHP)}`); // 98

    // 【乱数】クリティカルヒットの判定 (random)
    const isCritical = Math.random() < criticalRate;
    console.log(`クリティカル判定: ${isCritical ? "発生！" : "通常"}`);


    console.log('--- 2. 各進数リテラルの表記と用途 ---');
    
    // 用途に応じた最適な表記法
    const filePermission = 0o644;    // 8進数 (UNIXファイルの権限設定)
    const colorGreen     = 0x00FF00; // 16進数 (RGBカラーコード)
    const bitFlag        = 0b1010;   // 2進数 (ビットマスク/フラグ管理)
    const normalCount    = 999;      // 10進数 (通常の個数など)

    // 出力時はすべて10進数に自動変換されます
    console.table([
        { type: "8進数 (Octal)",   literal: "0o644",    value: filePermission },
        { type: "16進数 (Hex)",    literal: "0x00FF00", value: colorGreen },
        { type: "2進数 (Binary)",  literal: "0b1010",   value: bitFlag },
        { type: "10進数 (Decimal)",literal: "999",      value: normalCount },
    ]);


    console.log('--- 3. 定数による限界値の確認 ---');
    
    // システムの限界値を知ることでオーバーフローを防ぐ
    console.table({
        "最大値 (MAX_VALUE)": Number.MAX_VALUE,
        "最小値 (MIN_VALUE)": Number.MIN_VALUE,
        "安全な最大整数 (MAX_SAFE)": Number.MAX_SAFE_INTEGER,
        "安全な最小整数 (MIN_SAFE)": Number.MIN_SAFE_INTEGER
    });
};

// 実行
executeNumberLogic();

カスタムポイント

進数表記リファレンス

プレフィックスを変えることで、数値を異なる基数で記述できます。

表記名	接頭辞	具体例	実務での用途
10進数	なし	`255`, `100`	一般的な計算、ループ回数
16進数	`0x`	`0xFF`, `0xA1`	カラーコード、メモリアドレス、文字コード
8進数	`0o`	`0o755`, `0o644`	Linux/Unixのファイルパーミッション
2進数	`0b`	`0b1101`	ビットフラグ、オン/オフの状態管理

Numberオブジェクトの定数一覧

これらの定数は、数値演算が安全に行える範囲をチェックするために使用します。

定数名	意味	およその値・範囲
`Number.MAX_VALUE`	表現可能な最大の浮動小数点数	`1.79e+308`
`Number.MIN_VALUE`	表現可能な0に最も近い正の数	`5.00e-324`
`Number.MAX_SAFE_INTEGER`	精度を失わずに扱える整数の最大値	`9,007,199,254,740,991`
`Number.MIN_SAFE_INTEGER`	精度を失わずに扱える整数の最小値	`-9,007,199,254,740,991`

注意点

丸め誤差:2進数浮動小数点数の仕様上、小数の計算（例: 0.1 + 0.2）は誤差を含みます。厳密な金額計算では、整数倍（×100）してから計算し、最後に割るなどの対策が必要です。
整数のオーバーフロー:Number.MAX_SAFE_INTEGER を超える整数計算は結果が不正確になります。それ以上の桁数を扱う場合は、末尾に n をつける BigInt 型（例: 12345678901234567890n）を使用してください。

応用

範囲内への数値の制限（クランプ）

「数値を0〜100の範囲に収めたい」といった処理は Math.min と Math.max を組み合わせることで実現できます。

const clamp = (val, min, max) => Math.min(Math.max(val, min), max);

const hp = 150;
const validHP = clamp(hp, 0, 100); // 100より大きいので100に丸められる
console.log(validHP); // 100