Elm練習してみる3


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

引き続きElmの練習してみる

Elmの練習

Elm練習してみる2



公式のexampleに少し手を加えてみる


公式のサンプルのbuttons

buttons

これ、modelやupdateに型宣言がついていないのでこれに型をつけることで

少し練習になるかと思ってやってみる

最終的なコードは以下になる

buttonsCustomize.elm
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
import Html exposing (Html, div, button, text)
import Html.App exposing (beginnerProgram)
import Html.Events exposing (onClick)
main =
beginnerProgram
{ model = model
, view = view
, update = update
}
-- Model
type alias Model = Int
model : Model
model = 0
-- View
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
-- Update
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1

以下流れを書いていってみる


mainを書き換える

mainの部分は通常以下のように一般的にできる

1
2
3
4
5
6
main =
beginnerProgram
{ model = model -- 0 から model に書き換えてあげる、ここが初期値になる
, view = view
, update = update
}

この状態だと下記エラーが出る

1
2
3
4
5
6
7
8
9
Cannot find variable `model`
7| beginnerProgram { model = model, view = view, update = update }
^^^^^
Maybe you want one of the following?
Html.code
Html.del
Html.node

modelというのが定義されてないのでわかりませんっていうこと

なのでmodelを定義してあげる


modelを追加する

通常はmodelを定義するが、buttonsのexampleだと初期値が0でわざわざ定義しなくても

大丈夫っぽいから定義されていない

が、練習のため敢えて定義してやる

  • 今回のbuttonsの場合、数字だけ必要で整数なのでInt型で定義してやる
  • そして初期値に0を入れてやる

以下のように定義できる

1
2
3
4
5
6
-- Model
type alias Model = Int
model : Model
model = 0


viewに型をつけてやる

おそらくそのままでも型推論で勝手に型が定義されているはずなので

自分で敢えて設定してやる

といっても、基本的にはviewの型はview : Model -> Html Msgとなることが多い?みたいなので

素直にそうしてやる(この辺りは熟練したら自分で定義できていくようになるんだろなと思う)

1
2
3
4
5
6
7
8
9
-- View
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]

下記エラーが出るはず

1
2
3
4
5
6
7
Cannot find type `Html`
19| view : Model -> Html Msg
^^^^
Maybe you want one of the following?
Html.Html

Htmlという型はみつかりませんという風に出てくる

これはHtml.Htmlをimportしていないからなので、importの部分を書き換えてやる

1
import Html exposing (Html, div, button, text)

これでエラーが消えるはずである


updateに型を定義する

最後にupdateに型を定義する

これも、よく用いられるのがupdate : Msg -> Model -> Modelなので素直につけてやる

1
2
3
4
5
6
7
8
9
10
11
12
-- Update
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1

ここはそのままでうまくいった

Elmは情報がまだまだ少ないけど

こんな感じでsampleのコードを少しづつ改変していけば練習になりそう


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