プログラミング学習86日目〜JavaScriptでストップウォッチを作ろう (1~12回/全12回)〜

昨日のおみくじに続きミニアプリの第2弾で今日はストップウォッチ作り。
書籍で時間の取得(getMinutes)や何秒ごとに表示(setTimeout)などは学習しておいたので意外とスムーズに入れました。

止めたりリセットしたりはどうやってやるのかと思っていましたが、止めるのは clearTimeout、リセットは単に00：00：000の文字列の代入だけなので意外と簡単だなあと思っていたのは最初だけ。

今回の学習は全12回なのに序盤でJavaScript部分が終わり、CSSで見た目の体裁を整える作業に入ったので、残りは何をするのだろうと思っていたのですが、出来上がったストップウォッチを触っているとどうもなんかおかしい。
例えばスタートを2回押すとなぜだかストップを押しても止まらなかったり、一度止めて再スタートすると0からカウントが始まったりなどなど。

このあたりはスルーするのかと思いきやそんなはずはありませんでした。
スタートを2回押すとストップを押しても止まらないのはスタートを押した数だけ処理が始まっているから。これを防ぐにはスタートボタンを押したら、再度スタートボタンを押せないようにするなど、ストップウォッチの状態によってボタンの機能を変えてやる必要があるのです。

再スタートしたときに0から始まるのは、現在の時刻からスタートをクリックした時刻を単純に引いただけの数値を表示しているだけなので、再スタートするときは、それまでの時間を足してやる必要があります。

それらを実現するためのコードを書くこと自体は、今の私には簡単ではありませんが、まあ理解できるレベルではあります。でも、実現するための条件（他のボタンを押せないようにしたり、時間を足し上げたり）って、簡単には思いつかないと思います。アプリ作れる人ってほんとにすごいと思います。

あと、世の中のバグってこういうことで起きているんだなとも実感しました。検証って大事だと思います。

で、このあたりを修正も済み、見た目も機能も完璧になったので完成と思いきや、まだ12回まで結構な回数の学習が残っています。次は何の問題があるんだ？と思い進んでいくと、どうやらボタンに問題があるらしい。

今回ボタンの表示はbuttonタグを使ったのですが、どうやらbuttonタグとやらは、ブラウザによって表示が異なるらしい。なのでbuttonをdivに書き換えて、classを追加して、JavaScriptのコードも少し書き換えてようやく完成。

ちなみに、<button></button>でbuttonの部分をdivに書き換える必要が計6ヶ所あったのですが、VScodeエディタでは、書き換えたい文字列を選択して、command + D で同じ文字列を追加で選択してくれます。これで6個選択した上で上書きすれば一気に書き換えることができます。これは便利。

classは3ヶ所同じものを追加する必要があったのですが、
option + command +  ↓ で複数行に渡りカーソルを選択でき、一気に同じものを書くことができます。

ドットインストールは難しいこともサラッと流すので気をつけないと理解したと勘違いさせてしまう反面、こういった便利機能もサラッと流して色々と紹介してくれるのは大変ありがたいです。

今回のストップウォッチの作成は、JavaScriptはもちろん、CSS、アプリを作る上での考え方や注意点、さらにはエディタの便利機能までといろいろ学べて、自分の中ではまさに神回でした。