2023年になりましたね。明けましておめでとうございます。

新年ということは、ラーメンですね。

JavaScriptでラーメンタイマーを書いてみたので、そのサンプルコードを共有します。

ボタンを押すと、タイマーが動作して終了したら文字列が変わるだけのシンプルなものです。

See the Pen JavaScriptでラーメンタイマーを作る by Makoto Ohnami (@zohnami) on CodePen.

htmlやcssはなんのひねりもないので、割愛します。

JavaScriptはこんな感じ。

const startButton = document.getElementById('start_button')
startButton.addEventListener('click', ()=> {
  const timerLabel = document.querySelector('.timer_label')
  let leftTime = 180;
  const timer = () => {
    leftTime--;
    const minutes = Math.floor(leftTime / 60)
    const seconds = leftTime % 60
    timerLabel.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
    if (leftTime === 0) {
      timerLabel.textContent = '完成'
      clearInterval(intervalId)
    }
  }
  const intervalId= setInterval(timer, 1000)

})

start_buttonのclassが付与されてるタグをクリックすると、タイマーを登録するようにしています。

残り時間はlet leftTime = 180;で180秒(= 3分)で設定しておいて、それをtimer関数のなかで1秒ずつ減らしていく流れ。

最後にleftTime === 0となったら、残り時間の表記のところを「完成」の文字列に置き換えしつつ、clearIntervalでタイマーを止めています。

コード内では残り時間を秒単位で管理していますが、タイマーとしては残りの分と残りの秒とで表記を分けて出したいですね。

02:34みたいに表示できるようにleftTime--;の後、残り時間を以下のように文字列として整形しています。

const minutes = Math.floor(leftTime / 60)
const seconds = leftTime % 60
timerLabel.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`

まず、残り分数を取得したいのでMath.floor(leftTime / 60)としています。

Math.floorを使うと、切り捨てをしてくれます。leftTimerは残り時間を秒として持っているので60で割れば分単位の数字になります。 あとは余りがでてしまうので、それをfloorで切り捨てをする感じですね。

残り秒数(seconds)のところは% 60で60秒で割った余り(= 分未満の秒数)を取得しています。

あとはこれをtimerLabelのタグ内のテキスト要素として追加すればいいのですが、数字が1桁と2桁とで、桁幅がずれてしまうとタイマーの見栄えとしてちょっとカッコ悪いですね。

そこでminutes.toString().padStart(2, '0')としています。こうすることで、1桁の数字の場合は01、02というように足りないところをゼロの文字列で補ってくれます。

これでタイマーっぽい残り時間の表示になりました。

他にもタイマーの時間設定を選択できるようにしたり、一時停止の機能をつけたりとかやっていくとタイマーとしての機能が充実して、個人開発の手始めにはいいテーマかもしれません。

この記事の環境情報

  • Google Chrome 108.0.5359.124
  • 大晦日はおでんでした

あとがき

何かの言語で、タイマー処理を試してみたいときに自分はラーメンタイマーをとりあえず作ってみることにしています。

今までも、Unity(C#)とかFlutter(Dart)とかで書いたりしてみましたが、ラーメンタイマーは試作品としてやるのにおすすめです。

ひとつの言語で一度作っておくと、この処理はこの言語ではどう書くんだろう、みたいな感じで効率よく学習することができます。