[Q&A] jsコードの最適化ができるかどうか

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;
  }

自分で試したこと

上記のコードです。
よろしくお願いします。

4Answer

@nagtkk posted at 2021-01-05

@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

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

@monaka_ben_mezd posted at 2021-01-03

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

@fina_intel posted at 2021-01-03

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

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

1Like

@javaboy posted at 2021-01-04

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

0Like

Comments

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

jsコードの最適化ができるかどうか

解決したいこと

HTML

JavaScript

自分で試したこと

4Answer

Comments

Comments

Your answer might help someone💌

Popular Questions