소개

웹 앱 프레임 워크를 조사 대상으로 elm을 선택했습니다.

특징을 파악하기 위해, 다른 프레임워크에서 잘 만들어진,Todo 앱을 웹에서 찾고 있었지만, 초보자에게 적절한 샘플을 찾을 수 없었습니다.

난이도가 높거나 elm의 버전이 오래되어 0.18에서는 움직이지 않기 때문에 0.18의 환경에서 스스로 만드는 것을 결정했습니다.

처음으로 elm을 배우는 분의 참고가 되면 다행입니다.

나 자신, 최초의 elm로 여러가지 참고로 하면서 작성하고 있기 때문에, 본근에서 관계없는 (사용되지 않는) 쓰레기 데이터가 포함되어 있는 일도 있습니다만 양해 바랍니다.
최종적으로는 쓰레기 데이터가 없는 구현을 목표로, 조금씩 확장해 나갈 예정입니다.

실행 환경

OS: CentOS 7.3

Node: v6.11.3

npm: v3.10.10

nodebrew: v0.9.7

elm: v0.18

elm의 도입시에 npm로 넘어졌기 때문에, 그 때의 기사는 아래를 참조해 주세요.
npm 프록시 설정 우선 순위

전체 설계

언어는 다르지만 React.js의 아래 기사를 참고했습니다.
Step-by-Step React.js로 만드는 Todo 앱

TodoCreator에 관해서는 이번은 취급하지 않고, 다음 회 이후에 취급하게 된다고 생각합니다.

이번 테마

고정 값의 Todo를 Todo 목록에 추가 할 수 있습니다.

파일 구성

Main.elm : 대원의 프로그램. 기본적으로는 부하의 모듈에 위양할 뿐.

TodoList.elm : Todo 목록 관리하기

구현

Todolist.elm 만들기

module 선언 및 import 관련

module TodoList exposing (..)

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

모델 정의

여기에서는 ToDo 형을 정의해, 그 List 를 보관 유지하는 것을 Model 이라고 합니다.
ToDo를 추가하기 때문에 AddNew라는 Msg를 정의합니다.

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

type alias Model = 
    { todoList : List ToDo
    }

initialModel : Model
initialModel = 
    { todoList = 
        [ ToDo 1 "item1" 
        , ToDo 2 "item2"
        ]
    }

type Msg
    = NoOp
    | AddNew ToDo

update 정의

여기에서는 AddNew의 인수로 tot를 얻고 그것을 todoList에 추가하기로 결정했습니다.

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

        AddNew todo -> 
            ( { model | todoList = model.todoList ++ [todo] }, Cmd.none )

view 정의

updateButton 정의에서 onClick이 오면 (ToDo 4 "item4")라는 고정 값을 목록에 추가합니다.
이제 목록에 추가할 수 있는지 확인할 수 있다고 생각합니다.

-- view
view : Model -> Html Msg
view model = 
    div []
        [ viewList 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" ] ]

Main.elm 만들기

Main은 부하의 모듈에 위양하는 곳이 포인트가 된다고 생각합니다.
부모와 자식 관계의 교환 등은 아래의 사이트가 참고가 되었습니다.
Elm 튜토리얼 합성

이번 예에서는 update나 view로 처리를 부하의 TodoList에 위양하고 있습니다.
또, Todolist의 update로 AddNew가 인수를 필요로 하기 때문에, Main으로부터 위양할 때에TodoList.ToDo를 건네주고 있습니다만, 더미 데이터입니다. 실제로 Todolist.elm에있는 updateButton의 AddNew 인수가 사용됩니다.

아이의 속성을 부모가 사용하고 있어 기분 나쁘습니다만, 다음 번 이후에 고치겠습니다.

module Main exposing (..)

import Html exposing (Html, program)
import TodoList

main : Program Never AppModel Msg
main =
    program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }

-- model
type alias AppModel =
    { todoListModel : TodoList.Model
    }

initialModel : AppModel
initialModel = 
    { todoListModel = TodoList.initialModel
    }

init : ( AppModel, Cmd Msg)
init = 
    ( initialModel, Cmd.none)

type Msg
    = TodoListMsg TodoList.Msg

-- update
update : Msg -> AppModel -> ( AppModel, Cmd Msg )
update message model = 
    case message of
        TodoListMsg subMsg ->
            let
                ( updatedTodoListModel, todoListCmd ) =
                    TodoList.update subMsg (TodoList.ToDo 0 "dummy") model.todoListModel
            in
                ( { model | todoListModel = updatedTodoListModel }, Cmd.map TodoListMsg todoListCmd )

-- subscription
subscriptions : AppModel -> Sub Msg
subscriptions model =
    Sub.none

-- view
view : AppModel -> Html Msg
view model =
    Html.div []
        [ Html.map TodoListMsg (TodoList.view model.todoListModel) 
        ]

make

옵션(--debug)을 붙이면 상태 변화를 볼 수 있어 편리합니다.
$ elm-make Main.elm --output index.html --debug


실행 결과

만든 index.html을 브라우저에서 확인합니다.
click 버튼을 누를 때마다 item4의 태스크가 늘어나는 것을 알 수 있다고 생각합니다.

결론

이번에는 Todo의 고정 값을 목록에 추가하는 샘플을 만들었습니다.
다음에는 텍스트 상자에 입력한 값을 목록에 추가하도록 확장하려고 합니다.
다음 번 : Elm 0.18로 만드는 Todo 앱 (2)