ヌルポインター親衛隊

社内でひとりエンジニアやってます。

【つくってみた】 JavaScript - moment.jsをつかった簡単時計プログラム

Javascript Github つくってみた

JavaScriptの勉強のモチベーションが上がらないので、手っ取り早くなにか使えるものを作ってみることにした。

About

moment.jsというJSライブラリを利用して、時計を表示させてみる。
使うのは、HTML/CSS/JavaScriptだけ。

完成イメージ

Github pagesで公開してみた。
settings > pagesで設定すれば公開可能。Github sugeee。

Animation

コード

moment.jsは、時間関連のjsライブラリ。
今回はcdnから利用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
    <title>時計</title>
</head>
<body>
    <script>
    </script>
</body>
</html>

次に、htmlとロジックを記述。

<body>
    <div id="bg">
        <div id="clock">
            <h1 id="t">  </h1>
            <h2 id="d">  </h2>
        </div>
    </div>
    <script>
        let d = document.getElementById("d")
        let t = document.getElementById("t")

        let updateTime = function(){
            d.innerHTML = moment().format("YYYY.MM.D")+" JST"
            t.innerHTML = moment().format("HH:mm:ss")
        }

        setInterval(updateTime, 100)
    </script>
</body>

定期的に文字列を変える方法がsetInterval()を利用する方法しかわからなかった。
setInterval()は、第二引数に与えた秒数[ms]単位で第一引数に指定した関数にコールバックする関数である。定義したupdateTime()を100[ms]単位で呼び出すようにした。
コールバック関数のupdateTime()は、その時点での時間を"HH:mm:ss"や"YYYY.MM.D"の形式でそれぞれinnerHTMLを書き換える。

<style>
        body{
            display: flex; /* flexbox */
            justify-content:center;
            align-items: center;
        }
        #bg{
            display:flex;
            justify-content:center;
            align-items: center;
            height: 100vh; /* Viewpointで高さ100% */
        }
        #clock{
            width: 200px;
            height: 100px;
            padding: 10 auto;
            margin: 10 auto;
        }
        #d{
            font-size: 20px;
            transition: 0.9s;
        }
        #t{
            font-size:50px;
        }
</style>

残りはstyleの定義だが、どうしてもブラウザのど真ん中に表示したかった。これだけは譲れなかった。
検索すると、ブロック要素の表示位置を指定するにはfloatやpositionなどやり方が色々あるようだが、今回はflexboxを利用する。CSS3で投入された新機能らしい。

justify-contentが横位置、align-itemsが縦位置の配置法を指定する。
centerにすれば真ん中になるはずだが、#clockをこの設定にしても<h1><h2>の要素は動かない。多分、hのタグはインラインの要素のため、flexboxによる位置していが効いていない(んだと思う)。
そのため、適当なdiv要素#bgでくくってみたらうまくいった。

課題と難しいと思ったところ

多分だけど、フォントの指定がなかったり、marginとかがガバガバで、ブラウザを変えると表示が変わる気がする。ここらへんは近いうちに修正する。

作ってみると、HTML/CSS/JavaScriptにまつわる技術は覚えることが多くて、思ったことを最短距離で実装できるようになるまでに時間がかかりそう。
CとかPythonとかなら、一旦構文を覚えたらあとはライブラリの使い方を覚えりゃええんだが、こりゃお作法を覚えるのが大変。

Twitterやっています。興味がありましたらフォローお願いします。
https://twitter.com/ell_sub3