This page covers Elm 0.18

サブスクリプション(購読)

Elmでは、サブスクリプションを使用すると、アプリケーションが外部入力を待ち受ける方法が決まります。いくつかの例があります：

• キーボードイベント
• マウスの動き
• ブラウザの閲覧ロケーションの変更
• Websocketイベント

これらを説明するために、キーボードイベントとマウスイベントの両方に応答するアプリケーションを作成しましょう。

まず必要なライブラリをインストールします。

elm package install elm-lang/mouse
elm package install elm-lang/keyboard

そして以下のプログラムを作成します。

module Main exposing (..)

import Html exposing (Html, div, text, program)
import Mouse
import Keyboard



-- モデル


type alias Model =
    Int


init : ( Model, Cmd Msg )
init =
    ( 0, Cmd.none )



-- メッセージ


type Msg
    = MouseMsg Mouse.Position
    | KeyMsg Keyboard.KeyCode



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ text (toString model) ]



-- 更新


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MouseMsg position ->
            ( model + 1, Cmd.none )

        KeyMsg code ->
            ( model + 2, Cmd.none )



-- サブスクリプション(購読)


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ Mouse.clicks MouseMsg
        , Keyboard.downs KeyMsg
        ]


-- MAIN


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

このプログラムをElm reactorで実行すると、マウスをクリックするたびにカウンターが1ずつ増えます。キーを押すたびにカウンターが2ずつ増加します。

このプログラムのサブスクリプションに関連する重要な部分を見てみましょう。

メッセージ

type Msg
    = MouseMsg Mouse.Position
    | KeyMsg Keyboard.KeyCode

MouseMsgとKeyMsgという2つのメッセージがあります。マウスまたはキーボードが押されたときに応じてトリガされます。

更新

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MouseMsg position ->
            ( model + 1, Cmd.none )

        KeyMsg code ->
            ( model + 2, Cmd.none )

update関数は、それぞれのメッセージに異なる反応をします。すなわち、マウスを押すと1ずつ増やし、キーを押したときには2ずつ増やします。

サブスクリプション(購読)

subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch ➌
        [ Mouse.clicks MouseMsg ➊
        , Keyboard.downs KeyMsg ➋
        ]

ここでは、待ち受けたいことを宣言します。 Mouse.clicks➊とKeyboard.downs➋を待ち受けたいと思っています。これらの関数はどちらも引数にメッセージコンストラクタを取り、サブスクリプションを返します。

両方を待ち受けることができるように Sub.batch➌を使います。バッチはサブスクリプションのリストを取り、そのすべてを含む1つのサブスクリプションを返します。