jsコードの最適化ができるかどうか
解決したいこと
観点がAAAAまたはAAABの場合の成績を5とする。
みたいなプログラムを書いてみたのですが見づらいので、見やすくする&読み込みスピードを早くする目的でコードの最適化が出来るかどうか知りたいです。
もし出来るのであればサンプルいただけるとありがたいです。
HTML
<h1>数学</h1>
<div class="viewpoint">
<label>数学への関心・意欲・態度</label>
<select class="view" id="math" onchange="onChangeSelect()">
<option value="noSelect">観点を選択してください</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="viewpoint">
<label>数学的な見方や考え方</label>
<select class="view" id="math-a" onchange="onChangeSelect()">
<option value="noSelect">観点を選択してください</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="viewpoint">
<label>数学的な技能</label>
<select class="view" id="math-b" onchange="onChangeSelect()">
<option value="noSelect">観点を選択してください</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="viewpoint">
<label>数量や図形などについての知識・理解</label>
<select class="view" id="math-c" onchange="onChangeSelect()">
<option value="noSelect">観点を選択してください</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="viewpoint">
<label>成績</label>
<p class="view">あなたの成績は<span id="score"></span>です。</p>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
JavaScript
//洗濯更新時のイベント関数を記述する
function onChangeSelect() {
const mathSelected = document.querySelector('#math');//mathのselectタグの要素を取得する
const mathScore = mathSelected.value;//selectタグのvalueプロパティから選択されたoptionタグのvalueの値を取得する
const mathSelecteda = document.querySelector('#math-a')//math-aのselectタグの要素を取得する
const mathScorea = mathSelecteda.value;//selectタグのvalueプロパティから選択されたoptionタグのvalue値を取得する
const mathSelectedb = document.querySelector('#math-b')//math-bのselectタグの要素を取得する
const mathScoreb = mathSelectedb.value;//selectタグのvalueプロパティから選択されたoptionタグのvalue値を取得する
const mathSelectedc = document.querySelector('#math-c')//math-cのselectタグの要素を取得する
const mathScorec = mathSelectedc.value;//selectタグのvalueプロパティから選択されたoptionタグのvalue値を取得する
let score = '';
if (mathScore === 'noSelect' || mathScorea === 'noSelect' || mathScoreb === 'noSelect' || mathScorec === 'noSelect') {
score = '不明'; //未選択がある場合は不明
} else if (mathScore === 'A' && mathScorea === 'A' && mathScoreb === 'A' && mathScorec === 'A' || mathScore === 'A' && mathScorea === 'A' && mathScoreb === 'A' && mathScorec === 'B') {
score = '5';//AAAAまたはAAABの場合は5
} else if (mathScore === 'A' && mathScorea === 'A' && mathScoreb === 'B' && mathScorec === 'B') {
score = '4';//AABBの場合は4
} else if (mathScore === 'A' && mathScorea === 'B' && mathScoreb === 'B' && mathScorec === 'B' || mathScore === 'B' && mathScorea === 'B' && mathScoreb === 'B' && mathScorec === 'B' || mathScore === 'C' && mathScorea === 'B' && mathScoreb === 'B' && mathScorec === 'B') {
score = '3';//ABBBまたはBBBBまたはCBBBの場合は3
} else if (mathScore === 'C' && mathScorea === 'C' && mathScoreb === 'B' && mathScorec === 'B') {
score = '2'//CCBBの場合は2
} else {
score = '1'//他は1
}
document.querySelector('#score').innerHTML = score;
}
自分で試したこと
上記のコードです。
よろしくお願いします。
2