TEA++

 TEA++

TEA で SPA を色々やって遊ぶ

Dc32f175bec875eed2147b404f9bdc5a?s=128

Yosuke Torii

August 25, 2019
Tweet

Transcript

  1. TEA++ &WPMWJOHUIF&MN"SDIJUFDUVSF !KJOKPS

  2. !KJOKPS :PTVLF5PSJJ "VUIPSPGʮجૅ͔ΒΘ͔Δ&MNʯ 8SJUJOH&MNBU*EFJO*OD 1SPpMF

  3. 5&"

  4. 5IF&MN"SDIJUFDUVSF

  5. )551 $PVOUFS 'PSN 5&"JTFBTZ

  6. 3FVTBCMF$PNQPOFOUT 41" *ODSFNFOUBMTFBSDI 'PSNWBMJEBUJPO 8FC4PDLFU -PDBM4UPSBHF 3FTQPOTJWF %BUF1JDLFS 0"VUI $PPLJF

    $PFEJUJOH (SBQI2- 'JSFCBTF .JDSPTFSWJD VOUJMXFGBDFSFBMQSPCMFNT
  7. 41"JTEJ⒏DVMU

  8. 4JNQMF"SDIJUFDUVSF ʴ $PNNVOJUZT1SBDUJDF

  9. 4JNQMF"SDIJUFDUVSF ʴ $PNNVOJUZT1SBDUJDF

  10. )JTUPSZPG5SJBMTBOE&SSPST

  11. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  12. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  13. None
  14. "T5IF&MN"SDIJUFDUVSF FNFSHFE JUCFDBNFDMFBSUIBU ZPVDPVMEEPBMNPTUBMMZPVS &MNQSPHSBNNJOHXJUIPVU UIJOLJOHBCPVUTJHOBMTBUBMM4P UIFTUBSUBQQQBDLBHFXBTBO FYQFSJNFOUUPTFFXIBU IBQQFOTXIFOXFQVTITJHOBMT XBZMBUFSJOUIFMFBSOJOHQBUI

    5IFSFTVMUTXFSFHSFBU'PMLT XFSFHFUUJOHTUBSUFERVJDLFS  NBLJOHJUGBSUIFS BOEIBWJOH NPSFGVO*OUIFFOE XFIBE MPUTPGGPMLTXIPCFDBNF FYDFMMFOU&MNQSPHSBNNFST XJUIPVUFWFSSFBMMZMFBSOJOH NVDIBCPVUTJHOBMT5IFZXFSF OPUOFDFTTBSZ 5IF&MN"SDIJUFDUVSF͕ొ৔͢Δ ͱɺ৴߸Λ·ͬͨ͘ߟ͑ͣʹ΄ͱ ΜͲ͢΂ͯͷ&MNϓϩάϥϛϯά Λ࣮ߦͰ͖Δ͜ͱ͕໌Β͔ʹͳΓ ·ͨ͠ɻ͕ͨͬͯ͠ɺTUBSUBQQ ύοέʔδ͸ɺֶशύεͷޙ൒Ͱ γάφϧΛϓογϡͨ͠ͱ͖ʹԿ ͕ى͜Δ͔Λ֬ೝ͢ΔͨΊͷ࣮ݧ Ͱͨ͠ɻ݁Ռ͸ૉ੖Β͔ͬͨ͠Ͱ ͢ʂਓʑ͸ΑΓૣ࢝͘ΊɺΑΓԕ ͘ʹɺͦͯ͠΋ͬͱָ͠ΜͰ͍ ͨʂ࠷ऴతʹ͸ɺγάφϧʹ͍ͭ ͯଟ͘ΛֶͿ͜ͱͳ͘༏लͳ&MN ϓϩάϥϚʔʹͳͬͨଟ͘ͷਓʑ ͕͍·ͨ͠ɻͦΕΒ͸ඞཁ͋Γ· ͤΜͰͨ͠ɻ
  15. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  16. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  17. ͜Ε͸ɺਓʑΛ࿭Θ͍ͤͯ·ͨ͠ɻෆద੾ͳঢ়گ ͰͦΕΒΛ࢖͍͗͢ͳ͍Α͏ʹɺਓʑ͕͜ΕΒͷ ֓೦ʹऔΓ૊Ή͜ͱ͕Ͱ͖ΔྫΛ༻ҙ͢Δඞཁ͕ ͋Γ·͢ɻ

  18. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  19. 5&" .PEFM 6QEBUF 7JFX 3FEVY /FTUFE$PNQPOFOUT 4UBSU"QQ &⒎FDUT *OUSPEVDF$NE /P/FTUFE$PNQPOFOUT

    /P'31 *OUSPEVDF4VCTDSJQUJPOT FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO CVJMUJO41"SPVUJOHT 4UBSU"QQ FMNTQBFYBNQMF7 3FBDU)PPLT
  20. $PNQMFUFMZSFBSDIJUFDUFWFSZUIJOH

  21. 4P UIFBSDIJUFDUVSFXBSpOJTIFE /0 CVUNVDICFUUFSUIBOCFGPSF

  22. 4P UIFBSDIJUFDUVSFXBSpOJTIFE /0 CVUNVDICFUUFSUIBOCFGPSF

  23. 5XPCFTUFYBNQMFT

  24. FMNQBDLBHFFMNMBOHPSH SUGFMENBOFMNTQBFYBNQMF IUUQTHJUIVCDPN IUUQTHJUIVCDPN

  25. QBDLBHFFMNMBOHPSH FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO $BDIFJO4FTTJPO -PHJO-PHPVU 4FTTJPOJO1BHF $SFEFOUJBMT 3PVUFUZQFT $36% 4LFMUPO

    -PBEJOHTUBUF
  26. QBDLBHFFMNMBOHPSH FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO $BDIFJO4FTTJPO -PHJO-PHPVU 4FTTJPOJO1BHF $SFEFOUJBMT 3PVUFUZQFT $36% 4LFMUPO

    -PBEJOHTUBUF
  27. 8IBUJT4FTTJPO

  28. module Page.X exposing (..) type alias Model = { ...

    } init : Foo -> Bar -> Model -> (Model, Cmd Msg) update : Baz -> Msg -> Model -> (Model, Cmd Msg, Event) view : Hoge -> Fuga -> Model -> Html Msg -- Main.elm pass concrete args explicitly -- which makes Main.elm dirty! -- -- Also, an extra event should be introduced -- to modify the global state.
  29. module Page.X exposing (..) type alias Model = { session

    : Session , ... } init : Session -> Model -> (Model, Cmd Msg) update : Msg -> Model -> (Model, Cmd Msg) view : Model -> Html Msg -- Main.elm passes session type which contains -- various contexts such as user/credential, -- cached data, etc.
  30. module Main exposing (..) getSession : Page -> Session getSession

    page = case page of FooPage { session } -> session BarPage { session } -> session ... -- Sometimes `setSession` or `updateSession` -- is also needed...
  31. 1SPT  .BJOFMNCFDPNFTDMFBOFS  5IFFYUFOTJPOJTDMPTFEJOUIFQBHF  (MPCBMTUBUFDBOCFEJSFDUMZNPEJpFE $POT  /FXCPJMFSQMBUFTBSFJOUSPEVDFE

     $PNNPOPQFSBUJPOTTIPVMECFIBOEMFEJO FBDIQBHF
  32. &YQFSJNFOU

  33. KJOKPSFMNUFBQQ IUUQTHJUIVCDPN

  34. QBDLBHFFMNMBOHPSH FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO $BDIFJO4FTTJPO -PHJO-PHPVU $SFEFOUJBMT 3PVUFUZQFT $36% 4LFMUPO -PBEJOHTUBUF

    3FUVSO FMNUFBQQ 4IBSFEFSSPS 4FTTJPOJO1BHF
  35. QBDLBHFFMNMBOHPSH FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO $BDIFJO4FTTJPO -PHJO-PHPVU $SFEFOUJBMT 3PVUFUZQFT $36% 4LFMUPO -PBEJOHTUBUF

    3FUVSO FMNUFBQQ 4IBSFEFSSPS 4FTTJPOJO1BHF
  36. module Page.X exposing (..) type alias Model = { ...

    } init : Session -> Model -> Return Model Msg update : Session -> Msg -> Model -> Return Model Msg view : Session -> Model -> Html Msg
  37. update : Session -> Msg -> Model -> Return Model

    Msg update session msg model = case msg of NoOp -> return model GetUser -> return model |> withTask (Api.getUser GotUser) GotUser user -> return model |> withSession (Session.setUser user session) |> withCommand ... -- There is no `Cmd.none`. -- -- More abstract than (Model, Cmd Msg), easy to -- extend the data structure.
  38. 1SPT  -FTTCPJMFSQMBUF  &BTZUPFYUFOEUIFA3FUVSOATUSVDUVSF $POT  %BUBqPXDBOCFDPNFNPSFDPNQMFY

  39. QBDLBHFFMNMBOHPSH FMNTQBFYBNQMF #SPXTFSBQQMJDBUJPO $BDIFJO4FTTJPO -PHJO-PHPVU $SFEFOUJBMT 3PVUFUZQFT $36% 4LFMUPO -PBEJOHTUBUF

    3FUVSO FMNUFBQQ 4IBSFEFSSPS 4FTTJPOJO1BHF 5IFSFBSFOPTJMWFSCVMMFUT 'JOEUIFCFTU5&"GPSZPVSBQQ
  40. 5IBOLZPV

  41. https://github.com/elm/package.elm-lang.org https://twitter.com/jinjor https://github.com/rtfeldman/elm-spa-example https://github.com/jinjor/elm-teapp