BMI値計算プログラム

2016-03-22 最終更新日:2016-03-22

健康志向のブームはいつもありますね。健康に気を使う人多いと思います。

運動してダイエットとかもそうですよね。テレビでもよくやっています。健康な身体作り。

身体が資本というのは病気になって初めて分かるものです。私もあまり運動していないので身体もたるみっぱなしで最近は完全に引きこもり生活です。パソコンでの作業が多いのであまり運動することがないのです。

座りっぱなしもよくないということなのでスタンディングワークしております。何年か前にもやりましたが1ヶ月ほどで1kgはやせました。最近はずっと立ちっぱなしで大変なのでスタンディングワークを多めで座って作業もしています。

病気をしない身体作りというのはとても良いことですね。背筋ともも肉を鍛えるとダイエットには効果的と効いたことがあります。

さてBMIという言葉をご存じな方も多いと思います。

BMI（Body Mass Index）は国際的な肥満度を測る指数のことで脂肪指数とも呼ばれています。

計算式が分かるのでこれをjavascriptで計算させてみたいと思います。体重÷（身長(m)x身長(m)）が式です。

/*
  	BMI計算式
  	体重 ÷ ((身長cm÷100) x (身長cm÷100))
   */
  bmi = function(height, weight) {
    var h, total;
    h = height / 100;
    total = weight / (h * h);
    return Math.round(total * 10) / 10;
  };
  bmi(170,70);
  // => 24.2

関数の中に身長と体重を入れると計算が出来るようになっています。

身長をcmの入力と考えてまず100で割っています、それをかけて体重で割ります。

最後の行Math.round(total * 10) / 10はMath.round(x)の関数で四捨五入します。わざわざ10かけて10で割っているのは少数の値を出すためにやっています。

因みにMath.ceil(x)関数で切り上げでMath.floor(x)関数切り捨てになります。

実際のスクリプトはエラー処理や理想の体重出力処理があるので多めなのですがBMI計算は上記のみです。

⇒デモを見てみる

実際の数値はいかがだったでしょうか？私は23.4でした。一応標準数値内といったところでしょうか。

簡単なプログラムがあればまた紹介したいと思います。

下記をコピペで確認できます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>BMIサンプル</title>
</head>
<body>
<h1>BMI計算プログラム</h1>
<p><label for="height">身長cm</label><p>
<p><input type="text" class="form-control" id="bmi-height" placeholder="身長を入力"></p>
<p><label for="weight">体重kg</label></p>
<p><input type="text" class="form-control" id="bmi-weight" placeholder="体重を入力"></p>
<p><label for="bmi">BMI値</label></p>
<p id="results">？</p>
<p id="ideal-weight">？</p>
<button type="button" id="button">計算する</button>
<button type="reset" id="reset">リセット</button>

<script>
// Generated by CoffeeScript 1.10.0
(function() {
  'use strict';

  /*
  	変数初期化と各ID名設定
   */
  var bmi, btn, btn_id, esc, getValue, height_id, ideal_id, idealweight, reset, reset_id, resetbtn, results_id, showResult, weight_id;
  height_id = 'bmi-height';
  weight_id = 'bmi-weight';
  results_id = 'results';
  ideal_id = 'ideal-weight';
  btn_id = 'button';
  reset_id = 'reset';

  /*
  	BMI計算式
  	体重 ÷ (身長m x 身長m)
   */
  bmi = function(height, weight) {
    var h, total;
    h = height / 100;
    total = weight / (h * h);
    return Math.round(total * 10) / 10;
  };

  /*
  	理想のBMI体重
  	(身長m x 身長m) x 22-25
   */
  idealweight = function(height) {
    var h, ideal;
    ideal = [];
    h = height / 100;
    ideal.weight_first = (h * h) * 22;
    ideal.weight_last = (h * h) * 25;
    ideal.weight_first = Math.round(ideal.weight_first * 10) / 10;
    ideal.weight_last = Math.round(ideal.weight_last * 10) / 10;
    return "標準の体重は" + ideal.weight_first + "〜" + ideal.weight_last + "kgぐらいです";
  };

  /*
  	値判定
  	取得した値を数値化判定して数値なら計算
   */
  getValue = function() {
    var height, result, weight;
    result = [];
    height = esc(document.getElementById(height_id).value);
    weight = esc(document.getElementById(weight_id).value);
    height = parseInt(height, 10);
    weight = parseInt(weight, 10);
    if (!height || !weight) {
      result.bmi = '半角数値を入力してください!';
      result.ideal = 'Error!';
      return result;
    } else {
      result.bmi = bmi(height, weight);
      result.ideal = idealweight(height);
      return result;
    }
  };

  /*
  	計算結果を表示
   */
  showResult = function() {
    var ideal, results, total;
    total = getValue();
    results = document.getElementById(results_id);
    ideal = document.getElementById(ideal_id);
    results.innerHTML = "";
    ideal.innerHTML = "";
    results.innerText = total.bmi;
    ideal.innerText = total.ideal;
  };

  /*
  	リセット
   */
  reset = function() {
    document.getElementById(results_id).innerHTML = '?';
    document.getElementById(ideal_id).innerHTML = '?';
  };

  /*
  	HTMLエスケープ処理
   */
  esc = function(str) {
    str = str.replace(/&/g, '&amp;');
    str = str.replace(/</g, '&lt;');
    str = str.replace(/>/g, '&gt;');
    str = str.replace(/"/g, '&quot;');
    str = str.replace(/'/g, '&#39;');
    return str;
  };
  btn = document.getElementById(btn_id);
  resetbtn = document.getElementById(reset_id);
  btn.addEventListener("click", showResult, false);
  resetbtn.addEventListener("click", reset, false);
})();

</script>

</body>
</html>