JavaScript

【ドットインストール】JavaScriptでストップウォッチを作ろうを受講した感想

JavaScriptでおみくじを作ろうの受講が完了しました。

学習内容

「JavaScriptでストップウォッチを作ろう」は有料会員のみが受講できるレッスンとなっています。

スタート、ストップ、リセットの3つのボタンを備えたストップウェッチが成果物です。

これを12本の動画で作り上げることになります。

僕は「JavaScriptでおみくじを作ろう」と同じように動画を見ながら進めるのではなく最初の完成イメージを見て、最初は自分で作成して動画で答え合わせを行うという形式で進めました。

つまずいたポイントなど

日付の計算につまずきました。

僕はタイマーでカウントアップさせたものを表示するのかなと想像していましたが、実際はDate関数を使った計算で実装可能でした。

Date関数

Dateは日付や時刻を扱うことができるオブジェクトです。

またDateオブジェクトは日付や時刻であることをあまり気にせず計算することも可能な便利なオブジェクトです。

代表的な使い方はPaiza.ioで書いてみました。

UTCとは

UTC(協定世界時)とは日付を扱う上では避けてとおれないものです。

要は世界の記述となる時間ですね。

UTC(協定世界時)に+9時間することで日本時間になります。

現地の時間でシステムを構築しているとサマータイムがある国では時期によって時間が変わってしまうので、UTC(協定世界時)でシステムを構築することが重量になります。

経過時間の計算

ストップウォッチの経過時間は以下のように求めます。

経過時間 = 現在時間 – Startボタンを押した時間

変に難しく考えなくて良いんですね〜。

あとは、一旦Stopさせてからの再開の計算と、ボタンへのクラスのつけ外しで各種状態で押せるボタンのコントロールを行えればOK。

感想

経過時間の計算方法を根本的に間違い(ループさせてカウントアップさせようとしていた)以外は自分で実装できました。

もちろん動画のほうが効率の良い書き方をされている部分もあったので、そのあたりは吸収して次にいかしていきます。

にしてもJavaScriptは時間の計算が特に変換とか必要ないんで楽で良いですね。

自分が今の会社で使っている超マイナー言語は時間の計算がめんどくさいんでうれしいです。

ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す