Todoリストと言っても、フィールドに入力した内容がli要素として追加されるだけ。

Elm習いたてなので、何か無駄があるかも。

個人的になるほどと思った点はList.mapを利用してli要素を生成するところで、これは要素を生成する関数が子要素のリストを引数に取るから実現できる。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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

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

--Model

type alias Todo =
  { description : String
  }

type alias Model =
  { todos : List Todo
  , input : Todo
  }

init : Model
init =
  { todos = []
  , input = Todo ""
  }

type Msg = Add | Change String

--Update

update : Msg -> Model -> Model
update msg model =
  case msg of
    Add ->
      { model | todos = model.input :: model.todos }
    Change str ->
      { model | input = Todo str }

-- View

view : Model -> Html Msg
view model = 
  div []
    [ input [ type_ "text", placeholder "What will you do?", onInput Change] []
    , button [ onClick Add ] [ text "Add" ]
    , ul [] (List.map viewLi model.todos)
    ]

viewLi : Todo -> Html Msg
viewLi todo =
  li [] [ text todo.description ]