JavaScript(Vue3)でBMI計算

JavaScriptでアクセスすればBMI計算ができるwebページをつくります。

Contents

1 BMIとは？
2 Vue3でコードを書く

BMIとは？

BMIは、「Body Mass Index」の略で体の状態を知る目安となる数値の一つです。肥満の定義にも用いられています。国際的に用いられている世界共通の指数です。

BMIの計算方法は体重（kg）÷身長（m）÷身長（m）です。体重を身長で2回割ればよいです。このとき身長の単位はセンチではなくメートルです。身長が165cmで体重が55kgであるなら 55÷1.65÷1.65＝20.2 となり、BMIは20.2であることがわかります。

BMIをどう評価するかですが、以下の判定表のように判定します。

BMI	判定
18.5未満	低体重
18.5以上25.0未満	普通体重
25.0以上30.0未満	肥満（1度）
30.0以上35.0未満	肥満（2度）
35.0以上40.0未満	肥満（3度）
40.0以上	肥満（4度）

またBMIが22となる体重は標準体重（理想体重）と呼ばれ、統計上最も死亡率・有病率が低いとされています。

ところでBMIは肥満度を示す指標ではありますが、これだけで太っている痩せているを判断するのは危険です。BMIは身長と体重のみで計算した値です。体重が重くてもその原因が体脂肪によるものなのか筋肉によるものなのかはこの指標からはわかりません。しかも体脂肪質よりも筋肉のほうが重いです。

また脂肪のつく部位によって健康へのリスクも変わってきます（皮下脂肪か内臓脂肪か）。なのでこの記事はネタ程度に楽しむのがよさそうです。初学者が条件分岐の学習をするときの教材としてはピッタリです。

Vue3でコードを書く

これまでVue3を学習してきたので、ここではVue3でコードを書くことにします。

v-modelをつかって身長と体重を入力するテキストボックスに入力された文字列が変更されるたびにheightTextとweightTextに保存します。そして計算ボタンが押されたらNumber型に変換してBMIを計算します。もし数値以外の文字列が入力されていた場合は入力が不正である旨のエラーメッセージを表示します。

BMIが計算されたら痩せすぎ太りすぎの判定結果を表示し、大きなお世話かもしれませんが、その人の適正体重も表示させます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>太りすぎチェッカー（BMI計算）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2/dist/vue.global.js"></script>
</head>

<body>

<h1>BMIを計算する</h1>

<div id ="ex1">
    <label>身長（ｃｍ）：</label><input type="text" v-model="heightText"><br>
    <label>体重（ｋｇ）：</label><input type="text" v-model="weightText"><br>
    <button @click="calc()">計算する</button>
    <p>{{bmiText}}</p>
    <p>{{result}}</p>
    <p>{{std}}</p>
</div>

<script>
    Vue.createApp({
        data: function() {
            return {
                heightText : '', // 「身長」に入力された文字列
                weightText : '', // 「体重」に入力された文字列
                bmiText : '', // 計算されたBMIを表示するための文字列
                result : '', // BMIから得られた評価を表示するための文字列
                std : '', // 適正体重を表示するための文字列
            };
        },
        methods:{
            calc(){
				let weight = Number(this.weightText);
				let height = Number(this.heightText) / 100;

                // BMIの公式は 体重（kg）÷身長（m）÷身長（m）
                let bmi = weight / height / height;
                if(isNaN(bmi)){
                    this.bmiText  = '身長と体重は半角数字で入力してください。';
                    this.result = '';
                    this.std = '';
                    return;
                }

                bmi = Math.round(bmi * 10) / 10; 
                this.bmiText  = 'BMIは ' + bmi + ' です。';
                // ① 18.5未満  低体重
                // ② 18.5以上25.0未満  普通体重
                // ③ 25.0以上30.0未満  肥満（1度）
                // ④ 30.0以上35.0未満  肥満（2度）
                // ⑤ 35.0以上40.0未満  肥満（3度）
                // ⑥ 40.0以上  肥満（4度）
                if(bmi < 18.5)
                    this.result = '痩せすぎです';
                else if(bmi < 25.0)
                    this.result = '普通です';
                else if(bmi < 30.0)
                    this.result = '太り気味です';
                else if(bmi < 35.0)
                    this.result = '太っています';
                else if(bmi < 40.0)
                    this.result = '太りすぎです';
                else
                    this.result = 'ヤバいくらいに太りすぎです';

                //標準体重＝身長（m）×身長（m）×22
                let std = height * height * 22;
                std = Math.round(std); 
                this.std = '大きなお世話かもしれませんが、あなたの理想体重は ' + std + 'ｋｇ です。';
            }
        }
    }).mount('#ex1');
</script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>太りすぎチェッカー（BMI計算）</title>

</head>

<body>

<h1>BMIを計算する</h1>

<p>{{bmiText}}</p>

<p>{{result}}</p>

</div>

Vue.createApp({

data: function() {

return {

heightText : '', // 「身長」に入力された文字列

weightText : '', // 「体重」に入力された文字列

bmiText : '', // 計算されたBMIを表示するための文字列

result : '', // BMIから得られた評価を表示するための文字列

std : '', // 適正体重を表示するための文字列

};

methods:{

calc(){

let weight = Number(this.weightText);

let height = Number(this.heightText) / 100;

// BMIの公式は体重（kg）÷身長（m）÷身長（m）

let bmi = weight / height / height;

if(isNaN(bmi)){

this.bmiText = '身長と体重は半角数字で入力してください。';

this.result = '';

this.std = '';

return;

}

bmi = Math.round(bmi * 10) / 10;

this.bmiText = 'BMIは ' + bmi + ' です。';

// ① 18.5未満低体重

// ② 18.5以上25.0未満普通体重

// ③ 25.0以上30.0未満肥満（1度）

// ④ 30.0以上35.0未満肥満（2度）

// ⑤ 35.0以上40.0未満肥満（3度）

// ⑥ 40.0以上肥満（4度）

if(bmi < 18.5)

this.result = '痩せすぎです';

else if(bmi < 25.0)

this.result = '普通です';

else if(bmi < 30.0)

this.result = '太り気味です';

else if(bmi < 35.0)

this.result = '太っています';

else if(bmi < 40.0)

this.result = '太りすぎです';

else

this.result = 'ヤバいくらいに太りすぎです';

//標準体重＝身長（m）×身長（m）×22

let std = height * height * 22;

std = Math.round(std);

this.std = '大きなお世話かもしれませんが、あなたの理想体重は ' + std + 'ｋｇです。';

}

}).mount('#ex1');

</script>

</body>

</html>

BMIとは？

Vue3でコードを書く

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