Main1.elm

port module Main exposing (Model, Msg(..), init, main, update, view)

import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Process
import Random
import Task
import Time



-- ---------------------------
-- MODEL
-- ---------------------------


type alias Model =
    { count : Int, enableTimer : Bool }


init : () -> ( Model, Cmd Msg )
init _ =
    ( Model 0 False, Cmd.none )



-- ---------------------------
-- UPDATE
-- ---------------------------


type Msg
    = Tick Time.Posix
    | StartTimer
    | EndTimer


update : Msg -> Model -> ( Model, Cmd Msg )
update msg ({ count } as model) =
    case msg of
        StartTimer ->
            ( { model | enableTimer = True }, Task.perform (\_ -> EndTimer) <| Process.sleep 5000 )

        Tick _ ->
            ( { model | count = count + 1 }, Cmd.none )

        EndTimer ->
            ( { model | enableTimer = False }, Cmd.none )



-- ---------------------------
-- VIEW
-- ---------------------------


view : Model -> Html Msg
view { count, enableTimer } =
    let
        ( clickMsg, buttonText ) =
            if enableTimer then
                ( EndTimer, "end" )

            else
                ( StartTimer, "start" )
    in
    div [ class "container" ]
        [ button [ onClick clickMsg ] [ text buttonText ]
        , p []
            [ text <| String.fromInt count
            ]
        ]



-- ---------------------------
-- MAIN
-- ---------------------------


subscriptions : Model -> Sub Msg
subscriptions { enableTimer } =
    if enableTimer then
        Time.every 1000 Tick

    else
        Sub.none


main : Program () Model Msg
main =
    Browser.document
        { init = init
        , update = update
        , view =
            \m ->
                { title = "スケジューラ"
                , body = [ view m ]
                }
        , subscriptions = subscriptions
        }

Main2.elm

port module Main exposing (Model, Msg(..), init, main, update, view)

import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Process
import Random
import Task
import Time



-- ---------------------------
-- MODEL
-- ---------------------------


type alias Model =
    { count : Int, timerCountMaybe : Maybe Int }


init : () -> ( Model, Cmd Msg )
init _ =
    ( Model 0 Nothing, Cmd.none )



-- ---------------------------
-- UPDATE
-- ---------------------------


type Msg
    = Tick ()
    | StartTimer
    | EndTimer


update : Msg -> Model -> ( Model, Cmd Msg )
update msg ({ count, timerCountMaybe } as model) =
    let
        tickPerOneSecond =
            Task.perform Tick <| Process.sleep 1000
    in
    case msg of
        StartTimer ->
            ( { model | timerCountMaybe = Just 0 }
            , tickPerOneSecond
            )

        Tick _ ->
            ( { model
                | count = count + 1
                , timerCountMaybe =
                    Maybe.map (\timerCount -> timerCount + 1) timerCountMaybe
              }
            , case timerCountMaybe of
                Just n ->
                    if n == 4 then
                        Task.perform (\_ -> EndTimer) Time.now

                    else
                        tickPerOneSecond

                Nothing ->
                    Cmd.none
            )

        EndTimer ->
            ( { model | timerCountMaybe = Nothing }, Cmd.none )



-- ---------------------------
-- VIEW
-- ---------------------------


view : Model -> Html Msg
view { count, timerCountMaybe } =
    let
        ( clickMsg, buttonText ) =
            case timerCountMaybe of
                Just _ ->
                    ( EndTimer, "end" )

                Nothing ->
                    ( StartTimer, "start" )
    in
    div [ class "container" ]
        [ button [ onClick clickMsg ] [ text buttonText ]
        , p []
            [ text <| String.fromInt count
            ]
        ]



-- ---------------------------
-- MAIN
-- ---------------------------


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none


main : Program () Model Msg
main =
    Browser.document
        { init = init
        , update = update
        , view =
            \m ->
                { title = "スケジューラ"
                , body = [ view m ]
                }
        , subscriptions = subscriptions
        }