Elm Architecture イントロダクション（テキストフィールド編）

前回は、最小構成ではじめるElm Architectureというタイトルのポストを投稿しました。

最小構成ではじめるElm Architecture

ここでは、button関数を使った、簡単なカウンターを生成しました。

Elm Architecureのイントロダクションには、他にも豊富な例があります。
今回はElmのテキストフィールドについて。

Text Fields - An Introduction to Elm

ファイル構成等は、前回の記事を参照してください。

知識

input

テキストの入力にinput関数を使いました。inputはHtmlパッケージに属しています。

Html.input - Elm packages

input関数は、Attribute型のリストとHtml型のリストを要求します。

onInput

updateのフックとして、onInput関数を使いました。Html.Eventsパッケージに属します。

Html.Events.onInput - Elm packages

event.target.valueをStringとして取得します。今回は、inputに渡して使いました。

コード

書いたコードがこちら。

import Html exposing (Html, Attribute, div, input, text)
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import String

main =
  App.beginnerProgram { model = model, view = view, update = update }

-- Model

type alias Model =
  { content: String

  }

model : Model
model =
  { content = "" }

-- Update

type Msg
  = Change String

update : Msg -> Model -> Model

update msg model =　-- 今回、msgにはonInputからStringの入力値が渡される
  case msg of
    Change newContent ->
      { model | content = newContent }

-- View

view : Model -> Html Msg
view model =
  div []
     -- onInputは入力ごとにvalueをupdateのChangeアクションに渡す。
    [ input [ placeholder "Text to reverse", onInput Change] []
    , div [] [ text (String.reverse model.content) ]
    ]