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

著者名:村濱一樹(kintone エバンジェリスト)

目次

information

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

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

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

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

入力ダイアログについて

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

BMI の算出

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

1
体重(kg) ÷ 身長(m)の二乗

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

1
const BMI = weight / height ** 2;

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

1
weight / (height ** 2)

BMI と次の判定基準を照らし合わせて肥満度を判定できます。

1
2
3
4
BMIが 18.5 未満            痩せ型
BMIが 18.5 以上〜 25 未満   標準
BMIが 25 以上 〜 30 未満    太り気味
BMIが 30 以上              肥満

プログラミング

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

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

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

1
2
3
4
5
// 身長を入力するためのダイアログを表示し、身長をheight変数に格納
const height = prompt('あなたの身長(m)を入力してください', '');

// 体重を入力するためのダイアログを表示し、体重をweight変数に格納
const weight = prompt('あなたの体重(kg)を入力して下さい', '');

3 の BMI の計算は前節での説明どおり、次のようになります。
計算結果は BMI 変数に格納しておきます。

1
const BMI = weight / height ** 2;

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// 条件分岐
// BMIが18.5未満         痩せ型
// BMIが18.5以上〜25未満 標準
// BMIが25以上〜30未満   太り気味
// BMIが30以上           肥満

if (BMI < 18.5) {
  alert('あなたは痩せ型です');
} else if (BMI < 25) {
  alert('あなたは標準体型です');
} else if (BMI < 30) {
  alert('あなたは太り気味です');
} else {
  alert('あなたは肥満体型です');
}

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

1
2
3
4
5
6
7
8
9
if (BMI < 18.5) {
  alert('あなたは痩せ型です');
} else if (BMI >= 18.5 && BMI < 25) { // &&をつけることによって18.5以上25以下という複数条件
  alert('あなたは標準体型です');
} else if (BMI >= 25 && BMI < 30) { // &&をつけることによって25以上30以下という複数条件
  alert('あなたは太り気味です');
} else if (BMI > 30) {
  alert('あなたは肥満体型です');
}

サンプル実行環境

https://jsfiddle.net/kintone/27vhnxuj/6/ (External link)

まとめ

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