• バックアップ一覧
• 差分 を表示
• ソース を表示
• バックアップ を表示
• Elm_guide_Forms へ行く。
  • 1 (2019-11-10 (日) 17:30:57)

• 追加された行はこの色です。
• 削除された行はこの色です。

#author("2019-11-10T08:30:57+00:00","default:sagasite","sagasite")
#author("2019-11-10T08:58:34+00:00","default:sagasite","sagasite")
[[Program]] ＞ [[JavaScript]] ＞ [[AltJS]] ＞ [[Elm]] ＞ [[Elmガイド>Elm_guide]] ＞ [[Elmアーキテクチャー>Elm_guide_The-Elm-Architecture]] ＞ フォーム

#norelated
#contents

//----------------------------------------
*フォーム [#l2f96d83]
-フォーム · An Introduction to Elm https://guide.elm-lang.jp/architecture/forms.html

#code(haskell){{
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)



-- MAIN


main =
  Browser.sandbox { init = init, update = update, view = view }



-- MODEL


type alias Model =
  { name : String
  , password : String
  , passwordAgain : String
  }


init : Model
init =
  Model "" "" ""



-- UPDATE


type Msg
  = Name String
  | Password String
  | PasswordAgain String


update : Msg -> Model -> Model
update msg model =
  case msg of
    Name name ->
      { model | name = name }

    Password password ->
      { model | password = password }

    PasswordAgain password ->
      { model | passwordAgain = password }



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Name" model.name Name
    , viewInput "password" "Password" model.password Password
    , viewInput "password" "Re-enter Password" model.passwordAgain PasswordAgain
    , viewValidation model
    ]


viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
  input [ type_ t, placeholder p, value v, onInput toMsg ] []


viewValidation : Model -> Html msg
viewValidation model =
  if model.password == model.passwordAgain then
    div [ style "color" "green" ] [ text "OK" ]
  else
    div [ style "color" "red" ] [ text "Passwords do not match!" ]
}}

うーん、何となく雰囲気だけはつかめるけど、やっぱまだよく分からないなー。
モヤモヤの一因は、VIEWの部分でHTMLをレンダリングする仕組みとかが、明確に分かっていないことだと思います。

表示部分が全て関数のパーツになっており、双方向データバインディングの実現を宣言的に書くという方法について、もう少し補足が必要ということでしょうかね？
あと、MODEL、UPDATE、VIEWという３つのパートからElmアプリが成る、ということだけど、全てが関数であり、VIEWも関数なので、VIEWにロジックが入りまくっていることが、通常のMVCモデルに慣れてる人から見ると、VIEWに違和感を感じる原因になっているかも？