JavaScriptでアクセスすればBMI計算ができるwebページをつくります。
Contents
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が計算されたら痩せすぎ太りすぎの判定結果を表示し、大きなお世話かもしれませんが、その人の適正体重も表示させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!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> |
