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
75
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.3k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7k
V8 as a container on CDN Edge worker
mizchi
6
2.2k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
Improve my own Ruby
sisshiki1969
1
110
API for docs
soutaro
4
1.7k
オープンソースコントリビュート入門
_katsuma
0
130
Designing Your Organization's Test Pyramid ( #scrumniigata )
teyamagu
PRO
5
1.4k
エンジニア向けCursor勉強会 @ SmartHR
yukisnow1823
3
12k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
210
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
540
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
1
590
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
120
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
Cloudflare Workersで進めるリモートMCP活用
syumai
4
400
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.2k
How to Ace a Technical Interview
jacobian
276
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Embracing the Ebb and Flow
colly
85
4.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
Typedesign – Prime Four
hannesfritz
41
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
600
A Tale of Four Properties
chriscoyier
159
23k
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 ઃܭٕ๏ͨͿΜࢮͳͳ͍
ΤϯδχΞͱͯ͠ ੜ͖Γ·͠ΐ͏
͓ΘΓ