Elmでストップウォッチを作った

Elmで何か作って勉強しようという目的のもと、自分が時間管理に使いそうなものを作っています
リポジトリはこちら

機能

1. startをクリックしてからの経過時間を計測します
2. endをクリックして計測を中断でき、startをクリックして再開できます
3. resetで計測を終了して、履歴に記録します

データ設計

当初は、経過時間を計ればいいから開始時刻と終了時刻をMaybe Intで準備すればいいかと思っていたのですが、IntroductionのMaybeを読んで考え直すことにしました。
結果として状態を３つ(Initial, Start, Stop)に分けて、

1. Initialは時刻を持たない
2. Startは「最後に中断したときまでの経過時間」、「開始時刻」を持つ
3. Stopは「経過時間」を持つ

ことにしました。Maybeで持つよりは大分よくなったと思います。

レイアウト

elm-neat-layoutを使ってみることにしました。
個々の部品にpaddingを設定して、縦並びと横並びを組み合わせて組んでいくイメージのようですね。¹
表示内容に変更があったときでもそれっぽく並べてくれるので、全体を見つついろんなところを調整する、、、なんてことがなくなりそうです。

今後

とりあえず以下の機能を作ったら個人的に使い始められそう
1. サブを足して、ストップウォッチを２つにする
2. 中断していた時間はサブで計測し、別で履歴を残す
3. 履歴のimport/export

2019/10/05
追加開発したので更新

---

1. paddingは型で管理されているので、違うpaddingを同じ並びに入れてしまう（レイアウトが崩れる）とコンパイラが教えてくれます。 ↩