PythonプログラマーがJavaScriptでタイマーを作る①｜工場勤務Pythonプログラマーの日常

どうも、こんにちは。
コンです。

個人的にWeb開発~~お金が稼げそうな事~~に興味があって()始めたプログラミング言語の話になるのですが
10月からJavascriptのチョロチョロと勉強させてもらっております。

始めたばかりの頃は、JavaScriptでいいのか？など色々迷いもありましたけど
今では毎日楽しくコーディング。
良い人生だ()

ビール＆おでんも最高に決まる季節にもなりましたしね。(特に静岡おでんが大好きです）

さて、よちよち歩きで新しいプログラミング言語の勉強を始めたわけですが
Pythonをずっと使ってきて、個人的な上達コツは

とにかく何か作ること

なので、シンプルなタイマー機能のあるサイトを作ってみます。

お題
まずはhtmlでボタンとか文字を配置する
JavaScriptで時間タイマーの機能部分を書いてく
GitHubを使って無料でWEBサイトを公開
おわりに

お題

タイマーの要件定義は以下の通りにしました。

分・秒を入力するボックスがある
スタートボタンを押すと①で設定した分と秒を表示
1秒ごとに②の表示内容から1秒引いたものを表示させる
残り時間が0になったら「タイムアップ」と表示させる

これをJavascriptで書いていきます。

また、せっかく作るものなのでhtmlを使ってブラウザーでJavaScript結果を表示し
GitHubで管理、webページとして公開していきたいと思います。

まずはhtmlでボタンとか文字を配置する

Web業界の方から「htmlは顔でいうと目や鼻の位置を示すもの」と言っているのを最近聞きました。
実際にhtmlではボタンや文の配置をコーディングしていきます。

普段使っているVScodeの便利機能テンプレートの呼び出し方を他のサイト様から参考にさせてもらったり
inputの箱の作り方をMDNで調べたりを繰り返していきます。

正直コード書くより、調べる方が時間使いますよね？？使いますよね？？

そんな感じで根気良く書いていった、実際に書いた短いコードがこちら。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webTimer</title>
</head>
<body>

    
    <h1>セットタイマー</h1>
    <h2>セット時間</h2>
    分<input id="minute" value="0" min="0" max="200" step="1">
    秒<input id="second" value="0" min="0" max="59" step="1">
    <p>残り時間</p> <p id="time"></p>
    <button id="start">スタート</button>
    
    <script src="timer.js"></script>

</body>
</html>

Pythonプログラマーにとって、<head>とか<body>とかタグの書き方は未知の存在。
パリピ女子と出会った時、会話に困った時と同じ困惑度で書いていきます。

JavaScriptの勉強を10月から始めてからも、htmlの勉強はまだ2時間くらい？なので
<h1>が大見出しで<h2>が中見出しかな〜、idでどのボックスが分・秒か分かるようにしよ〜
くらいの理解度で書きました。

その結果以下のような画面が出来上がります。

本来ならCSSなどで綺麗に見えるようにするのですが、今回は省きます。
だって難しいんだもの。

JavaScriptで時間タイマーの機能部分を書いてく

JavaScriptは「htmlで書いた顔のパーツを動かして、表情を作るのがJavaScriptだー。」という感じで教わりました。

今回は時間の計算をJavaScriptで書いていきます。
コードはこちら

"use strict"

//スタートボタンを押した時の処理
function startaction(){
    let leftTime = document.getElementById("time");
    let minute = document.getElementById("minute").value;
    let second = document.getElementById("second").value;
    leftTime.innerText = String(Number(minute))+"分" + String(Number(second))+"秒";
    
    setInterval(() => {
        //最初0秒だった時の処理
        if (second !== -1){
            second = second -1;
        }

        //0秒になった後の処理
        if (second == -1 && minute !== 0) {
            minute = minute -1;
            second = 59
        }
        //タイムアップの処理
        if (second==-1 && minute==0){
            leftTime.innerText = "タイムアップ";
        } else {
            leftTime.innerText = String(Number(minute))+"分" + String(Number(second))+"秒";
        }
    }, 1000)
}

const sb = document.getElementById("start");
sb.addEventListener("click", startaction)

基本的にはPythonと同じように関数を書いて、地の文でコードを実行します。

JavaScriptもPythonと同じで
文字列を数値に変換したり、1秒待ってくれたりする
Pythonでいうと組み込み関数にあたる、「メソッド」という関数が色々用意されてます。

それが上の文でいうと、setInterval()だったり、addEventListener()などにあたります。

メソッドはMDNと呼ばれるweb系のプログラミングコードの公式辞書みたいなサイトから
ひたすらに勉強していきます。