第 5 回 JavaScript の基本機能 条件分岐が書ける if 文 その2
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
今回は、
前回 よりも少しだけレベルを上げたものを作りましょう。
身長と体重を入力して BMI を算出し、肥満度を表示してみます。
以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。
入力ダイアログについて
今までに、アラートダイアログ alert()
と確認ダイアログ confirm()
を紹介しましたが、今回は入力ダイアログ prompt()
を使います。
入力ダイアログは、文字や数値をいれることができるダイアログで、これに身長と体重を入力してもらうことにします。
BMI の算出
BMI はいわずと知れた肥満度の計算方法です。BMI は次のように計算します。
|
|
この式を、体重を weight 、身長を height として、JavaScript で表すと以下のようになります。
|
|
/
は、四則演算の「÷」を表す演算子で、**
はべき乗(n の 2 乗など)を表す演算子です。
四則演算において「÷(/
)」よりも「べき乗(**
)」の方が、計算の優先度が高いです。
weight / height
よりも先に height ** 2
が計算されるため、次のように height ** 2
を ()
でくくる必要はありません。
|
|
BMI と次の判定基準を照らし合わせて肥満度を判定できます。
|
|
プログラミング
まずは、どういう手順が必要なのかを整理してからプログラミングに移りましょう。
手順は下記が考えられます。条件分岐が発生するのは 4 の項目ですね。
- 身長を入力する入力ダイアログを表示し、身長を入力してもらう。
- 体重を入力する入力ダイアログを表示し、体重を入力してもらう。
- BMI を算出する。
- 算出された BMI を基に肥満度を判定し、表示する。
1 と 2 に関しては次のように書けます。
BMI 算出のために身長と体重をそれぞれ変数に格納しておきます。(次のようにすると入力した値を変数に代入できます)
また、入力はそれぞれメートルとキログラムなので、単位もダイアログに表示します。
|
|
3 の BMI の計算は前節での説明どおり、次のようになります。
計算結果は BMI
変数に格納しておきます。
|
|
4 は、算出した BMI を基に肥満度を判定しますので、前章で学習した if 文を活用します。
|
|
このように if else
文でいくつかの条件分岐を書く場合は、最初にマッチした条件のみが実行される、というのがポイントです。
なので、BMI が 18.5 以下の場合、25 以下の場合、30 以下の場合、それ以外の場合、という風にわけました。
厳密に、次のように書いても同じく動作しますが、タイプ数の少ないほうがミスも少なくわかりやすくなります。
|
|
サンプル実行環境
https://jsfiddle.net/kintone/27vhnxuj/6/
まとめ
最初のうちは if 文の書き方で多少混乱するかもしれませんが、慣れればそこまで難しくはありません。
ただし、=
や >
などの不等式を間違って条件にしてしまうと、意図しない結果になってしまうので、今回の記事のように条件を整理してからプログラミングに入ったほうがよいと思います。