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
120
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
16
5.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.3k
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
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
610
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
180
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
480
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
350
私の後悔をAWS DMSで解決した話
hiramax
4
170
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
tool ディレクティブを導入してみた感想
sgash708
1
150
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GitHub's CSS Performance
jonrohan
1032
460k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Code Reviewing Like a Champion
maltzj
525
40k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Documentation Writing (for coders)
carmenintech
73
5k
Unsuck your backbone
ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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 ઃܭٕ๏ͨͿΜࢮͳͳ͍
ΤϯδχΞͱͯ͠ ੜ͖Γ·͠ΐ͏
͓ΘΓ