今、我々は、 GUI の設計について 何を考えるべきか

フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました

Transcript

1. ࠓɺզʑ͸ɺ GUI ͷઃܭʹ͍ͭͯ
   ԿΛߟ͑Δ΂͖͔
   mizchi
   

   View Slide

2. લఏ
   w 41"͸΋͸΍(6*ઃܭͱେࠩͳ͍
   w ؔ਺ܕ'31ͱ͍͏ݴ༿ΛͰ͖Δ͚ͩ࢖Θͳ͍
   w ࢿྉ͖Ε͍ʹ࡞ΔͷΛ్தͰ๞͖ͨ
   
   

   View Slide

3. Event Stream Snapshot
   = State
   

   View Slide

4. 4UBUF
   7JFX
   

   View Slide

5. 4FSWFS4UBUF
   )5.-
   Oldschool Web App
   63-
   

   View Slide

6. 4FSWFS
   $MJFOU
   HTML
   AJAX
   AJAX1 AJAX2
   

   View Slide

7. 4FSWFS4UBUF
   $MJFOU$POUSPMMFS
   Client Side MVC
   )5.-
   3FXSJUF
   

   View Slide

8. 4FSWFS&WFOU
   &WFOU4USFBN
   'MVY
   7JFX
   4OBQTIPU
   6*&WFOU
   

   View Slide

9. 4FSWFS&WFOU
   &WFOU4USFBN
   + PWA
   7JFX
   4OBQTIPU
   6*&WFOU 8PSLFS&WFOU
   

   View Slide

10. Event Stream
    w ݱࡏͷΫϥΠΞϯτઃܭͷ؅ཧର৅
    w ଟछଟ༷ͳ&WFOU4USFBNΛ੾Γग़͢ͱ4UBUF͕֬ఆ
    w &WFOU4USFBN͔Β4OBQTIPUΛ੾Γग़͢खஈ͸৭ʑ
    

    View Slide

11. Reducer
    • (prev: State, action: Action) => State
    w ͨͩͷؔ਺
    w ࠓͷঢ়ଶͱ"DUJPOΛҰͭͱͬͯ࣍ͷঢ়ଶΛ֬ఆ͢Δ
    w "DUJPOΛେྔʹྲྀ͠ଓ͚Ε͹ঢ়ଶ͸มԽ͢Δ
    

    View Slide

12. Redux
    •predictable state manager (ࣗশ)
    •combineReducers Ͱ ෳ਺ͷ reducer ΛଋͶͯ৽͍͠ reducer
    Λ࡞Δ
    •Action ͕དྷΔ౓ʹશͯͷ reducer ʹྲྀ͢
    •reducer ͸ࣗ෼ʹڵຯ͕͋Δऀ͚ͩั·͑ͯߋ৽ॲཧΛ͢Δ
    

    View Slide

13. "DUJPO
    "DUJPO
    "DUJPO
    "DUJPO
    EventStream Reducer
    4UBUF "DUJPO
    4UBUF
    4UBUF "DUJPO
    4UBUF
    4UBUF "DUJPO
    4UBUF
    
    4UBUF
    Snapshot
    4UBUF
    4UBUF
    
    

    View Slide

14. "DUJPO
    "DUJPO
    "DUJPO
    "DUJPO
    3FEVDFS
    4UBUF "DUJPO
    4UBUF
    4UBUF "DUJPO
    4UBUF
    4UBUF "DUJPO
    4UBUF
    
    "DUJPO
    "DUJPO
    3FEVY.JEEMFXBSF4UBDL
    Redux
    middleware
    

    View Slide

15. Redux Middleware
    •͋Δ Event Stream Λผͷ EventStream ʹม׵͢Δ૚
    •Ұͭͷ Action ͕ෳ਺ͷ Action ʹม׵͞ΕͨΓɺMiddleware
    ಺෦Ͱঢ়ଶΛ࣋ͬͨΓ͢Δ
    •େ఍͸ૉ௨Γ
    •͜͜Λཧղ͢Δͷʹ͕͔͔࣌ؒͬͨʢ໊લ͕ѱ͍ʣ
    

    View Slide

16. Rx ͱ Redux
    •EventStream(Observable) ΛΦϖϨʔλʔͰSnapshotʹมܗ͢Δ
    •EventStreamΛͦͷ··ѻ͏(Observable) ͔ɺ reducer ͱ͍͏
    ܗʹݶఆ͢Δ͔͕͓΋ͳҧ͍
    •Redux ͱ͸,ͭ·Γ Rx ͷݶఆܥ
    •reducer = observable.reduce((state, action) =>
    state)
    •Redux Middleware = Rx Operator
    

    View Slide

17. ରαʔόʔαΠυ
    ΞʔΩςΫνϟઓུ
    

    View Slide

18. ΫϥΠΞϯτઃܭ࣌ʹ
    ରαʔόʔαΠυͰߟ͑Δࣄ
    w ௨৴ຊͰΫϥΠΞϯτͷΫϥΠΞϯτͷࡉ͔͍࠷దԽ͸
    ਧ͖ඈͿ NTd
    
    w ϦΫΤετ͸গͳ͚Ε͹গͳ͍΄Ͳྑ͍
    w )551ʹͳΕ͹·ͨมΘͬͯ͘Δ͕ʜ
    

    View Slide

