Elm練習10


このエントリーをはてなブックマークに追加

引き続きElm練習

Elm練習 archives

exampleのDragをいじって練習してみる



updateHelp


updateのところ、関数が2つに分解されてて下記のようにupdateupdateHelpがある

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
-- UPDATE
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
(updateHelp msg model, Cmd.none)
updateHelp : Msg -> Model -> Model
updateHelp msg ({position, drag} as model) =
case msg of
DragStart xy ->
Model position (Just (Drag xy xy))
DragAt xy ->
Model position (Maybe.map(\{start} -> Drag start xy) drag)
DragEnd _ ->
Model (getPosition model) Nothing

updateだけでコードを書くとごちゃごちゃしてしまうので、分解できるよって例を示してくれてるのだと思う

これぐらいだと分割しなくても特にややこしくは無さそうだけど(Cmd.noneを書く回数が増えるだけ)

もっと大きなコードになったらこういうやり方が役に立つのだと思われる

とりあえずupdateupdateHelpを合成すると下記になる

1
2
3
4
5
6
7
8
9
10
11
update : Msg -> Model -> (Model, Cmd Msg)
update msg ({position, drag} as model) =
case msg of
DragStart xy ->
(Model position (Just (Drag xy xy)), Cmd.none)
DragAt xy ->
(Model position (Maybe.map(\{start} -> Drag start xy) drag), Cmd.none)
DragEnd _ ->
(Model (getPosition model) Nothing, Cmd.none)


ついでに、画面にpositionの状態を表示できるようにviewも下記のように改変してみた

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
view : Model -> Html Msg
view model =
let
realPosition =
getPosition model
in
div []
[
div
[ onMouseDown
, style
[ "background-color" => "#3c8CF2"
, "cursor" => "move"
, "width" => "100px"
, "height" => "100px"
, "border-radius" => "4px"
, "position" => "absolute"
, "left" => px realPosition.x
, "top" => px realPosition.y
, "color" => "white"
, "display" => "flex"
, "align-items" => "center"
, "justify-content" => "center"
]
]
[ div[]
[text "Drag me"
]
]
, div []
[ text ("position.x: " ++ px realPosition.x)
, br [][]
, text ("position.y: " ++ px realPosition.y)
, br [][]
-- position, drag, currentを表示させる
, text ("model: " ++ toString (model))
]
]

Elm、まだまだ自分で好きなようにかけるような気がしなくて難しい・・・


このエントリーをはてなブックマークに追加