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

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

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

Event Stream Snapshot = State

4UBUF 7JFX

4FSWFS4UBUF )5.- Oldschool Web App 63-

4FSWFS $MJFOU HTML AJAX AJAX1 AJAX2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#''ͷ࿩ #BDLFOE'PS'SPOUFOE

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

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

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

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

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

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

7JFXͷઃܭͰߟ͑Δ͜ͱ

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

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

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

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

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

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

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

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

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

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

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

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

ΤϯδχΞͱͯ͠ ੜ͖࢒Γ·͠ΐ͏

͓ΘΓ

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

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

More Decks by Koutarou Chikuba

Other Decks in Programming

Featured

Transcript

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

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