fina_intel
@fina_intel (fina Intel)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

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

4Answer

@monaka_ben_mezd さんの考え方をベースに。

const scorePatterns = {
	AAAA: "5",
	AAAB: "5",
	AABB: "4",
	ABBB: "3",
	BBBB: "3",
	CBBB: "3",
	CCBB: "2"
};
const unknownScore = "不明";
const defaultScore = "1";

function onChangeSelect() {
	const q = s => document.querySelector(s);

	const scores = [
		q('#math').value,
		q('#math-a').value,
		q('#math-b').value,
		q('#math-c').value,
	];

	let score;
	if (scores.includes('noSelect')) {
		score = unknownScore;
	} else {
		const pattern = scores.join('');
		if (pattern in scorePatterns) {
			score = scorePatterns[pattern];
		} else {
			score = defaultScore;
		}
	}
	q('#score').innerHTML = score;
}
2Like

Comments

  1. @fina_intel

    Questioner

    解答ありがとうございます。
    こちらもわかりやすくてとても参考になります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some
someメソッドで短くかけるところ

if (mathScore === 'noSelect' || mathScorea === 'noSelect' || mathScoreb === 'noSelect' || mathScorec === 'noSelect') {



if ([mathScore, mathScorea, mathScoreb, mathScorec].some(score => score === 'noSelect'))

あといっそのことスコアを一つの文字列にまとめるとコードが見やすくなるかもしれません。

const scoreString = mathScore + mathScorea + mathScoreb + mathScorec;

......

  } else if (['AAAA', 'AAAB'].some(s => scoreString)) {
    score = '5';//AAAAまたはAAABの場合は5
  } else if (scoreString === 'AABB') {
    score = '4';//AABBの場合は4
  } else if (['AABB', 'BBBB', 'CBBB'].some(s => scoreString)) {
    score = '3';//ABBBまたはBBBBまたはCBBBの場合は3
  } else if (scoreString === 'CCBB') {
    score = '2'//CCBBの場合は2
  } else {
    score = '1'//他は1
  }
1Like

解答ありがとうございます。
someメソッドというのがあるのですね。

とても見やすいです!!
someメソッドの分かり易い使い方が調べても出で来なかったのでもう少し調べてみます!!

1Like

質問ですが、このプログラムはBAAAなどの場合、scoreが1となりますが、これはバグではありませんか?

0Like

Comments

  1. @fina_intel

    Questioner

    各観点によって成績に反映される割合が違いますのでバグではありませんが、BAAAの場合は不明になっていないといけないので結果的には要修正です。
    指摘ありがとうございます。

Your answer might help someone💌