古いJavaScript「おみくじ」を新しいECMAScriptで書き換え

2024年9月 9日

サイト開設時(2008年)に、トップページに、毎日ひける「おみくじ」を一時期、設置していました。
おみくじは「JavaScript 1.2」で記述してたので、今更ながら、これを現在のJavaScript（ECMAScript 6以降）で書き直してみました。

毎日チェック！！(古いバージョン)

毎日チェック！！(新しいバージョン)

新旧並べてみました。
わたしのPC環境では、どちらも正常に動作しました。
コードと変更点は以下のとおりです。

古いコード


<form name="KUJI">
    <table border="0" cellpadding="2" cellspacing="2" width="170" bgcolor="#efefff">
        <tr>
            <td align="center" width="90" >
                <font size="-1">今日の運勢は</font><br>
                <img src="初期画像" name="kuji_pic" width="70" height="70" border="0"><br>
            </td>
            <td align="center" width="80" >
                <input type="text" name="kuji_box" size="8" maxlength="8"><br>
                <input type="button" name="kuji_button" value="占う！" onClick="Start()">
                <noscript>
                    <nobr><font size="-1" color="red"><br>
                    *JavaScriptを<br>有効にしてね。</font></nobr>
                </noscript>
            </td>
        </tr>
    </table>
</form>

<script type = "text/javascript" language="JavaScript 1.2">
<!--
    function Start(){
        if(document.KUJI.kuji_box.value != "") {
        document.KUJI.kuji_box.value = "１日１回"}
        else {OmikujiStart()}
    }
    
    function OmikujiStart(){
        var x = 1;
        var y = 10;
        var m = Math.floor(Math.random()*(y-x+1))+x;
        if(m==1) {document.KUJI.kuji_box.value="大吉"}
        else if(m==2) {document.KUJI.kuji_box.value = "大吉"}
        else if(m==3) {document.KUJI.kuji_box.value = "中吉"}
        else if(m==4) {document.KUJI.kuji_box.value = "中吉"}
        else if(m==5) {document.KUJI.kuji_box.value = "小吉"}
        else if(m==6) {document.KUJI.kuji_box.value = "吉"}
        else if(m==7) {document.KUJI.kuji_box.value = "吉"}
        else if(m==8) {document.KUJI.kuji_box.value = "末吉"}
        else if(m==9) {document.KUJI.kuji_box.value = "凶"}
        else {document.KUJI.kuji_box.value = "大凶"}
        document.kuji_pic.src = "画像のパス"+m+".jpg";}
    //-->
</script>

古いコードの特徴

・<script>タグにlanguage="JavaScript 1.2"が指定されています。
かつては複数のJavaScriptバージョンが混在していたため、どのバージョンを使っているかを明示する必要がありましたが、現在ではlanguage属性は廃止されています。

・onClick="Start()"でインラインで関数を呼び出しています。
これは今でも有効ですが、現在ではイベントリスナー（addEventListener）を使うのが普通です。

・フォーム要素にアクセスするために、フォーム名KUJIを使ってdocument.KUJIと書かれています。
この方法は、かつては標準的でしたが、現在では非推奨です。

・<noscript>タグは、JavaScriptが無効な場合のフォールバックとして使用されています。
これは現在も使われますが、JavaScriptがデフォルトで有効になっている環境が一般的なため、あまり重要ではなくなってきています。

新しいコード


<form id="KUJI">
    <table>
        <tr>
            <td>
                <span>今日の運勢は</span><br />
                <img src="ahiru.jpg" id="kuji_pic" alt="アヒルの顔">
            </td>
            <td>
                <input type="text" id="kuji_box" maxlength="8"><br />
                <button type="button" id="kuji_button">占う！</button>
            </td>
        </tr>
    </table>
</form>

<script type="module">
    document?
    .getElementById("kuji_button")?
    .addEventListener("click",
    function () {
        const kujiBox = document?.getElementById("kuji_box");
        const kujiPic = document?.getElementById("kuji_pic");
    
        if (kujiBox?.value !== "") {
            kujiBox.value = "１日１回";
        } else {
            OmikujiStart();
        }
    
        function OmikujiStart() {
            const m = Math.floor(Math.random() * 10) + 1;
            let result;
    
            switch (m) {
                case 1:
                case 2:
                    result = "大吉";
                    break;
                case 3:
                case 4:
                    result = "中吉";
                    break;
                case 5:
                    result = "小吉";
                    break;
                case 6:
                case 7:
                    result = "吉";
                    break;
                case 8:
                    result = "末吉";
                    break;
                case 9:
                    result = "凶";
                    break;
                default:
                    result = "大凶";
            }
    
            kujiBox.value = result;
            kujiPic.src = `ahiru${m}.jpg`;
        }
    });
</script>

新しいコードへの変更点

・<script>タグには、type="text/javascript"かtype="module"を使うのが一般的ですが、 type属性は省略可能で、デフォルトでJavaScriptとみなされます。

・イベントハンドラは、要素に直接紐付けるよりもaddEventListenerを使うことで、コードがよりモジュール化され、保守性が高くなります。

・要素にアクセスするには、getElementByIdやquerySelectorを使うのが推奨されています。
これにより、DOM操作が明確かつモダンな形で行えます。

・varの代わりにletやconstを使用し、スコープの問題を回避しました。

・switch文を使用して、if-elseの連続をなくし簡潔にしました。

・+を使った文字列結合をテンプレートリテラルで簡潔に書き換えました。

・オプショナルチェーン（?.）を使用すれば、要素が存在しない場合のエラーを回避できます。ECMAScript 2020 (ES11)