１．はじめに

【JavaScript】BMIを計算するプログラムを作成（備忘録）の記事内のプログラムを修正し、作成しました。

２．サンプルプログラム

Sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="panel">
            <h1 class="text-center">必要な消費kcalと運動時間を計算</h1>
            <form>
                <div id="inputWeight">
                    <p>体重をKg単位で入力してください</p>
                    <input class="no-ui" id="weight" type="number" placeholder="体重を入力してください" required />
                </div>
                <div id="inputTargetWeight">
                    <p>目標体重をkg単位で入力してください</p>
                    <input class="no-ui" id="target_weight" type="number" placeholder="目標体重を入力してください" required />
                </div>
                <div id="inputTargetCalorie">
                    <p>目標とする1時間当たりの消費kcalを、0～500kcalの間で数値のみ入力してください</p>
                    <input class="no-ui" id="target_calorie" type="number" placeholder="目標消費kcalを入力してください" required />
                </div>
                <button type="button" class="btn" onclick="calculateCalories()">計算する</button>
            </form>
            <div id="alert" class="text-center"></div>
            <div id="required_calorie" class="text-center"></div>
            <div id="required_time" class="text-center"></div>
        </div>
    </div>
    <script src="Sample.js"></script>
</body>

style.css

body {
    text-align: center;
}

form {
    background-color: #fff;
    padding: 20px;
    color: #000;
}

form p {
    margin-bottom: 3px;
}

form p:nth-child(1) {
    margin-top: 0;
    background-color: lightblue;
}

input {
    width: 100%;
    padding: 5px 5px;
    border: 2px solid black;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: white;
    font-size: 14px;
}

/* 入力フォームがクリックされた際の装飾 */
input:focus {
    border: 3px solid lightblue;
}

button {
    background-color: white;
}

/* ボタン上にカーソルを合わせた際の装飾 */
button:hover {
    background-color: lightblue;
    color: white;
}

/* 入力フォームのスピンボタン(数値入力UI)を非表示にする */
.no-ui {
    -moz-appearance: textfield;
}

.no-ui::-webkit-outer-spin-button,
.no-ui::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.btn {
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* スクリーンサイズが768px以上の場合の装飾 */
@media (min-width: 768px) {
    .panel {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* スクリーンサイズが1024px以上の場合の装飾 */
@media (min-width: 1024px) {
    .panel {
        width: 30%;
        margin-left: auto;
        margin-right: auto;
    }
}

Sample.js

function calculateCalories() {
    // valueは文字列型のため、BMI計算前に数値型に変換
    let weight = Number(document.getElementById("weight").value);
    let target_weight = Number(document.getElementById("target_weight").value);
    let target_calorie = Number(document.getElementById("target_calorie").value);

    // 計算開始前に、前回処理時のエラーメッセージを消去
    document.getElementById("alert").innerHTML = "";

    // 計算開始前に、前回処理時の計算結果を消去
    document.getElementById("required_calorie").innerHTML = "";
    document.getElementById("required_time").innerHTML = "";

    // 入力値がNull/空文字か検証
    if (!weight || !target_weight || !target_calorie) {
        document.getElementById("alert").innerHTML = "数値を入力してください。";
        // エラーが検出された場合、JavaScript内の後続処理を実行せず終了
        return;
    }

    // 入力値が0以下か検証
    if (weight <= 0 || target_weight <= 0 || target_calorie <= 0) {
        document.getElementById("alert").innerHTML = "0以上の数値を入力してください。";
        // エラーが検出された場合、JavaScript内の後続処理を実行せず終了
        return;
    }

    // 入力値が500kcal以下か検証
    if (target_calorie > 500) {
        document.getElementById("alert").innerHTML = "500以下の数値を入力してください。";
        return;
    }

    // 今の体重が目標体重を下回っていないか検証
    if (weight - target_weight < 0) {
        document.getElementById("alert").innerHTML = "計算できませんでした。";   
        // エラーが検出された場合、JavaScript内の後続処理を実行せず終了
        return; 
    }

    // 必要な消費kcalを計算 (体脂肪1kgあたり7200kcal)
    let required_calorie_consumption = (weight - target_weight) * 7200;
    // 必要な運動時間を計算
    let required_exercise_time = required_calorie_consumption / target_calorie;

    document.getElementById("required_calorie").innerHTML = `必要な消費カロリー: ${required_calorie_consumption} kcal`;
    document.getElementById("required_time").innerHTML = `必要な運動時間: ${required_exercise_time.toFixed(2)} 時間`;
}

３．実行環境

・OS: Windows 11（バージョン 24H2）
・ブラウザ: Microsoft Edge（バージョン 140.0.3485.81）
・エディタ: Visual Studio Code（バージョン 1.104.1）

４．参考

・数値を固定小数点数形式で文字列に変換する(toFixed)
・【JavaScript】BMIを計算するプログラムを作成（備忘録）
・体脂肪1kg落とすのに必要な消費カロリーは？具体的な食事量・運動量について解説！

Discussion