Elm練習6


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

引き続きElm練習

Elmの練習5

Elm練習 archives

moduleの使い方を簡単にメモ


moduleの作り方と使い方

Elmもmoduleとして名前をつけて外部から扱うファイルとして作成することができる

例えば、Main.elmというファイルに対してファイルの先頭に

1
module Main exposing (..)

とつけるとmodule化することができる

Players/Utils.elm というファイル構成だったら

1
module Players.Utils exposing (..)

とする


importする時は下記のようにする

1
import Players.Utils



例として、AdditionalExample.elmにadd1, reduce1という関数を定義して、elmのbutton sampleに適用してみる


それぞれファイルは同じディレクトリにあるとして

AdditionalExample.elm
1
2
3
4
5
6
7
8
9
module AdditionalExample exposing (..)
add1 : Int -> Int
add1 x =
x + 1
reduce1 : Int -> Int
reduce1 x =
x - 1

button sampleのコードは下のように訂正する

ButtonSample.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
import AdditionalExample exposing (..)
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 ->
add1 model
Decrement ->
reduce1 model

のようにすればよい


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