はじめようJavaScript第5回 JavaScriptの基本機能 条件分岐が書けるif文 その2

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう JavaScript

（著者：kintone エバンジェリスト 村濱 一樹）

今回は、前回よりも少しだけレベルを上げたものを作りましょう。身長と体重を入力してBMIを算出し、肥満度を表示してみます。

ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/

※記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じてご利用ください。

入力ダイアログについて

今までに、アラートダイアログ alert() と確認ダイアログ confirm() を紹介しましたが、今回は入力ダイアログ prompt() を使います。
入力ダイアログは、文字や数値をいれることができるダイアログで、これに身長と体重を入力してもらうことにします。

BMIの算出

BMIは言わずと知れた肥満度計算方法です。BMIは下記のように計算します。

この式を、体重を weight 、身長を height として、JavaScriptで表すと以下のようになります。

/ は、四則演算の「÷」を表す演算子で、**はべき乗（○○の2乗など）を表す演算子です。
四則演算の「÷(/)」よりも「べき乗(**)」の方が計算の優先度が高いので、weight / heightよりも先にheight ** 2が計算されます。
そのため、weight / (height ** 2)のように、height ** 2を()でくくる必要はありません。

BMIと下記の判定基準を照らし合わせて肥満度を判定することができます。

プログラミング

まずは、どういう手順が必要なのかを整理してからプログラミングに移りましょう。
手順は下記が考えられます。条件分岐が発生するのは4の項目ですね。

1. 身長を入力する入力ダイアログを表示し、身長を入力してもらう
2. 体重を入力する入力ダイアログを表示し、体重を入力してもらう
3. BMIを算出する
4. 算出されたBMIを基に肥満度を判定し、表示する

1と2に関しては下記のように書けます。
BMI算出のために身長と体重をそれぞれ変数に格納しておきます。(下記のようにすると入力した値を変数に代入することができます。)
また、入力はそれぞれメートルとキログラムなのでそれもダイアログに表示するようにします。

3のBMIの計算は前節での説明どおり、下記のようになります。計算結果をBMI変数に格納しておくことにします。

4は、算出したBMIを基に肥満度を判定しますので、前章で学習したif文を活用します。

このようにif else文でいくつかの条件分岐を書く場合は、最初にマッチした条件のみが実行される、というのがポイントです。
なので、BMIが18.5以下の場合、25以下の場合、30以下の場合、それ以外の場合、という風にわけました。
厳密に、下記のように書いても同じく動作しますが、タイプ数が少ないほうがミスも少なく解りやすくなります。

• サンプル実行環境
  https://jsfiddle.net/kintone/27vhnxuj/6/

if文の扱いは、最初は多少混乱するかもしれませんが、慣れればそこまで難しくはありません。
ただし、＝や＞などの不等式を間違って条件にしてしまうと、意図しない結果になってしまうので、今回の記事のように条件を整理してからプログラミングに入ったほうがよいと思います。

<<はじめようJavaScript第4回 JavaScriptの基本機能 条件分岐が書けるif文 その1 | はじめようJavaScript第6回 JavaScriptの基本機能 繰り返し処理をする for文>>