Q&A
どういうところが煩雑だと思ったか、また気になる箇所など、もう少し具体的に聞くと回答を得られやすいかと。
前提・実現したいこと
Javascriptを用いてのリファクタリング
基礎的な学習を終えた（ドットインストール様で有料javascriptコースを終えた程度）駆け出しです。
変数・条件分岐を用いて簡単な食事管理のページを実装いたしました。
自分の思う様には動いてくれているのですが、コードが煩雑でスッキリさせたいと思っています。
どの様に考えるとスッキリとしたコードが書けるのか、ご意見を頂戴したいです。
よろしくお願いします。
該当のソースコード
html
1<body> 2 <section id="couse"> 3 <fieldset> 4 <legend>あなたの性別は？</legend> 5 <label><input type="radio" value="male" name="genders" checked>男性</label><br> 6 <label><input type="radio" value="female" name="genders">女性</label><br> 7 </fieldset> 8 9 <label for="age"><p>あなたの年齢は？</p></label> 10 <input type="text" name="age" id="age">才 11 <label for="weight"><p>あなたの体重は？</p></label> 12 <input type="text" name="weight" id="weight">kg 13 <label for="height"><p>あなたの身長は？</p></label> 14 <input type="text" name="height" id="height">cm 15 <label for="bodyFat"><p>あなたの体脂肪率は？</p></label> 16 <input type="text" name="bodyFat" id="bodyFat">% 17 <fieldset> 18 <legend>あなたの運動頻度は？</legend> 19 <label><input type="radio" value="1.2" name="movements" checked>ほとんど運動しない </label><br> 20 <label><input type="radio" value="1.375" name="movements">週1.2程度の運動 </label><br> 21 <label><input type="radio" value="1.55" name="movements">週3.4程度の運動 </label><br> 22 <label><input type="radio" value="1.725" name="movements">週5.6程度の運動 </label><br> 23 <label><input type="radio" value="1.9" name="movements">毎日運動＋肉体労働 </label><br> 24 </fieldset> 25 <button id="showResult">結果を表示する</button> 26 </section> 27 <section id="result"> 28 <div>年齢：<span id="ageResult"></span>才</div> 29 <div>体重：<span id="weightResult"></span>kg</div> 30 <div>身長：<span id="heightResult"></span>cm</div> 31 <div>体脂肪率：<span id="bodyFatResult"></span>%</div> 32 <div>基礎代謝：<span id="bmrResult"></span>kcal</div> 33 <div>運動代謝：<span id="tdeeResult"></span>kcal</div> 34 <div>必要なタンパク質：<span id="proteinResult"></span>g</div> 35 <div>必要な脂質：<span id="fatResult"></span>g</div> 36 <div>必要な炭水化物：<span id="carboResult"></span>g</div> 37 38 </section> 39 <script src="main.js"></script> 40</body> 41
javascript
1'use strict'; 2{ 3 4 const showResult = document.getElementById('showResult'); 5 //clickされたら処理を始めていく 6 showResult.addEventListener('click',()=>{ 7 //年齢の取得 8 const age = document.getElementById('age').value; 9 const ageResult = document.getElementById('ageResult'); 10 ageResult.textContent = age; 11 12 //体重の取得 13 const weight = document.getElementById('weight').value; 14 const weightResult = document.getElementById('weightResult'); 15 weightResult.textContent = weight; 16 17 //身長の取得 18 const height = document.getElementById('height').value; 19 const heightResult = document.getElementById('heightResult'); 20 heightResult.textContent = height; 21 22 //体脂肪の取得 23 const bodyFat = document.getElementById('bodyFat').value; 24 const bodyFatResult = document.getElementById('bodyFatResult'); 25 bodyFatResult.textContent = bodyFat; 26 27 28 // 基礎代謝(BMR)の計算 29 const genders = document.getElementsByName('genders'); 30 let bmr; 31 //性別の判定 32 //genders[0].checked(選択肢が男性)がtrueなら以下の処理、女性なら下の処理 33 if(genders[0].checked){ 34 bmr = 13.397 * weight + 4.799 * height - 5.677 * age +88.362; 35 const bmrResult = document.getElementById('bmrResult'); 36 bmrResult.textContent = Math.round(bmr); 37 console.log('a'); 38 }else{ 39 bmr = 9.247 * weight + 3.098 * height - 4.33 * age +447.593; 40 const bmrResult = document.getElementById('bmrResult'); 41 bmrResult.textContent = Math.round(bmr); 42 } 43 44 45 //運動習慣の取得 46 const movements = document.getElementsByName( "movements" ); 47 let moveValue = 0; 48 movements.forEach(movement=>{ 49 if(movement.checked){ 50 moveValue = movement.value; 51 } 52 }); 53 54 //運動代謝(TDEE)の計算 55 const tdee = bmr * moveValue; 56 const tdeeResult = document.getElementById('tdeeResult'); 57 tdeeResult.textContent = Math.round(tdee); 58 59 //タンパク質の計算 60 const protein = weight * (100 - bodyFat) /100 * 2.5; 61 const proteinResult = document.getElementById('proteinResult'); 62 proteinResult.textContent = Math.round(protein); 63 //脂質の計算 64 const fat = weight * (100 - bodyFat) /100 * 0.9; 65 const fatResult = document.getElementById('fatResult'); 66 fatResult.textContent = Math.round(fat); 67 //炭水化物の計算 68 const proteinCalory = protein * 4; 69 const fatCalory = fat * 9; 70 const carboCalory = tdee - proteinCalory - fatCalory; 71 const carbo = carboCalory / 4; 72 const carboResult = document.getElementById('carboResult'); 73 carboResult.textContent = Math.round(carbo); 74 }); 75} 76
ご返信ありがとうございます。
私としてconstの数が多い様に思いました。
また、必要になる時に都度呼び出しておりましたので、パッと見た時にわかりずらいのではないかと思いました。
回答1件
0
ベストアンサー
＞ どの様に考えるとスッキリとしたコードが書けるのか
HTMLを書き換える部分と、配列などのデータ処理部分を分けられないかを考えます。
理由はデータ処理部分 を使いまわせるからです。
ご質問に示されている HTMLを書き換える部分はネイティブ実装で書くとコードが長くなりますよね。
もっと、労力を抑えたいということで、昔から jQuery の略記できる特徴が愛されていましたし、マークアップと関連処理を書くだけで済むような今日のフレームワーク(ReactやVue)が人気なのだと思います。
そういう意味で、外部ライブラリやフレームワークのソースを追いかけてみることも視野にいれます。
（基礎固めを進めながら、ゆっくりで良いと思います）。
追記）
最初は document.getElementById など。要素の取得メソッドが煩雑さを感じることになります。
jQueryモドキな要素取得ができるような ユーザ関数を考えるだけでも煩雑さは軽減できるかもしれません。
javascript
1const qs = selector => document.querySelector(selector); 2const qsa = selector => document.querySelectorAll(selector);
※ Zepto.js（gitHubを参考）を引用したコードです。
（当時のスマホ向けにjQuery互換の軽量ライブラリをつくろうというコンセプト）。
投稿2020/05/26 03:47
編集2020/05/26 04:07
総合スコア5434
ご回答頂きありがとうございます。
HTMLの書き換え部分とデータ処理部分を分けて考える様にされるんですね！
今は基礎固めからという事でフレームワークは無しで考えていたのですが、色々作ってみてから今後の学習方針にしっかり反映させたいと思います。
ありがとうございました！
あなたの回答
tips
プレビュー
