$30 off During Our Annual Pro Sale. View Details »

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

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

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

Koutarou Chikuba

September 20, 2017
Tweet

More Decks by Koutarou Chikuba

Other Decks in Programming

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