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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

目的特化 AltJS、Elm ● Web フロントエンドに特化 ○ サーバサイドは守備範囲外 ● 必要最小限の言語使用 ○ Haskell と似ているがかなり機能が絞られている ● フレームワークと不可分 ○ 面倒な部分はすべて隠蔽されている ○ The Elm Architecture 略して TEA #meguroes

Slide 4

Slide 4 text

前々回の発表 #meguroes

Slide 5

Slide 5 text

Msg Model Html (rendering) update view #meguroes

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Elm 書いたことある人？ #meguroes

Slide 10

Slide 10 text

（以下、ライブコーディング） #meguroes

Slide 11

Slide 11 text

完成イメージ #meguroes

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Msg Model Html (rendering) update view #meguroes [ "Initial Message 2" , "Initial Message 1" ]

Initial Message 2
Initial Message 1

Slide 14

Slide 14 text

#meguroes type alias Comment = String type alias Model = { comments : List Comment } initComments : List Comment initComments = [ "Initial Message 2" , "Initial Message 1" ]

Slide 15

Slide 15 text

#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 ]

Slide 16

Slide 16 text

2. 新しいコメントを追加 #meguroes

Slide 17

Slide 17 text

Msg Model Html (rendering) update view #meguroes [ "New Message" , "Initial Message 2" , "Initial Message 1" ] [ "Initial Message 2" , "Initial Message 1" ] AddComment "New Message"

Slide 18

Slide 18 text

#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 )

Slide 19

Slide 19 text

#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 ]

Slide 20

Slide 20 text

3. ユーザ入力の取得と反映 #meguroes

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

#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 )

Slide 25

Slide 25 text

#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 ]

Slide 26

Slide 26 text

Would You Like a Cup of TEA? Presented by チェシャ猫 (@y_taka_23) #meguroes