BMI値計算プログラム

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>

Webの仕事をするならJavascriptは必須ですね。

ダウンロード


∞Tadashi Suyama∞

js bmi health web walking running sports 計算
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js bmi health web walking running sports 計算
フッターイメージ