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

by Koutarou Chikuba

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Event Stream Snapshot = State

Slide 4

Slide 4 text

4UBUF 7JFX

Slide 5

Slide 5 text

4FSWFS4UBUF )5.- Oldschool Web App 63-

Slide 6

Slide 6 text

4FSWFS $MJFOU HTML AJAX AJAX1 AJAX2

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Redux •predictable state manager (ࣗশ) •combineReducers Ͱ ෳ਺ͷ reducer ΛଋͶͯ৽͍͠ reducer Λ࡞Δ •Action ͕དྷΔ౓ʹશͯͷ reducer ʹྲྀ͢ •reducer ͸ࣗ෼ʹڵຯ͕͋Δऀ͚ͩั·͑ͯߋ৽ॲཧΛ͢Δ

Slide 13

Slide 13 text

"DUJPO "DUJPO "DUJPO "DUJPO EventStream Reducer 4UBUF "DUJPO 4UBUF 4UBUF "DUJPO 4UBUF 4UBUF "DUJPO 4UBUF 4UBUF Snapshot 4UBUF 4UBUF

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

#''ͷ࿩ #BDLFOE'PS'SPOUFOE

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

7JFXͷઃܭͰߟ͑Δ͜ͱ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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