Zenn
🥊

JavaScriptの変数の数値化について

2023/05/12に公開
JavaScript
変数
勉強し直し
tech

今日は何かを作るのではなく変数の数値化についてまとめます。

このような記事を書くことになった経緯

ズバリ、JavaScriptを一から勉強し直したからです。私は皆さんのような凄腕プログラマーではないので、かなりテキトーにプログラミングをしていました。そこで一から勉強し直そうということにしました（し直すというよりかはちゃんとやる）。そこで、まずstaff roiくんに依頼されたWPM計算する君を作ることにしました。WPMとは一分間にどれだけの英文を読めるか(単語数)の単位です。我々は学生なのでこういうちょっとしたツールも作ります（余談ですが私は中学生レベルの英文だったら350WPMです）。そしてこれを作っている際に発生した問題が変数の数値化なのです。

起こった問題

<!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="utf-8">
            <title>WPM計算する君</title>
            <style>
            </style>
        </head>
        <body>
            <h1>WPM計算するよ</h1>
            <p>
                <label>語数:<input type="number" id="Words" size="40"></label>
                <label>時間(秒):<input type="number" id="Time" size="40"></label>
                <input type="button" id="CheckCheck" value="計算" onclick="OnButtonClick();">
            </p>
            <script>
             　　function OnButtonClick() {
                    const e = document.getElementById('Words').value;
                    const f = document.getElementById('Time').value;
                    const i = (e / f) * 60;
　　　　　　　　　　   alert(i)  
                 }
            </script>
        </body>
    </html>

このWPM計算する君のコードのどこが間違っているのでしょうか。はい、もちろんわかりますね。変数が数値化されていないですね。このコードのどこが間違えているのかがわからず、ずっと沼にハマっていました。JavaScriptの部分だけ見ていきましょう

function OnButtonClick() {
    const e = document.getElementById('Words').value;
    const f = document.getElementById('Time').value;
    const i = (e / f) * 60;
　　 alert(i);
}

四行目に問題があります。正しくはこう

function OnButtonClick() {
    const e = document.getElementById('Words').value;
    const f = document.getElementById('Time').value;
    const i = (parseInt(e) / parseInt(f)) * 60;
　　 alert(i);
}

変数を数値化するにはparseInt()を使うのですね。

まとめ

今回はトラブルシューティングでした。この記事を読んで私のバカさ加減に呆れている方もいるでしょう。しかし、こういうふうに一つずつ進歩していますので、応援の方よろしくお願いいたします。

Discussion