Elm 책을 chapter3의 시작 부분까지 읽고 소스 코드를 거의 읽을 수 있습니다.
왠지 만들 수 있는 기분이 들었으므로, 지난번 반단이 되어 있던 매스를 묘화하는 페이지를 제로부터 만들어 보았습니다.

만든 것

Elm guide에 있는 카운터 앱의 개조 같은 것으로, 매스의 수와 크기를 동적으로 변경할 수 있도록 했습니다.
JavaScript만으로 하려고 하면 꽤 귀찮다고 생각합니다만, Elm으로 쓰면 비교적 간단. 관심사에 주력해 쓸 수 있는 것을 실감했습니다.

소스 코드

소스 코드

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

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)


main =
    Browser.sandbox
        { init = init
        , update = update
        , view = view
        }



-- MODEL


type alias Model =
    { size : Int
    , length : Int
    }


init : Model
init =
    Model 1 1



-- UPDATE


type Msg
    = Size Int
    | Length Int


update : Msg -> Model -> Model
update msg model =
    case msg of
        Size val ->
            { model | size = model.size + val }

        Length val ->
            { model | length = model.length + val }



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ div []
            [ text "length"
            , button [ onClick (Length -1) ] [ text "-" ]
            , text (String.fromInt model.length)
            , button [ onClick (Length 1) ] [ text "+" ]
            ]
        , div []
            [ text "size"
            , button [ onClick (Size -1) ] [ text "-" ]
            , text (String.fromInt model.size)
            , button [ onClick (Size 1) ] [ text "+" ]
            ]
        , td [ style "border" "solid thin", style "width" (String.fromInt model.size ++ "px") ] []
            |> List.repeat model.length
            |> tr [ style "height" (String.fromInt model.size ++ "px") ]
            |> List.repeat model.length
            |> table [ style "border" "solid thin", style "border-collapse" "collapse" ]
        ]