Elm: 3つの数の加算

準備

mkdir sum
cd sum
elm init

プログラム

src/Main.elm

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput, onClick)
import String

-- MODEL

type alias Model =
    { number1 : String
    , number2 : String
    , number3 : String
    }

init : Model
init =
    { number1 = "", number2 = "", number3 = "" }

-- UPDATE

type Msg
    = UpdateNumber1 String
    | UpdateNumber2 String
    | UpdateNumber3 String

update : Msg -> Model -> Model
update msg model =
    case msg of
        UpdateNumber1 str ->
            { model | number1 = str }

        UpdateNumber2 str ->
            { model | number2 = str }

        UpdateNumber3 str ->
            { model | number3 = str }

-- VIEW

view : Model -> Html Msg
view model =
    let
        maybeInt1 = String.toInt model.number1
        maybeInt2 = String.toInt model.number2
        maybeInt3 = String.toInt model.number3
        sumResult =
            case ( maybeInt1, maybeInt2, maybeInt3 ) of
                ( Just a, Just b, Just c ) ->
                    String.fromInt (a + b + c)

                _ ->
                    "数値を正しく入力してください"
    in
    div []
        [ div []
            [ input [ placeholder "数字1", value model.number1, onInput UpdateNumber1 ] []
            ]
        , div []
            [ input [ placeholder "数字2", value model.number2, onInput UpdateNumber2 ] []
            ]
        , div []
            [ input [ placeholder "数字3", value model.number3, onInput UpdateNumber3 ] []
            ]
        , div []
            [ text ("合計: " ++ sumResult) ]
        ]

-- MAIN

main : Program () Model Msg
main =
    Browser.sandbox { init = init, update = update, view = view }

フォルダー構造

$ tree
.
├── elm.json
└── src
    └── Main.elm

コンパイル

elm make src/Main.elm

実行結果

$ elm make src/Main.elm
Dependencies ready!         
Success! Compiled 1 module.

    Main ───> index.html

実行

elm reactor

$ elm reactor
Go to http://localhost:8000 to see your project dashboard.

ブラウザーでアクセス

数字を入力