JavaScriptでアクセスすればBMI計算ができるwebページをつくります。
VIDEO
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 >
鳩でも分かるC#管理人からのお願い
できる仕事であれば請け負います。鳩でもわかるC#管理人はクラウドワークスに在宅ワーカーとして登録しています。お仕事の依頼もお待ちしております。
⇒ 仕事を依頼する
コメントについて
コメントで英語などの外国語でコメントをされる方がいますが、管理人は日本語以外はわからないので基本的に内容が理解できず、承認することもありません。それからへんな薬を売っているサイトやリンク先のサイトが存在しないというスパムコメントも多々あります。
Some people make comments in foreign languages such as English, but since the manager does not understand anything other than Japanese, he basically cannot understand the content and does not approve it. Please use Japanese when making comments.
そんななか日本語のコメントもいただけるようになりました。「○○という変数はどこで宣言されているのか？」「××というメソッドはどこにあるのか」「例外が発生する」「いっそのことソース丸ごとくれ」という質問ですが、管理人としては嬉しく思います。「自分が書いた記事は読まれているんだな」と。疑問点には可能な限り答えます。記事に問題があれば修正いたします。
そのうえでお願いがあります。「匿名」という味も素っ気もない名前ではなく、捨てハンでいいのでなにかハンドルネームをつくってほしいと思います。
管理人のモチベーションアップのために
よろしければご支援お願いします。
⇒ 管理人の物乞いリスト
