Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今、我々は、 GUI の設計について 何を考えるべきか
Search
Koutarou Chikuba
September 20, 2017
Programming
18
18k
今、我々は、 GUI の設計について 何を考えるべきか
フロントエンドの React Redux Rx などの設計パターンを元に GUI 設計について考えてみました
Koutarou Chikuba
September 20, 2017
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
CI/CD 改善の勘所
mizchi
0
130
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.4k
V8 as a container on CDN Edge worker
mizchi
6
2.3k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
8
4.5k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
7
2.5k
「フロントエンド領域」を再定義する
mizchi
50
37k
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
1
180
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
990
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
500
CSC305 Lecture 04
javiergs
PRO
0
250
Reduxモダナイズ 〜コードのモダン化を通して、将来のライブラリ移行に備える〜
pvcresin
2
690
私はどうやって技術力を上げたのか
yusukebe
43
17k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.3k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
610
CSC305 Lecture 02
javiergs
PRO
1
260
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
150
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Scaling GitHub
holman
463
140k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Site-Speed That Sticks
csswizardry
11
880
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Bash Introduction
62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Transcript
ࠓɺզʑɺ 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 ઃܭٕ๏ͨͿΜࢮͳͳ͍
ΤϯδχΞͱͯ͠ ੜ͖Γ·͠ΐ͏
͓ΘΓ