19. αʔόʔ
    ΫϥΠΞϯτ
    Responce
    Request
    Legacy Style
    

    View Slide

20. αʔόʔ
    ΫϥΠΞϯτ
    HTML
    AJAX
    AJAX1 AJAX2
    

    View Slide

21. ΫϥΠΞϯτ
    REST API
    JUFNT VTFST
    %#
    

    View Slide

22. ໰୊
    w 3&45"1*ͷந৅͸ΫϥΠΞϯτͷϢʔεέʔεͷෳࡶԽ
    w ϦΫΤετͷฒྻԽ
    w ΫϥΠΞϯτϩδοΫͰϦϨʔγϣϯ͕൑໌ͯ͠/
    w %#΁ͷඇޮ཰ͳ໰͍߹Θͤ
    w ઐ༻"1*͕ඞཁʁ
    

    View Slide

23. ΫϥΠΞϯτ
    View API Pattern
    7JFX"1*
    %#
    6TFS*OGP
    

    View Slide

24. View API Pattern
    w "1*&OEQPJOUͰϞσϧΛ߹੒͢Δ
    w $POTVNFS%SJWFO$POUSBDU
    w ࣮ࡍʹ͸3&45ͱซ༻͞ΕΔ͜ͱ͕ଟ͍ͷͰ͸
    w ϞόΠϧΞϓϦͰଟ͍
    

    View Slide

