Elm 入門

Transcript

1. Elm ⰅꟌ
2. ⯽盛䖊☭╚ About Me ,OPWPVS 転転創意 - 前端⼯工程師
3. About Elm .BEF
   CZ λ'VODUJPOBM
   1SPHSBNNJOH 7JSUVBM
   %0. 'SJFOEMZ
   FSSPS
   NFTTBHFT /P
   SVOUJNF
   FSSPS 4QBDF
   *OEFOU
4. Performance #MB[JOH
   'BTU
   )5.-
   
   3PVOE
   5XP 0OMJOF
   5FTU
   5PPM
5. Elm Platform # Mac Homebrew brew cask install elm-platform # Or by npm sudo npm i elm -g  FMNSFQM❜✽䒭➝꬗
    FMNNBLF管陼䧭
   +4
    FMNSFBDUPSEFW
   XFCTFSWFS
    FMNQBDLBHF⺫盘椚㐼FMNTUVFMNQBDLBHFKTPO
6. harvest.moe +
7. 㛇劥铃岁
8. -- Single line comment {- Multiline comment -} True | False -- Bool 42 -- Int 3.14 -- Float 'a' -- Char "abc" -- String "a" ++ "b" -- Multiline String """ Line 1 Line 2 """ 㛇劥㘗䢀
9. -- List Int [ 1, 2, 3, 4 ] 1 :: 2 :: [ 3, 4 ] [ 1, 2 ] ++ [ 3, 4 ] -- List String [ "One" , "Two" , "Three" ] List
10. div [ class "block" ] [ text "Hello Elm" ] div [ class "users" ] [ button [ class "get-random" ] [ text "Get random user"] , div [ class "user-details" ] [ h1 [ class "user-name" ] [ text "Username" ] , h4 [ class "user-email" ] [ text "Email" ] , a [ class "user-website" , href "link" ] [ text "Website" ] ] ] "UUSJCVUFT $POUFOUT DOM
11. user = { name = "Username" , email = "my@email.com" } user.name { name } = user { user | name = "New Name" } -- Update Records
12. List.head [ 1, 2, 3, 4 ] == Just 1 List.head [] == Nothing Maybe.withDefault 0 (Just 1) == 1 Maybe.withDefault 0 Nothing == 0 Maybe &MN
    尝剤
    OVMM
13. n = 2 if n /= 2 then "Not equal" else if n == 2 then "Equal" else "Do Nothing" 䗳갭㹒デ If … else
14. n = 2 case n of 1 -> "case n == 1:" 2 -> "case n == 2:" _ -> “default:" &MN
    剚䓽ⵖ銴⡹⴪ⴀ䨾剤〳腋䚍⡎♶剚嫦妄鿪僽
    
    @ Case … of
15. Let … in let a = 2 b = 3 in a + b
16. ⴅ䒭
18. ⴅ䒭
19. add : Int -> Int -> Int add arg1 arg2 = arg1 + arg2 add 1 2 -- add(1)(2) 1 + 2 (+) 1 2 㔐⫄㘗䢀 $VSSJFE
    'VODUJPO ⿮侸㘗䢀 䲾鶤
    
    ꬌ䓽ⵖ 穡圓 㻜⡲
20. ⼣そⴅ䒭 (\x y -> x + y) 1 2 -- 3 List.map (\x -> x + 1) [ 1, 2, 3 ] -- [ 2, 3, 4 ] List.map (\user -> user.name ) [{ name = "Someone" }] -- [ "Someone" ] List.map .name [{ name = "Someone" }]
21. type alias Str = String type alias Numbers = List Int -- Record is not a type type alias User = { name : String , email : String } Type Alias
22. type alias User = { name : String , email : String } user = { name = "Username" , email = "my@email.com" } getUserName : ? -> String getUserName : { name : String, email : String } -> String getUserName : { a | name : String } -> String getUserName : User -> String getUserName user = user.name getUserName { name } = name BOZUIJOH
23. Pipe Operator num = 2 add 4 (multiply 2 num) -- 8 num |> multiply 2 |> add 4 add 4 <| multiply 2 <| num num * 2 + 4 num |> (*) 2 |> (+) 4
24. 垸穉
25. module Main exposing (..) import Calculator exposing (..) Calculator.addOne Calculator.minusOne 1 addOne 1 minusOne 1 import Calculator exposing (addOne) Calculator.minusOne 1 -- pass minusOne 1 -- error Calculator.elm module Calculator exposing (..) addOne args = args + 1 minusOne args = args - 1 Main.elm 嫦⦐墂呪Ꟛ걧䗳꨾㹒デ
    NPEVMF 
    ➿邍鿈ⴅ䒭〳䭸㹁そ珖 FYQPTJOH
    剤㹒デ儘〳湬䱺⢪欽 〫腋湬䱺ㄎ〭
    BEE0OF
