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

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

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

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

September 20, 2017
Tweet

Transcript

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

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

  3. Event Stream Snapshot = State

  4. 4UBUF 7JFX

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

  6. 4FSWFS $MJFOU HTML AJAX AJAX1 AJAX2

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

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

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

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

  11. Reducer • (prev: State, action: Action) => State w ͨͩͷؔ਺

    w ࠓͷঢ়ଶͱ"DUJPOΛҰͭͱͬͯ࣍ͷঢ়ଶΛ֬ఆ͢Δ w "DUJPOΛେྔʹྲྀ͠ଓ͚Ε͹ঢ়ଶ͸มԽ͢Δ
  12. Redux •predictable state manager (ࣗশ) •combineReducers Ͱ ෳ਺ͷ reducer ΛଋͶͯ৽͍͠

    reducer Λ࡞Δ •Action ͕དྷΔ౓ʹશͯͷ reducer ʹྲྀ͢ •reducer ͸ࣗ෼ʹڵຯ͕͋Δऀ͚ͩั·͑ͯߋ৽ॲཧΛ͢Δ
  13. "DUJPO "DUJPO "DUJPO "DUJPO EventStream Reducer 4UBUF "DUJPO 4UBUF 4UBUF

    "DUJPO 4UBUF 4UBUF "DUJPO 4UBUF  4UBUF Snapshot 4UBUF 4UBUF 
  14. "DUJPO "DUJPO "DUJPO "DUJPO 3FEVDFS 4UBUF "DUJPO 4UBUF 4UBUF "DUJPO

    4UBUF 4UBUF "DUJPO 4UBUF  "DUJPO "DUJPO 3FEVY.JEEMFXBSF4UBDL Redux middleware
  15. Redux Middleware •͋Δ Event Stream Λผͷ EventStream ʹม׵͢Δ૚ •Ұͭͷ Action

    ͕ෳ਺ͷ Action ʹม׵͞ΕͨΓɺMiddleware ಺෦Ͱঢ়ଶΛ࣋ͬͨΓ͢Δ •େ఍͸ૉ௨Γ •͜͜Λཧղ͢Δͷʹ͕͔͔࣌ؒͬͨʢ໊લ͕ѱ͍ʣ
  16. Rx ͱ Redux •EventStream(Observable) ΛΦϖϨʔλʔͰSnapshotʹมܗ͢Δ •EventStreamΛͦͷ··ѻ͏(Observable) ͔ɺ reducer ͱ͍͏ ܗʹݶఆ͢Δ͔͕͓΋ͳҧ͍

    •Redux ͱ͸,ͭ·Γ Rx ͷݶఆܥ •reducer = observable.reduce((state, action) => state) •Redux Middleware = Rx Operator
  17. ରαʔόʔαΠυ ΞʔΩςΫνϟઓུ

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

    )551ʹͳΕ͹·ͨมΘͬͯ͘Δ͕ʜ
  19. αʔόʔ ΫϥΠΞϯτ Responce Request Legacy Style

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

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

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

    w ઐ༻"1*͕ඞཁʁ
  23. ΫϥΠΞϯτ View API Pattern 7JFX"1* %# 6TFS*OGP

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

    ϞόΠϧΞϓϦͰଟ͍
  25. ΫϥΠΞϯτ GraphQL (SBQI2-&OEQPJOU %# 2VFSZ$PNQPTJUJPO GraphQL Query .PEFM3FTPMWFS 'JMUFS2VFSZ

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

    'JMUFS2VFSZ
  27. View API ͱ GraphQL w ߟ͑ͯΔ͜ͱ͸ಉ͡ w ΫϥΠΞϯτͰൃੜ͢ΔϦΫΤετΛຊʹ·ͱΊ͍ͨ w %#΁ͷϦΫΤετ͸αʔόʔͰ߹੒͢Δ

    w (SBQI2-͸σʔλΛߜΔػೳΛ࣋ͬͯΔ
  28. #''ͷ࿩ #BDLFOE'PS'SPOUFOE

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

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

  31. * BFF Architecture &OEQPJOU &OEQPJOU $PNQPOFOU $PNQPOFOU *TPNPSQIJD-BZFS $PNQPOFOU $PNQPOFOU

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

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

    ϑϨʔϜϫʔΫͱͯ͠ղܾͯ͠΄͍͠
  34. BFF Framework • Next.js - React • Nuxt.js - Vue

    • angular-universal
  35. 7JFXͷઃܭͰߟ͑Δ͜ͱ

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

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

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

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

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

  41. $PNQPOFOUͷ4OBQTIPUׂ౰ w $PNQPOFOUͷϧʔτཁૉ͕ɺͲͷ4UBUF 4OBQTIPU Λ"TTJHO ͞ΕΔ͔ w ੲͳ͕Βͷݴ༿Ͱݴ͑͹$POUSPMMFS w 3FEVYͳΒDPOOFDU࠷ۙͩͱTFMFDUPS

     w ͜͜ͷཻ౓͚ͩ͸ߟ͑ͳ͠ʹॻ͚ͳ͍ͷͰɺͪΌΜͱߟ͑Δ
  42. 4FMFDUPS w SFBDUKTSFTFMFDU w ؆୯ʹݴ͑͹ 3FBDUͷNBQ4UBUF5P1SPQT ͷෳࡶͰ࠷దԽ͞ Εͨ΍ͭ  w

    4OBQTIPU͔Βϧʔτͷ$PNQPOFOU΁ׂΓ౰ͯΔॲཧ
  43. 4OBQTIPU 0SHBOJTN 0SHBOJTN .PMFDVMF "UPN "UPN "UPN "UPN .PMFDVMF 4FMFDUPS

    ͕࣌ؒͳ͔ͬͨ
  44. ϑϩϯτΤϯυΤϯδχΞ ͷߟ͑Δࣄ

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

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

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

    w ઃܭٕ๏΋ͨͿΜࢮͳͳ͍
  48. ΤϯδχΞͱͯ͠ ੜ͖࢒Γ·͠ΐ͏

  49. ͓ΘΓ