25. ΫϥΠΞϯτ
    GraphQL
    (SBQI2-&OEQPJOU
    %#
    2VFSZ$PNQPTJUJPO
    GraphQL Query
    .PEFM3FTPMWFS
    'JMUFS2VFSZ
    

    View Slide

26. GraphQL
    w ΫϥΠΞϯτ͔ΒͷΫΤϦൃߦ ෳ਺Ϧιʔεͷ߹੒
    
    w ΫΤϦΛ෼ղͯ͠ෳ਺ͷ3FTPMWFS΁ͷϦΫΤετ
    w ΫΤϦ͸ࣗ෼ʹΑͬͯඞཁͳύϥϝʔλΛࢦఆ͍ͯ͠Δͷ
    ͰɺͦΕ͚ͩฦ٫ 'JMUFS2VFSZ
    
    

    View Slide

27. View API ͱ GraphQL
    w ߟ͑ͯΔ͜ͱ͸ಉ͡
    w ΫϥΠΞϯτͰൃੜ͢ΔϦΫΤετΛຊʹ·ͱΊ͍ͨ
    w %#΁ͷϦΫΤετ͸αʔόʔͰ߹੒͢Δ
    w (SBQI2-͸σʔλΛߜΔػೳΛ࣋ͬͯΔ
    

    View Slide

28. #''ͷ࿩
    #BDLFOE'PS'SPOUFOE
    
    

    View Slide

29. Real World : Multi Requests
    6TFS*OGP *UFNT
    )FBEFS $POUFOU
    4FSWFS
    

    View Slide

30. ૄͳίϯϙʔωϯτୡ
    w ͓ޓ͍ૄͳಠཱੑͷߴ͍ίϯϙʔωϯτ͕ෳ਺ͷϦΫΤ
    ετΛൃߦ
    w ϦΫΤετΛ·ͱΊΑ͏ʹ΋ɺΫϥΠΞϯτϩδοΫͱ
    αʔόʔΛڧௐͤ͞Δ͜ͱ͕Ͱ͖ͳ͍
    

    View Slide

31. *
    BFF Architecture
    &OEQPJOU &OEQPJOU
    $PNQPOFOU $PNQPOFOU *TPNPSQIJD-BZFS
    $PNQPOFOU $PNQPOFOU
    3FOEFS*OJUJBM4UBUF
    SFR
    

    View Slide

32. #''ͷղܾ͢Δ΋ͷ
    w ͦ΋ͦ΋ڠௐ͠ͳ͍͕ɺڠௐ͢Δ৔ॴΛαʔόʔʹ͢Δ
    w ॳճϦΫΤετ࣌ɺαʔόʔͰΫϥΠΞϯτϩδοΫΛ
    ൃߦ͠ɺඞཁͳϦΫΤετΛશ෦ऴ͔͑ͯΒॳظεςʔτ
    Λฦ٫
    w ͦͷޙ͸$PNQPOFOU͸ಠཱͯ͠Քಇ͢Δ
    w ࣗવͱ443ʹͳΔ
    

    View Slide

33. #''ͷ໰୊
    w ࣮࣭/PEFKTݶఆͷΞʔΩςΫνϟ
    w ࣗવͱϚΠΫϩαʔϏεԽ͕ཁٻ͞ΕΔ
    w ಉ͡σʔληϯλʔ಺Ͱ͋Δ͜ͱ΋ཁٻ͞ΕΔ
    w ໨తʹରͯ͠खஈ͕ա৒
    w ϑϨʔϜϫʔΫͱͯ͠ղܾͯ͠΄͍͠
    

    View Slide

34. BFF Framework
    • Next.js - React
    • Nuxt.js - Vue
    • angular-universal
    

    View Slide

35. 7JFXͷઃܭͰߟ͑Δ͜ͱ
    

    View Slide

36. 7JFXͷઃܭͰߟ͑Δ͜ͱ
    w ઃܭޙʹ7JFXͷ࣮૷ͷ࣌ʹԿΛ͢Δ͔ߟ͑ͨΒෛ͚
    w ن໿Ͱࣗಈతʹܾ·ΔΑ͏ʹ͢Δ΂͖
    

    View Slide

37. 7JFXͷ੹຿
    w 1SFTFOUBUJPO
    w &WFOUͷൃՐ UP&WFOU4USFBN
    
    

    View Slide

38. $PNQPOFOU
    w ଞͷ$PNQPOFOUϓϦϛςΟϒͳཁૉΛଋͶΔ୯Ґ
    w ೖྗ͞ΕΔܕΛܾΊΔ
    w ग़ྗ͠͏Δ&WFOUΛ$BMMCBDLͱඥ෇͚Δ
    w Ҏ্
    

    View Slide

39. $PNQPOFOUͷ෼ׂࢦ਑
    w ࠷ۙ΍ͬͯΑ͔ͬͨͷ͸"UPNJD%FTJHOͷ෦෼आ༻
    w ॴଐͰ͸ͳ͘ɺ෼ׂՄೳͳཻ౓ͷΈͰ෼ׂ͍ͯ͘͠
    w ΤϯδχΞ͔ΒݟΔͱཻ౓͸ϓϩάϥϚϒϧʹܾ·Δ
    w σβΠφ͔ΒݟΔͱ"UPNJD%FTJHOͱ͍͏ࢦ਑Λԉ༻Ͱ͖Δ
    

    View Slide

40. Atomic Design
    w "UPNTͦΕҎ্෼ׂͰ͖ͳ͍$PNQPOFOU
    w .PMFDVMFTෳ਺ͷ"UPNT͔ΒͳΔ$PNQPOFOU
    w 0SHBOJTNTෳ਺ͷ.PMFDVMFT"UPN͔ΒͳΔ$PNQPOFOU
    

    View Slide

41. $PNQPOFOUͷ4OBQTIPUׂ౰
    w $PNQPOFOUͷϧʔτཁૉ͕ɺͲͷ4UBUF 4OBQTIPU
    Λ"TTJHO
    ͞ΕΔ͔
    w ੲͳ͕Βͷݴ༿Ͱݴ͑͹$POUSPMMFS
    w 3FEVYͳΒDPOOFDU࠷ۙͩͱTFMFDUPS
    w ͜͜ͷཻ౓͚ͩ͸ߟ͑ͳ͠ʹॻ͚ͳ͍ͷͰɺͪΌΜͱߟ͑Δ
    

    View Slide

42. 4FMFDUPS
    w SFBDUKTSFTFMFDU
    w ؆୯ʹݴ͑͹
    3FBDUͷNBQ4UBUF5P1SPQT ͷෳࡶͰ࠷దԽ͞
    Εͨ΍ͭ
    
    w 4OBQTIPU͔Βϧʔτͷ$PNQPOFOU΁ׂΓ౰ͯΔॲཧ
    

    View Slide

43. 4OBQTIPU
    0SHBOJTN
    0SHBOJTN
    .PMFDVMF
    "UPN
    "UPN
    "UPN
    "UPN
    .PMFDVMF
    4FMFDUPS
    ͕࣌ؒͳ͔ͬͨ
    

    View Slide

44. ϑϩϯτΤϯυΤϯδχΞ
    ͷߟ͑Δࣄ
    

    View Slide

45. ࣍ͷੈ୅ͷٕज़
    w &WFOU4USFBN͸ܕ͋Γ͖ͷઃܭ
    w 'VODUJPOBM1SPHSBNNJOH8BZ
    w *TPNPSQIJDPO8FC"TTFNCMZ
    

    View Slide

46. ࣍ͷੈ୅͍ͭ
    w *&͕ࢮΜͩΒd
    w ͕͢͞ʹʹ͸ʜ
    w ϞόΠϧγΣΞͷ૿େͰ૬ରతʹࢮʹͦ͏ʢࢮͶͦ͏ʣ
    

    View Slide

47. ϑϩϯτΤϯυ͸
    ͜ͷઌੜ͖ͷ͜Δͷ͔
    w ϞόΠϧͷོ੝ʹରԠͯ͠3FBDU/BUJWF͕ಀ͛ޱͰ͸͋Δ͕ʜ
    w ϞόΠϧ΋͍͔ͭࢮ͵
    w +4͸ͨͿΜࢮͳͳ͍ ࢮͶͳ͍
    
    w ઃܭٕ๏΋ͨͿΜࢮͳͳ͍
    

    View Slide

48. ΤϯδχΞͱͯ͠
    ੜ͖࢒Γ·͠ΐ͏
    

    View Slide

49. ͓ΘΓ
    

    View Slide