Save 37% off PRO during our Black Friday Sale! »

ライブで学ぶ The Elm Architecture #meguroes / Meguro ES 23rd

332f89cc697355902a817506b6995f2b?s=47 y_taka_23
October 10, 2019

ライブで学ぶ The Elm Architecture #meguroes / Meguro ES 23rd

Meguro.es # 23 で使用したスライドです。

当日の形式は、簡単な Elm のサンプルアプリを題材としたライブコーディングです。スライド中にあげたソースコードは、実際には発表中にその場で編集・ビルドしつつ、機能が追加されていく様子をリアルタイムにお見せしました。

イベント概要:https://meguroes.connpass.com/event/140366/

332f89cc697355902a817506b6995f2b?s=128

y_taka_23

October 10, 2019
Tweet

Transcript

  1. ライブで学ぶ The Elm Architecture チェシャ猫 (@y_taka_23) Meguro.es #23 (2019/10/10) #meguroes

  2. Elm http://elm-lang.org #meguroes

  3. 目的特化 AltJS、Elm • Web フロントエンドに特化 ◦ サーバサイドは守備範囲外 • 必要最小限の言語使用 ◦

    Haskell と似ているがかなり機能が絞られている • フレームワークと不可分 ◦ 面倒な部分はすべて隠蔽されている ◦ The Elm Architecture 略して TEA #meguroes
  4. 前々回の発表 #meguroes

  5. Msg Model Html (rendering) update view #meguroes

  6. Msg Model Html (rendering) update view Model の更新 #meguroes

  7. Msg Model Html (rendering) update view vDOM に反映 #meguroes

  8. #meguroes Msg Model Html (rendering) update view #meguroes Msg を起点とする一方向性

  9. Elm 書いたことある人? #meguroes

  10. (以下、ライブコーディング) #meguroes

  11. 完成イメージ #meguroes

  12. 1. アプリが持つデータを描画 #meguroes

  13. Msg Model Html (rendering) update view #meguroes [ "Initial Message

    2" , "Initial Message 1" ] <ul> <li>Initial Message 2</li> <li>Initial Message 1</li> </ul>
  14. #meguroes type alias Comment = String type alias Model =

    { comments : List Comment } initComments : List Comment initComments = [ "Initial Message 2" , "Initial Message 1" ]
  15. #meguroes view : Model -> Html Msg view model =

    div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." ] , button [] [ text "Submit" ] , ul [] <| List.map comment model.comments ] comment : Comment -> Html Msg comment c = li [] [ text c ]
  16. 2. 新しいコメントを追加 #meguroes

  17. Msg Model Html (rendering) update view #meguroes [ "New Message"

    , "Initial Message 2" , "Initial Message 1" ] [ "Initial Message 2" , "Initial Message 1" ] AddComment "New Message"
  18. #meguroes type Msg = NoOp | AddComment Comment update :

    Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of NoOp -> ( model, Cmd.none ) AddComment c -> ( { model | comments = c :: model.comments } , Cmd.none )
  19. #meguroes view : Model -> Html Msg view model =

    div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." ] , button [ onClick <| AddComment "New Message" ] [ text "Submit" ] , ul [] <| List.map comment model.comments ]
  20. 3. ユーザ入力の取得と反映 #meguroes

  21. Msg Model Html (rendering) update view #meguroes AddComment $('#input').val()

  22. Msg Model Html (rendering) update view #meguroes [ "Initial Message

    2" , "Initial Message 1" ] SetInput "Current Input" "" "Current Input" [ "Initial Message 2" , "Initial Message 1" ]
  23. Msg Model Html (rendering) update view #meguroes [ "Current Input"

    , "Initial Message 2" , "Initial Message 1" ] [ "Initial Message 2" , "Initial Message 1" ] AddComment "Current Input" ""
  24. #meguroes update : Msg -> Model -> ( Model, Cmd

    Msg ) update msg model = case msg of SetInput c -> ( { model | currentInput = c }, Cmd.none ) AddComment -> ( { model | currentInput = "" , comments = model.currentInput :: model.comments } , Cmd.none )
  25. #meguroes view : Model -> Html Msg view model =

    div [] [ h1 [] [ text "Guestbook" ] , input [] [ type_ "text" , placeholder "Message..." , onInput SetInput , value model.currentInput ] , button [ onClick AddComment ] [ text "Submit" ] , ul [] <| List.map comment model.comments ]
  26. Would You Like a Cup of TEA? Presented by チェシャ猫

    (@y_taka_23) #meguroes