遅ればせながら、みなさま、明けましておめでとうございます。
久々の記事投稿となりますが、私はまだ元気にプログラミング勉強を続けております。
現在は苦手意識のあったJavaScriptを主に勉強しています。
大まかな書き方はある程度理解しているつもりですが、DOM操作が覚えられず悪戦苦闘しています。
とはいえちょっとずつ覚えてきているのである程度描けるようになったらJSのフレームワークにチャレンジですね。
そこで、勉強も兼ねて花札の点数計算ツールを作っているのですが、一生懸命調べながら書いた俺の初JSとGPTに簡略化してもらったコードを見てください。
対戦回数をselectタブで選択すると、その回数に応じて対戦月のメニューが表示されるコード。
俺の書いたJS
let select = document.querySelector("select[name=battle-number]");
select.onchange = Event => {
if(select.selectedIndex === 1) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "none";
document.querySelector(".march-wrapper").style.display = "none";
document.querySelector(".april-wrapper").style.display = "none";
document.querySelector(".may-wrapper").style.display = "none";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 2) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "none";
document.querySelector(".april-wrapper").style.display = "none";
document.querySelector(".may-wrapper").style.display = "none";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 3) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "none";
document.querySelector(".may-wrapper").style.display = "none";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 4) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "none";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 5) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 6) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 7) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 8) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 9) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "";
document.querySelector(".september-wrapper").style.display = "";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 10) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "";
document.querySelector(".september-wrapper").style.display = "";
document.querySelector(".october-wrapper").style.display = "";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 11) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "";
document.querySelector(".september-wrapper").style.display = "";
document.querySelector(".october-wrapper").style.display = "";
document.querySelector(".november-wrapper").style.display = "";
document.querySelector(".december-wrapper").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 12) {
document.querySelector(".game-numbers").style.display = "";
document.querySelector(".january-wrapper").style.display = "";
document.querySelector(".february-wrapper").style.display = "";
document.querySelector(".march-wrapper").style.display = "";
document.querySelector(".april-wrapper").style.display = "";
document.querySelector(".may-wrapper").style.display = "";
document.querySelector(".june-wrapper").style.display = "";
document.querySelector(".july-wrapper").style.display = "";
document.querySelector(".august-wrapper").style.display = "";
document.querySelector(".september-wrapper").style.display = "";
document.querySelector(".october-wrapper").style.display = "";
document.querySelector(".november-wrapper").style.display = "";
document.querySelector(".december-wrapper").style.display = "";
document.querySelector(".hanafuda-total-result").style.display = "";
} else if(select.selectedIndex === 0) {
document.querySelector(".game-numbers").style.display = "none";
document.querySelector(".hanafuda-total-result").style.display = "none";
} else {
document.querySelector(".january-wrapper").style.display = "none";
document.querySelector(".february-wrapper").style.display = "none";
document.querySelector(".march-wrapper").style.display = "none";
document.querySelector(".april-wrapper").style.display = "none";
document.querySelector(".may-wrapper").style.display = "none";
document.querySelector(".june-wrapper").style.display = "none";
document.querySelector(".july-wrapper").style.display = "none";
document.querySelector(".august-wrapper").style.display = "none";
document.querySelector(".september-wrapper").style.display = "none";
document.querySelector(".october-wrapper").style.display = "none";
document.querySelector(".november-wrapper").style.display = "none";
document.querySelector(".december-wrapper").style.display = "none";
}
}
GPTが簡略化したJS
let select = document.querySelector("select[name=battle-number]");
let wrappers = document.querySelectorAll(".january-wrapper, .february-wrapper, .march-wrapper, .april-wrapper, .may-wrapper, .june-wrapper, .july-wrapper, .august-wrapper, .september-wrapper, .october-wrapper, .november-wrapper, .december-wrapper");
select.onchange = () => {
let selectedIndex = select.selectedIndex;
// すべての要素を非表示にする
wrappers.forEach(wrapper => wrapper.style.display = "none");
// 選択された数分だけ表示
for (let i = 0; i < selectedIndex; i++) {
wrappers[i].style.display = "";
}
// `.game-numbers` と `.hanafuda-total-result` の表示制御
let isVisible = selectedIndex > 0;
document.querySelector(".game-numbers").style.display = isVisible ? "" : "none";
document.querySelector(".hanafuda-total-result").style.display = isVisible ? "" : "none";
};
すげえ…。
俺の書いたコードはさすがに冗長だしもっと簡略化できるんだろうと考えていましたが俺の頭では思い浮かばず…。 それにこんな短くできるのか…。
でもちゃんと動いてはいたので初めてにしてはヨシ！
これからもっと複雑になりそうな他の機能含め勉強を進めていきます。
頑張るぞ！