tech1000+

プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

【JavaScript 1-2】 BMI計算プログラムを作る

  • 2017年4月22日
  • 2020年6月14日
  • JavaScript
  • 3612view
  • 1件
JavaScript
目次

はじめに

簡単なプログラム入門として、JavaScriptでBMIを求めるプログラムを作成する。
自分の体重・身長を入れるとBMIが返ってくるシンプルなプログラムを、簡単な書き方、少し慣れた後の書き方の２通り書いていく。

準備

エディターを用意する

自分が使いやすいと思うエディターを用意しておく。
【高機能エディタ】 ATOMが一番使いやすいかもしれない

用意するファイルとディレクトリ構成

htmlファイルとjsファイルを別々に使うので、以下のようなディレクトリ構成としておく

┣ index.html
┗ js
┗app.js

１．簡単な書き方

index.html

<!DOCTYPE html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" href="css/style.css"><head>
<body>
<script src="js/app.js"></script>
</body>
</html>

js/app.js

var weight; 
weight = prompt('BMIの計測。体重(kg)を教えて下さい'); 
var height; height = prompt('身長(m)を教えて下さい'); var bmi = weight / (height * height); 
var message = 'BMIは' + bmi + 'です'; 
alert(message);

解説

index.html(9)

<script src="./js/app.js"></script>

外部ファイルに書いたJavaScriptはhtmlで読み込んであげる

js/app.js(1～4)

var weight; 
weight = prompt('BMIの計測。体重(kg)を教えて下さい'); 
var height; 
height = prompt('身長(m)を教えて下さい');

varで体重と身長の値を保持するための変数を宣言
prompt()でダイアログによる入力を受け付ける

js/app.js(5～7)

var bmi = weight / (height * height);
var message = 'BMIは' + bmi + 'です';
alert(message);

bmiの計算は体重割る身長の二乗なので、演算子を使って計算する
計算した結果をvar bmiに格納。
alert()でダイアログで結果を表示する。

演算子についてはこちら

結果

２．少し慣れた後の書き方

上記のプログラムを少し改善したものを作ってみる。改善点は以下
・ちょっとはアプリらしく、ダイアログではなく画面で操作できるように変更
・JavaScriptの書き方を改善
・身長がm単位で入力しなければいけない部分を改善
・望んでいない値が入ってきたときの規制を入れる

index.html

<!DOCTYPE html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<main class="container mt-5">
<div class="row justify-content-center">
<form class="form-inline">
<div class="form-group col-4">
<label>身長を入力</label>
<input type="text" class="form-control" id ="height" placeholder="例：175"</input>
</div>
<div class="form-group col-4">
<label>体重を入力</label>
<input type="text" class="form-control" id ="weight" placeholder="例：65"></input>kg</div>
<div class="form-group col-4">
<button type="button" class="btn btn-primary" id="submit">計算開始</button>
</div>
</form>
<div class="col-8 mt-5">
<div class="alert alert-primary">結果：<Span id="result"></Span>
</div>
</div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
</body>
</html>

js/app.js

$('#submit').on('click',function(){
     let weight, 
     height, bmi;
     weight = $("#weight").val();
     height = $("#height").val() *0.01;      
     if($.isNumeric(weight) && $.isNumeric(height)){             
         bmi =  weight / (height * height);
         bmi = Math.round(bmi * 100)/100;
         $("#result").text(bmi);
     } else {
         $("#result").text("入力値が正しくありません")     }    
     });

解説

index.html(6,30~33)
画面を簡単に作ることができるようにbootstrap4を読み込んでいる。
ここではJavaScriptの説明の為割愛。

index.html(15,19,26)

 
<form class="form-inline">
<div class="form-group col-4">
<label>身長を入力</label>
<input type="text" class="form-control" id ="height" placeholder="例：175"</input>
</div>
<div class="form-group col-4">
<label>体重を入力</label>
<input type="text" class="form-control" id ="weight" placeholder="例：65"></input>kg</div>
<div class="form-group col-4">
<button type="button" class="btn btn-primary" id="submit">計算開始</button>
</div>
</form>
<div class="col-8 mt-5">
<div class="alert alert-primary">結果：<Span id="result"></Span>
</div>

JavaScript(jQuery)で値を取得、表示させる為に各々にidを付与しておく

js/app.js(1)

$('#submit').on('click',function(){ ~~ });

jQueryの表記の仕方で、上記の様に書くとsubmitと付いたidをクリックした時の挙動を加えることができる。classで取得する際は「$(‘.submit’)」のように書く。

js/app.js(2)

let weight, 
height, bmi;

変数を続けて宣言するときにはvarやletを省略することができる。
簡単な書き方ではvarを使ったが、ここではletを使った。
varとletの使い分けについては以下で。
もう迷いたくない。基本のjavascriptサマリー

js/app.js(4)

height = $("#height").val() *0.01;

身長の値をｍ単位で記入しないと正しいBMIが出なかったので、cm単位で入力して、受け手のJavascript側でm単位に直すように修正している。

js/app.js(6~12)

if($.isNumeric(weight) && $.isNumeric(height)){     }

入力値が空でも、文章でも処理を続行するため、その結果Numが返ってきてしまうのを修正。
if(){~~}
もし～だったら、という条件に応じた処理をするときに利用。
$.isNumeric()で数値かどうかを判断している。
フォームから受け取った数値は文字列として受け取ってしまうが、isNumeric()の場合文字列での数値も許容してくれる。
「&&」で身長が数字で、かつ、体重が数字という条件にしている。

js/app.js(8)

bmi = Math.round(bmi * 100)/100;

小数点以下を２桁で揃えるように、第三位で四捨五入をしている。
bmiの値を100倍することで小数点を２つずらし、Math.round()で四捨五入をする。
そのうえでズラした少数点を戻すことで小数点以下２桁に揃えることができる。

js/app.js(10)

else {
         $("#result").text("入力値が正しくありません")
     }

if文の条件式がtrueじゃない、当てはまらないときの処理を書きたい場合はif~の後にelse~と繋げて処理を書く。

結果

最後に

変数varの使い方について

もう迷いたくない。基本のjavascriptサマリー