26. module Main exposing (..) import Toolbox.Calculator as Calculator Toolbox.Calculator.addOne Calculator.addOne module Toolbox.Calculator exposing (..) Toolbox/Calculator.elm Main.elm ♶⢪欽
    BT
27. module Main exposing (..) import Toolbox.Calculator as Calculator module Toolbox.Calculator exposing (..) import Main as Main
28. The Elm Architecture 7JFX .PEFM 6QEBUF Msg ͡o ͜ ʖ ͡o
29. Union Type type Door = Open | Close type Movie = Add String | Remove String Add "Ghost in the Shell" Remove "Twilight" 䖕꬗〳䱺⿮侸⺫䭍Ⱖ➮
    6OJPO
    5ZQF
30. IUUQTFMMJFBQQDPN:8Q#9EUT/LB 眕⢿
    
    ⸈幾㐼 type alias Model = Int model : Model model = 0 main = Html.beginnerProgram { model = model , view = view , update = update } view : Model -> Html Msg view model = div [] [ button [ onClick Increment ] [ text "+" ] , span [] [ text (toString model) ] , button [ onClick Decrement ] [ text "-" ] ] type Msg = Increment | Decrement update : Msg -> Model -> Model update msg model = case msg of Increment -> model + 1 Decrement -> model - 1 玑䒭鹎Ⰵ럊 蕰♶⺫わ✲⟝⵱欽
    )UNM
    NTH
31. Html Program Html.beginnerProgram { model = model , view = view , update = update } -- OR Html.program { init = (model, Cmd.none) , view = view , update = update , subscriptions = subscriptions } subscriptions : Model -> Sub Msg subscriptions model = Sub.none $NE涮鷑
    "+"9《䖤植㖈徿롗⡙縨禺窡儘꟦瘞 4VC䭰糵鎹ꏗ徿롗⡙縨禺窡儘꟦瘞✲⟝
32. 㼠呪卺圓 ,OPWPVSFMNBSDIJUFDUVSFFYBNQMF
    
    .BJO
    .PEFM .PEFM .PEFM
    
    .BJO
    .TH .TH .TH
    
    .BJO
    6QEBUF 6QEBUF 6QEBUF
33. Elm DevTool
35. Ⰵ㗄⛓⵹
37. ꅾ侮䙼筱
39. ꅾ侮䙼筱 矦悦涸玑䒭焺
40. ꅾ侮䙼筱 矦悦涸玑䒭焺 崞鬪涸爢纈
41. 崞鬪涸爢纈
43. 䙼筱秗✥
44. 䙼筱秗✥ 幋✥涸玑䒭焺
46. 䙼筱秗✥ 幋✥涸玑䒭焺 ♶崞鬪涸爢纈
47.    4JHOBM 5IF
    &MN
    "SDIJUFDUVSF 刿佖鿈ⴕ铃岁 䬚唳
    4JHOBM ♶崞鬪涸爢纈  ♶幢嘽涸俒⟝
     鏪㢵爢纈涸
    QBDLBHF
    尝糒糵刿倞⟃騈♳晝劥隶⻋
48. 箁♳须彂
49. &MNUX 0DJBM
    4JUF
    #VJMU
    8JUI
    &MN 5SZ
    &MN
    &MMJF 箁♳须彂 "XFTPNF
    &MN
    (BNF
    %FWFMPQNFOU
    3FBDU
    &MN
    $PNQPOFOUT
    &MN
    $IFBU
    4IFFU &MN
    5VUPSJBM
50. 闒闒