書きためたサンプルコードをアウトプット中です。
記事にすると改めて理解不足だった部分が洗い出されて良い復習になってます。
もし理解が間違っている箇所があれば指摘いただけると嬉しいです。

ちなみにこの記事は前の記事からの続きになってます。
さらに続きもありますのでよかったらどうぞ。

ElmでCRUDを作る - 其のC ① (この記事)

ElmでCRUDを作る - 其のC ②

ElmでCRUDを作る - 其のD

今回作ったもの

TODOリストです。
前回の記事でR(Read)を作ったので、次はC(Create)を実装してみます。
Createは２段階に分ける予定です。

今回はボタンをクリックするとリストにアイテムが追加されるだけのものを作ります。

まずは完成品

完成品こちらです。ここ(Try Elm!)で貼り付けて動作を試せます。

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


-- MAIN

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


-- MODEL

type alias Model =
  { list : List String }

init : Model
init = Model []


-- UPDATE

type Msg
  = AddItem String

update : Msg -> Model -> Model
update msg model =
  case msg of
    AddItem addText ->
      { model | list = model.list ++ [ addText ] }


-- VIEW

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick ( AddItem "item" ) ] [ text "Add" ]
    , makeList model.list
    ]


-- ユーザー定義関数

makeList : List String -> Html Msg
makeList list =
  ul [] ( List.map makeListItem list )

makeListItem : String -> Html Msg
makeListItem itemText =
  li [] [ text itemText ]

解説

モジュールの読み込み

import Html.Events exposing (..)

前回に加えてHtml.Eventsモジュールを追加しました。

メイン関数

ここは前回から変更はないので割愛します。

モデルの定義と初期化

ここも同じく前回から変更なしですね。割愛します。

更新処理の定義

type Msg
  = AddItem String

メッセージ(Msg)を定義します。
typeで宣言する型をカスタム型と言って、その値をバリアントというらしいです。

カスタム型（Custom type）

つまり、Msgはカスタム型でAddItemがバリアントですね。
AddItemはString型の値を１つ持つことにします。

update : Msg -> Model -> Model
update msg model =
  case msg of
    AddItem addText ->
      { model | list = model.list ++ [ addText ] }

更新時にメッセージとして渡されたバリアントに応じた処理を記述します。
今回は処理は１つだけです。AddItemバリアントが渡ってきた場合の処理を記述します。
AddItemの持つString型の値にはaddTextという名前を当てています。
元のモデルのlistにaddTextを足したものを新しいモデルのlistとして生成します。

ページ描画処理の定義

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick ( AddItem "item" ) ] [ text "Add" ]
    , makeList model.list
    ]

view関数ではリストにアイテムを追加するための"Add"ボタンと、リストを表示しています。
"Add"ボタンをクリック(onClick)すると"item"という値を持つAddItemバリアントを更新処理に渡されます。
リストの表示に関しては前回と同じです。

ユーザー定義関数

ここは前回から変更なしです。割愛します。

まとめ

今回はリストへのアイテム追加処理のみを実装しました。
ただ現状では固定の文字列が追加されるのみでTODOリストにならないので、次回は任意の文字列をリストに追加できるようにします。

ElmでCRUDを作る - 其のC ②