プログラマーが落ち着かなくなるコードを書いてみた #2

どうもお久しぶりです! Atsu1209です。
今日はプログラマーが落ち着かなくなるコード書いてみたの第二弾です!
第一段はこちら↓↓↓

https://qiita.com/Atsu1209jp/items/d4273320d5ce5f690e9a

# 追記
続編を投稿しました 2024/5/16

https://qiita.com/Atsu1209jp/items/b88c5e5ccbf037e76565

# 成人判定
今回は成人を判定するプログラムを作ります。

:::note
方法は 学生かどうか、 年齢などを聞いて行きます。
:::

# HTML
まずフォームを作ります。

:::note warn
ただ成人判定するだけなのでデザインは書きません
:::
```html:index.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>成人判定(クソコード)</title>
    </head>
    <body>
        <form id="form">
            <input id="age">
            <select id="select">
                <option value="not h-school">高校生以下</option>
                <option value="h-school">高校生</option>
                <option value="unv">大学生</option>
                <option value="not-unv">社会人</option>
            </select>
            <button type="sumbit" id="sumbit" onclick="btn()">判定</button>
        </form>
    </body>
</html>
```
かなり適当にhtmlを書きました。ここから学校と年齢から18歳以上かどうかを
判定していきます。

# JavaScript
ここからお待ちかねのJavaScriptを使ったクソコードです!
### まずは普通に書く
まずは動くかどうかのテストJSを書く
```javascript:main.js
const form = document.getElementById("form");
        form.addEventListener("submit", function(event){
            event.preventDefault();
            const select = document.getElementById("select");
            const input = document.getElementById("age");
            const selectValue = select.value;
            const inputValue = input.value;
            alert("年齢" + inputValue + "現在" + selectValue);

        });
```

:::note warn
仕組みとしては
`select`が大学生以上で年齢が18以上であるかどうかを確認する。
:::
:::note alert
判定の仕方からもうクソですがそこは気にしないでください。
:::

ここからクソコードを書いていきます。

### 始める前に
使いやすくhtmlの`option`の`value`を変更します
```html:index.html
    <option value="1">高校生以下</option>
    <option value="2">高校生</option>
    <option value="3">大学生</option>
    <option value="4">社会人</option>
```
### クソコード
では今回は `if文`を使って判定していきます。
```javascript:main.js
var form = document.getElementById("form");
        form.addEventListener("submit", function(event){
            event.preventDefault();
            var ageInput = document.getElementById("age");
            var select = document.getElementById("select");

            var age = parseInt(ageInput.value);
            var status = parseInt(select.value);

           if (status === 4 ) {
                if (age >= 20){ 
                  alert("成人です");
            } else {
                  alert("未成年です");
             }
                } else if (status === 3 ) {
                  if (age >= 18){ 
                    alert("成人です");
                } else {
                    alert("未成年です");
                  }
                } else if (status === 2 ) {
                       if (age >= 18){ 
                          alert("成人です");
                       } else {
                          alert("未成年です");
                       }   
                       } else if (status === 1 ) {
                              if (age >= 20){ 
                                 alert("成人です");   
                              } else {
                                alert("未成年です");
                              }
                            }
       
                      });
```
しれっと `const`を`var`をしておきました
気持ち悪いくらいに`if`をネストしました
せめて`&&`とか`||`をつかってほしいですよね
### パワーアップ
パワーアップするにはコメントアウトを増やしまくったり変数名をローマ字にしたり
などの方法があります。


# 最後に
このクソコードを書いているときなんだか楽しかったです。
たまに息抜きでクソコード書いて遊ぶのもいいかもしれませんね
では