cybozu developer network

カテゴリー内の他の記事

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

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


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

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

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

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

入力ダイアログについて

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

shuusei.png

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以下の場合、それ以外の場合、という風にわけました。
厳密に、下記のように書いても同じく動作しますが、タイプ数が少ないほうがミスも少なく解りやすくなります。

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

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Permanently deleted user

お世話になります。

JAVASCRIPT 勉強30分の初心者です。

教えてください。出力の順番ですが、

スクリプトの順番だと

①BMIのLOG

②肥満度をアラートで表示

と思いますが、実行すると

②→①の順番で表示されまます。

些細なことなのですが、もしわかれば教えてくださいませ

 

Avatar
cybozu Development team

どんハマ 様

お世話になっております。cybozu developer network 運営でございます。

jsfiddle上で実行した場合、jsfiddleの仕様上そのようになってしまうようです。
直接ブラウザ上で実際に動作させた場合、ご認識のような実行順になるかと思います。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
学習過程でわからないことなど技術的なご質問はcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

サインインしてコメントを残してください。