今回のテーマ

テキストボックスへ入力したTodoをTodoリストへ追加できるようにする

ファイル構成

Main.elm：大元のプログラム。基本的には配下のモジュールへ委譲するのみ。
TodoList.elm：Todoのリスト管理を行う
TodoCreator.elm：(New!)テキストボックスを管理する。

実装

TodoCreator.elmの新規作成

moduleの宣言とimport関連

module TodoCreator exposing (..)

import Html exposing (..)
import Html.Events exposing (onClick, onInput)
import Html.Attributes exposing (value, type_)

モデルの定義

テキストエリアの内容を格納するItem型のinputStrを保持するものをModelとしています。
モデルの更新通知用のメッセージをUpdateInputと定義しています。

-- model
type alias Item = 
    String

type alias Model = 
    { inputStr : Item
    }

initialModel : Model
initialModel = 
    { inputStr = ""
    }

type Msg
    = NoOp
    | UpdateInput String

updateの定義

UpdateInputの引数でs(文字列)をもらい、それをinputStrへ追加することにしました。

-- update
update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case message of
        NoOp ->
            model ! []

        UpdateInput s ->
            { model | inputStr = s } ! []

viewの定義

todoInputの定義で文字入力があったらinputStrへ格納するようにしています。

-- view
view : Model -> Html Msg
view model = 
    div []
        [ todoInput model
        ]

todoInput : Model -> Html Msg
todoInput model = 
    form []
        [ input [ onInput UpdateInput, value model.inputStr ] []
        ]

Main.elmの変更

TodoCreator.elmを追加したことに伴い、処理を委譲するところを変更しています。
あと、全体的にModelの定義をAppModelからModelへリネームしています。

module、importとmain関数の変更箇所

 module Main exposing (..)
 
 import Html exposing (Html, program)
+import TodoCreator
 import TodoList
 
-main : Program Never AppModel Msg
+main : Program Never Model Msg
    program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

TodoCreatorのimportを追加します。

modelの変更箇所

 -- model
