トラック
/
Elm
Elm
/
演習
/
クロコの時計
クロコの時計

クロコの時計

学習演習

はじめに

時間

Timeモジュールは、人が読める形式の日付や時刻を表示するために使います。Timeで時刻を操作することも技術的には可能ですが、Elmのコミュニティには、その作業にはるかに適したパッケージがあります。たとえばjustinmimbs/dateやCoderDennis/elm-time-formatなどです。

Posix

時刻は、不透明型Posixで表されます。PosixはUnixエポック時間、つまり1970年1月1日0時UTCからの経過ミリ秒数を包んだものです。Posixはタイムゾーンによって変化しない曖昧さのない値なので、時刻を扱うための良い選択肢になります。Elmアプリケーションでは、Posixの時刻は通常、ブラウザーなどの外部ソースから提供されます。

次の関数を使うと、Posixをミリ秒の数値に変換したり、その逆を行ったりできます。

posixToMillis : Posix -> Int
millisToPosix : Int -> Posix

タイムゾーン

日常生活では、人間は通常Posixをそのまま読むことはなく、代わりに現地時間を好みます。現地時間は、地球上のどの位置にいるかや、その地域の夏時間のルールによって決まります。Elmでは、この情報は不透明型Zoneにエンコードされており、通常はブラウザーから提供されます。

常にアクセスできる特別なZoneがあります。

utc : Zone

人が読める時刻

PosixとZoneがあれば、現地時間をどんな細かさでも表示するのに十分な情報がそろいます。そのために使える関数は次のとおりです。

toYear : Zone -> Posix -> Int
toMonth : Zone -> Posix -> Month
toDay : Zone -> Posix -> Int
toWeekday : Zone -> Posix -> Weekday
toHour : Zone -> Posix -> Int
toMinute : Zone -> Posix -> Int
toSecond : Zone -> Posix -> Int
toMillis : Zone -> Posix -> Int

Timeには、さらに2つのカスタム型があることにお気づきでしょう。

type Month = Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec
type Weekday = Mon | Tue | Wed | Thu | Fri | Sat | Sun

これらのカスタム型を人が読める値に変換するのは、利用者に任されています。

説明

日本人の友だち、クロコは、世界中にファンのいるストリーマーです。 クロコの配信スケジュールはかなり複雑で、配信は毎日違う時間に始まるように見えます。

彼は、視聴者それぞれの現地のタイムゾーンでスケジュールを表示する小さなアプリ、クロコの時計の開発を手伝ってほしいと頼んできました。 さらに追加の要望があります。アプリは時刻を、日本語とアメリカ英語の2つの言語で表示できる必要があるのです。

1. 日付を表示する

(有効な)現地の日付を表示する関数 showLocalDate : Locale -> Int -> Month -> Int -> String を定義しましょう。

USロケールでは、書式はMonth/Day/Yearで、先頭にゼロは付けません。

JPロケールでは、書式はYear年Month月Day日で、こちらも先頭にゼロは付けません。

showLocalDate US 2025 May 1
    -- "5/1/2025"
showLocalDate JP 2025 May 1
    -- "2025年5月1日"

2. 時刻を表示する

(有効な)現地の時刻を表示する関数 showLocalTime : Locale -> Int -> Int -> String を定義しましょう。

USロケールでは、時は12時間表記で表示し、後ろに"PM"または"AM"を付けます。分は先頭にゼロを付けて表示します。

JPロケールでは、時は24時間表記で「時」の前に、分は先頭のゼロなしで「分」の前に表示します。

showLocalTime US 13 8
    -- "1:08 PM"
showLocalTime JP 13 8
    -- "13時8分"

3. タイムゾーンに対応する

特定のロケールで、タイムゾーンを基準とした日付と時刻を表示する関数 showDateTime : Locale -> Zone -> Posix -> String を定義しましょう。

最終的な結果の表示にはshowLocalDateとshowLocalTimeを使いましょう。

showDateTime US Time.utc (Time.millisToPosix 0)
    -- "1/1/1970 12:00 AM"
showDateTime JP Time.utc (Time.millisToPosix 0)
    -- "1970年1月1日0時0分"
GitHubで編集する リンクは新しいウィンドウまたはタブで開きます
Elm Exercism

クロコの時計を始める準備はできましたか?

Exercismに登録すれば、28個のコンセプト110個の演習、そして本物の人間によるメンタリングとともに、Elmを学んでマスターできます。すべて無料です。