消費カロリーの逆算Webアプリで学ぶ、HTMLでの分数表記

## 健康診断にて...
日頃からデスクワークばかりだと運動不足になりますよね。
自分もエンジニア兼DTPオペレーターという二重職種ですが、デスクワークであることには変わりなく、運動不足です。
運動不足でもお腹は減り、お酒は増え、**体脂肪も増量する**ものです。

20代のころは健康診断でも先生に「ちょっと太り気味なので、運動してくださいねー」と軽く注意される程度でした。

**てへぺろ☆(・ω<)**
で許されていました。

ところが、30代になった途端に**「このままだとヤバいよ」**と軽く怒れます…。

もちろん、
**てへぺろ☆(・ω<)**
と茶目っ気を見せても**「運動しましょうねー」**とあしらわれてしまします。

これはいよいよ、**物理的にも重い腰**を上げる時が来たようです...。

## ダイエット　はじめました
今はデスクワークバリバリの自分ですが、学生時代はラグビー部所属の**もやし型体育会系**でした。
**筋トレやマラソンは大嫌い**ですが、**痩せる原理**は痛感してます。

それは...


## 「消費カロリー＞摂取カロリー」であること
**それだけです。**

**消費カロリー ＞ 摂取カロリー ＝ 痩せる**
**消費カロリー ＜ 摂取カロリー ＝ 太る**

**たった、それだけです。**

「これをお腹に巻くだけ！」
「食事にこれを加えるだけ！」なんてのは**幻想です。都合のいい夢を見るのは、諦めましょう。**
<font color=lightgray>と言いつつ、自分も「**たった、それだけです。**」と言っている...</font>
※詳細は[Testosterone氏](https://twitter.com/badassceo)の著書にお任せします。

なので、消費カロリーと摂取カロリーを把握する必要があります。
摂取カロリーは[ググれば](https://www.google.com/search?q=%E9%A3%9F%E4%BA%8B+%E3%82%AB%E3%83%AD%E3%83%AA%E3%83%BC%E8%A1%A8)簡単に分かります。
一方、消費カロリーも[計算サービス](https://keisan.casio.jp/exec/system/1161228741)やアプリがたくさんあります。

**しかし...**


## カロリー計算ツールは「消費したカロリー」ばっかり
忙しい現代人にとって運動する時間は貴重です。
しかし、どの計算サービスも「運動して消費したカロリー」**という結果ばかり。**

**「どれぐらい運動したら、摂取カロリーを清算できるか」**がわかったら計画が立てやすいのに...

また、
「今日も頑張って走ったのに、**たったの200kcal**か...」
となると、モチベーションも下がってきます。

やはり、**消費したいカロリーから運動時間を知りたい...。でもわからない...。**


## 無いのなら　作ってしまえ　ホトトギス
#### [作りました。](https://kahiro-m.github.io/ConvKcal/)

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310125/68bf2a72-4827-947a-86e5-8ae276a718a7.png)
「消費したいカロリー」と「運動強度(種類)」と「体重」から運動時間を逆算できます。
トップページに**分数表記された**計算式も書いていますね。



## ようやく分数表記の話か...
通常、htmlで分数表記をしようとすると、

```.html
<body>
分子/分母
</body>
```

と書くしかなく、
**消費カロリー(kcal) / (1.05 * METs * 体重(kg) )**
のようになります。

あるいは、[MathML](https://www.w3.org/standards/webdesign/math.html)に準拠した記述にするという手段もありますが、**[対応ブラウザが少ない](https://caniuse.com/#search=math)**という問題があります。

なので、対応していないブラウザのために、今回は[MathJax™](https://www.mathjax.org/)を使います。
CDNがあるので、以下の記述をhtmlに追加するだけで[MathML](https://www.w3.org/standards/webdesign/math.html)に準拠した記述をサポートしてくれます。

```.html
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
```

まずは数式表記をすることを示すため、`<math>`タグでくくります。

```.html
<math>
  ここに数式
</math>
```

次に、分数表記をする箇所を`<mfrac>`タグでくくります。

```.html
<math>
　<mfrac>
  　ここに分数表記
　</mfrac>
</math>
```
この中に書かれたタグが分子→分母の順で認識されます。
分子と分母をそれぞれ、`<mi>`(識別子や文字)タグ、`<mn>`(数値)タグでくくります。

```.html
<math>
  <mfrac>
    <mi>
      ここに分子（文字）
    </mi>
    <mn>
    　ここに分母（数値）
    </mn>
　</mfrac>
</math>
```
分子と分母が複数の数値や文字で成り立っている場合、`<mrow>`タグでくくることで、グループであることを明記します。

つまり、最終的には

```.html
<math>
  <mi>運動時間(h)</mi>
  <mo>＝</mo> 
  <mfrac>
    <mi>
      消費カロリー(kcal)
    </mi>
    <mrow>
      <mn>1.05</mn>
      <mo>&times;</mo>
      <mi>運動強度(METs)</mi>
      <mo>&times;</mo>
      <mi>体重(kg)</mi>
    </mrow>
  </mfrac>
</math>
```
こうなります。

### その他の部分に関して
プルダウンメニュー(select要素)はbodyの読み込み時にjs上に記載したクラスから生成しています。
詳細は[こちら](https://qiita.com/Kahiro-M/items/6327b19f063d7ec083d3)。

そして、今回の肝である運動時間の計算は結構シンプルです。

```計算部分.js
// 運動時間を計算するクラス
class Culc{
  constructor(kcal,METs,Weight){
    // 消費カロリー(kcal) ＝ 1.05 * METs * 体重(kg) * 運動時間(h)
    var kcalObj = document.getElementById(kcal);
    var METsObj = document.getElementById(METs);
    var WeightObj = document.getElementById(Weight);
    this.kcal = kcalObj.value;
    this.METs = METsObj.value;
    this.Weight = WeightObj.value;
    this.coefficient = 1.05;
  }
  
  culcWorkoutTime(){
    // 運動時間(h) ＝ 消費カロリー(kcal) / (1.05 * METs * 体重(kg) )
    var workouttime = this.kcal / (this.coefficient * this.METs * this.Weight);
    console.log("運動時間:",workouttime);
    return (workouttime);
  }
}
```

ちなみに、本アプリのリポジトリは
https://github.com/Kahiro-M/ConvKcal.git
です。
ご自由に改造してください。

## そして、ダイエット開始から半年が経ち...
### 無事、-5kg減量できました。
**やったぜ！**