-type alias AppModel =
-    { todoListModel : TodoList.Model
+type alias Model = 
+    { todoCreator : TodoCreator.Model
+    , todoList : TodoList.Model
     }
 
-initialModel : AppModel
+initialModel : Model
 initialModel = 
-    { todoListModel = TodoList.initialModel
+    { todoCreator = TodoCreator.initialModel
+    , todoList = TodoList.initialModel
     }
 
-init : ( AppModel, Cmd Msg)
+init : ( Model, Cmd Msg)
 init = 
     ( initialModel, Cmd.none)
 
 type Msg
-    = TodoListMsg TodoList.Msg
+    = TodoCreatorMsg TodoCreator.Msg
+    | TodoListMsg TodoList.Msg

ここは単純にTodoCreator関連の追加とリネームだけなので、特に説明はないです。

update(とsubscription)の処理の変更箇所

 -- update
-update : Msg -> AppModel -> ( AppModel, Cmd Msg )
+update : Msg -> Model -> ( Model, Cmd Msg )
 update message model = 
     case message of
+        TodoCreatorMsg subMsg ->
+            let
+                ( updatedCreator, todoCreatorCmd ) =
+                    TodoCreator.update subMsg model.todoCreator
+            in
+                ( { model | todoCreator = updatedCreator }, Cmd.map TodoCreatorMsg todoCreatorCmd )
+
         TodoListMsg subMsg ->
             let
                 ( updatedTodoListModel, todoListCmd ) =
-                    TodoList.update subMsg (TodoList.ToDo 0 "dummy") model.todoListModel
+                    TodoList.update subMsg (TodoList.ToDo False model.todoCreator.inputStr) model.todoList
             in
-                ( { model | todoListModel = updatedTodoListModel }, Cmd.map TodoListMsg todoListCmd )
+                ( { model | todoList = updatedTodoListModel }, Cmd.map TodoListMsg todoListCmd )
 
 -- subscription
-subscriptions : AppModel -> Sub Msg
+subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.none

updateはTodoListと同様にTodoCreatorへ処理を委譲することを記述します。
case文のもう一方であるTodoListMsgは委譲する引数をdummyのものからtodoCreatorのinputStrを渡すように変更しています。これにより、TodoCreatorで入力された内容をTodoList側へ渡すことが可能になります。

viewの変更箇所

 -- view
-view : AppModel -> Html Msg
+view : Model -> Html Msg
 view model =
     Html.div []
-        [ Html.map TodoListMsg (TodoList.view model.todoListModel) 
+        [ Html.map TodoCreatorMsg (TodoCreator.view model.todoCreator)
+        , Html.map TodoListMsg (TodoList.view model.todoList) 
         ]

TodoCreatorのviewも追加します。

TodoList.elmの変更

modelの変更箇所

 -- model
 type alias ToDo = 
-    { count : Int
+    { done : Bool
     , item : String
     }

type alias Model = 
    { todoList : List ToDo
    }

initialModel : Model
initialModel = 
    { todoList = 
-        [ ToDo 1 "item1" 
-        , ToDo 2 "item2"
+        [ ToDo False "item1" 
+        , ToDo False "item2"
+        , ToDo False "item3"
         ]
    }
 
type Msg
    = NoOp
-   | AddNew ToDo
+   | AddNew

まず、ToDoの定義でcount変数は使われていなかったので、Todoらしく実行済みか否かというBool型の変数doneに変更しました。

initialModelはToDoの変数変更に伴う修正がメインです。

MsgはAddNewの引数を削除しました。これについては後述します。

updateの変更箇所

 -- update
 update : Msg -> ToDo -> Model -> ( Model, Cmd Msg )
 update message todo model =
         NoOp ->
             model ! []
 
-        AddNew todo -> 
-            ( { model | todoList = model.todoList ++ [todo] }, Cmd.none )
+        AddNew -> 
+            { model | todoList = model.todoList ++ [todo] } ! []

AddNewについて、model側での引数を削除したので、update側でも削除します。
また、「( {}, Cmd.none)」という表現と「() ! []」は同等の処理になるらしく、すっきりして見えるので書き換えました。
引数ですが、AddNewの引数のtodoを使うのではなく、updateの引数のtodoを使うようにしました。
このようにすることで、親(Main.elm)から受け取った情報を使うことができるようになりました。

viewの変更箇所

 -- view
 view : Model -> Html Msg
 view model = 
     div []
-        [ viewList model.todoList
+        [
+        div [ class "p2" ]
+            [ addButton
+            , viewItems model.todoList
+            ]
         ]
 
-viewList : List ToDo -> Html Msg
-viewList models = 
-    div [ class "p2" ]
-    [ viewItems models
-    , updateButton models
-    ]

 viewItems : List ToDo -> Html Msg
 viewItems models = 
     ul [] (List.map viewItem models)

 viewItem : ToDo -> Html Msg
 viewItem model = 
     li [] [
         text model.item
     ]

-updateButton : List ToDo -> Html Msg
-updateButton models = 
-    div [] 
-        [ button [ onClick (AddNew (ToDo 4 "item4")) ] [ text "Click" ] ]
-    ]
+addButton : Html Msg
+addButton = 
+    div [] 
+        [ button [ onClick AddNew ] [ text "Add" ] ]

viewListを関数として定義する意味があまりなさそうだったのでview関数に統合してしまいました。
updateButton関数の代わりにaddButton関数を定義しました。
型を見てもらえば分かりますが、引数を持たず、HtmlとMsgを返す関数としています。
AddNewの定義で引数がなくなったので呼び出し側も引数がなくなりました。

実行結果

前回と同様にmakeして、作成したindex.htmlをブラウザで見ます。
テキストエリアに文字を入力しAddボタンを押下するとTodoが追加されることが分かると思います。

おわりに

TodoCreator追加に伴った変更を行ってきました。
今回の例のように、配下のモジュールが追加されたら、親の各要素で配下へ委譲するという処理を追加すると連携ができることが分かったと思います。

次回はTodoのチェック用にチェックボックスの設置する拡張を行っていきたいと思います。
次回：Elm 0.18で作るTodoアプリ(3)