ProgramJavaScriptAltJSElmElmガイド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
 45
import Browser
import Html exposing (Html, Attribute, div, input, text)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
 
 
-- MAIN
 
main =
  Browser.sandbox { init = init, update = update, view = view }
 
 
-- MODEL
 
type alias Model =
  { content : String
  }
 
 
init : Model
init =
  { content = "" }
 
 
-- UPDATE
 
type Msg
  = Change String
 
 
update : Msg -> Model -> Model
update msg model =
  case msg of
    Change newContent ->
      { model | content = newContent }
 
 
-- VIEW
 
view : Model -> Html Msg
view model =
  div []
    [ input [ placeholder "Text to reverse", value model.content, onInput Change ] []
    , div [] [ text (String.reverse model.content) ]
    ]

うーん、なんか分かりづらいなー。

文字列を反転させる処理は、どこに入っているんだろう?と思ったけど、
view関数の中に「(String.reverse model.content)」という記述があって、
なんか場所が変じゃね?と思いました。

UPDATEが「状態の更新」なら、そこに置いてある方が自然な感じがすると思うんだけど、どうなんだろ?
今の段階では、あまり深く考え込まないで、Elmガイドを先に読み進めてみます。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-11-10 (日) 16:57:40 (1d)