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

サイト内検索

最近の投稿

アイキャッチ
姫路セントラルパークに行ってきた感想

さて久しぶりになりましたが連休中に姫路市に行って参りました。太陽公園と姫路セントラルパークを2日かけて回りましたが姫路セントラルパークに関しては1日では足りないぐらいかもしれないです。ここは遊園...

12 May 2019

アイキャッチ
これは楽!iterm2パスワードマネージャー機能

さて今回はiterm2のパスワード管理についてです。そもそもこんな機能がついていること自体知らなかったのでこれ使って楽だなと思ったのでご紹介します。 iterm2の現在時点での最新バージョンは...

30 Mar 2019

アイキャッチ
JavaScriptライブラリデータベースのご紹介

さて今回はJSライブラリーのデータベースをご紹介したいと思います。知っている方が多いかと思いますがライブラリやプラグイン、フレームワークなど探す際には役立つサイトではないでしょうか。 どのJS...

28 Mar 2019

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

著者

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

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

タグクラウド

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