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
Clean Architecture in Web Frontend #mixleap
Search
Hiroyuki ANAI
December 20, 2018
Programming
3.2k
13
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Clean Architecture in Web Frontend #mixleap
Hiroyuki ANAI
December 20, 2018
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
書き換えて学ぶTemporal #fukts
pirosikick
2
420
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
3
490
compilerOptions、全部読んだ
pirosikick
1
300
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
540
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
490
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
6
17k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.9k
Web Share Target API #w3fukuoka
pirosikick
0
740
Google I/O '19のWebをまとめる会
pirosikick
2
890
Other Decks in Programming
See All in Programming
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
kosuket
0
420
生成AIで帳票OCRが「簡単に」作れる時代になった?
kon_shou
0
560
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
seike460
PRO
1
540
継続モナドとリアクティブプログラミング
yukikurage
3
690
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
210
VibeCodingからAgenticWorkflowへ
starfish719
0
300
霧の中の代数的エフェクト
funnyycat
1
480
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
290
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
luccafort
PRO
0
590
【SRE NEXT 2026 Lunch Session】一人目専任SREの立ち上げを加速する ― AIと進めたオンボーディングで2分を0.04秒にした話
pkshadeck
PRO
0
3.5k
「人を評価する AI」の設計と実装
ryoyanara
0
170
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.7k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
650
My Coaching Mixtape
mlcsv
0
200
AI Search: Where Are We & What Can We Do About It?
aleyda
0
7.8k
So, you think you're a good person
axbom
PRO
2
2.1k
How to Ace a Technical Interview
jacobian
281
24k
WCS-LA-2024
lcolladotor
0
790
Rebuilding a faster, lazier Slack
samanthasiow
85
9.6k
How to Talk to Developers About Accessibility
jct
2
490
Transcript
ΫϦʔϯΞʔΩςΫνϟ JO 8FCϑϩϯτΤϯυ !QJSPTJLJDL .JY-FBQ4UVEZ8FCϑϩϯτΤϯυฏ࠷ޙͷౙͷਞ
ࣗݾհ w!QJSPTJLJDL w݀Ҫ wϠϑʔגࣜձࣾ ΤϯδχΞ w+BWB4DSJQUനଳ wԬ͔Βདྷ·ͨ͠
3FBDUೖ3FBDUɾ3FEVYͷಋೖ͔ΒαʔόαΠυϨϯμϦϯάʹΑΔ69ͷ্·Ͱ IUUQTXXXTIPFJTIBDPKQCPPLEFUBJM
8&# %#13&44ͲΜͱ͍͜ʂϑϩϯτΤϯυ։ൃ ϠϑʔͷΤϯδχΞͰࣥච͍ͯ͠·͢ͷͰɺͥͻʂ ࠓ݄ൃചͷWPM!@@TBLJUP@@ʹΑΔʮ(BUTCZ+4ʯͰ͢ɻ
ΑΖ͘͠ ͓ئ͍க͠·͢
͢͜ͱ w ΫϦʔϯΞʔΩςΫνϟͱʁ w ΫϦʔϯΞʔΩςΫνϟΛ 8FCϑϩϯτΤϯυͰ࣮ͯ͠Έͨ w ࣮ޙͷײ
͞ͳ͍͜ͱ w 3FBDUKTͱʁ3FEVYͱʁ5ZQF4DSJQUͱʁ w Θ͔Βͳ͍෦͕͋Εɺ࠙ձ5XJUUFSͰ ؾܰʹ࣭͍ͯͩ͘͠͞ɻ
ҙ w ιʔείʔυ͕͍ͬͺ͍ग़͖ͯ·͢ w ݟͮΒ͚ΕεϥΠυΞοϓࡁΈͳͷͰ ͦͪΒΛ͝ཡ͍ͩ͘͞ w ΞϓϦέʔγϣϯશମҎԼͷϦϙδτϦʹ Ξοϓͯ͠·͢ w
QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO BSDIJUFDUVSF
ΫϦʔϯΞʔΩςΫνϟͱʁ w ʹϩόʔτɾ$ɾϚʔςΟϯࢯ͕ ϒϩάͰެ։ͨ͠ιϑτΣΞΞʔΩςΫνϟ w IUUQCMPHDMFBODPEFSDPNVODMFCPCUIF DMFBOBSDIJUFDUVSFIUNM w ݄ࠒɺॻ੶ग़൛͞ΕΔ w
ষ͕ϒϩάͱ΄΅ಉ͡༰ɺ ଞͷষͳͥͦ͏ͳͷ͔ʁͱ͍͏ͳͲ w ԁͷਤ͕༗໊
ԁͷਤ Ҿ༻ݩɿIUUQTCMPHDMFBODPEFSDPNVODMFCPCUIFDMFBO BSDIJUFDUVSFIUNM
ԁͷਤ ೖग़ྗ͔Βͷڑ ۙ ԕ
ԁͷਤ ґଘͷํ͕Ұํ
ԁͷਤ ֤ʹ͍ͭͯޙड़
ͬͱৄ͘͠ w 5IF$MFBO"SDIJUFDUVSF IUUQTCMPHDMFBODPEFSDPNVODMFCPC UIFDMFBOBSDIJUFDUVSFIUNM w ΫϦʔϯΞʔΩςΫνϟ 5IF$MFBO"SDIJUFDUVSF༁ IUUQTCMPHUBJOFUUIF@DMFBO@BSDIJUFDUVSFIUNM
w $MFBO"SDIJUFDUVSFୡਓʹֶͿιϑτΣΞͷߏͱઃܭ IUUQTXXXLBEPLBXBDPKQQSPEVDU
Αͦ͞͏ͳ w Ϗδωεϧʔϧ୯ମͰςετͰ͖Δ w Ϗδωεϧʔϧ͕%#ͳͲʹґଘ͍ͯ͠ͳ͍͔Β w ৄࡉΛϓϥάΠϯʹͰ͖Δ
ৄࡉͷϓϥάΠϯԽ w γεςϜʮํʯͱʮৄࡉʯͷ̎ͭʹྨͰ͖Δ w ํɿ Ϗδωεͷશͯͷϧʔϧखॱ γεςϜͷຊͷՁ w ৄࡉɿ ํʹ͍ͭͯΓऔΓ͢Δͷʹඞཁͳͷ͕ͩɺ
ํͷৼΔ͍ʹӨڹΛ༩͑ΔͷͰͳ͍ w ྫʣ*0σόΠεɺ%#ɺ'8ɺFUD
None
ৄࡉ ํ Ξμϓλʔ
ৄࡉํͷϓϥάΠϯ ґଘ ґଘ ৄࡉ ํ Ξμϓλʔ ํৄࡉͷ͜ͱΛΒͳ͍
ৄࡉํͷϓϥάΠϯ ґଘ ৄࡉ ํ Ξμϓλʔ ৄࡉ Ξμϓλʔ ґଘ ϓϥάΠϯ" ϓϥάΠϯ#
ৄࡉ͕มΘͬͯํʹӨڹग़ͳ͍
8FCϑϩϯτΤϯυʹ͓͚Δ ʮৄࡉʯ w '8ɾϥΠϒϥϦ w 3FBDUKT /FYUKT 7VF /VYUKT "OHVMBS
w σʔλΞΫηε w 3&45"1* (SBQI2- 'JSFCBTF H31$ w ఏڙํ๏ w $43ͷΈ $43 443 ".1 w FUD
8FCϑϩϯτΤϯυʹ͓͚Δ ʮৄࡉʯͷͭΒΈ w બࢶ͕ଟ͗͢Δ w ଟ͗͌͢ʂʂ w ਖ਼ղΛܾΊΔͷ͕͍͠ w ʮ࣌ͱ߹ʹΑΔʯ͕ଟ͍
w ࣌ͷྲྀΕͰਖ਼ղ͕มΘΔ w ಛʹ8FC'&ྲྀΕ͕͍
ΫϦʔϯΞʔΩςΫνϟʴ 8FCϑϩϯτΤϯυ w ৄࡉΛϓϥάΠϯʹͰ͖ΔͷͰɺ w ܾఆΛԆͰ͖Δ w ཁ͕݅Θ͔ͬͨஈ֊ͰܾఆͰ͖ΔͷͰదͳબ͕ Ͱ͖Δ w
ؒҧͬͯมߋ͕༰қ w ϓϥάΠϯΛ࡞ΕΑ͍
ΊͬͪΌΑͦ͞͏Μ
͕ɺͦΜͳʹ͏·͍͘͘ͷ͔ʁ
࣮͔ͯ֬͠ΊΔ w 5XJUUFSͬΆ͍8FCΞϓϦΛ࡞Γͳ͕Β͔֬ΊΔ w QJSPTJLJDLUXJUUFSMJLFBQQDMFBOBSDIJUFDUVSF IUUQTHJUIVCDPNQJSPTJLJDLUXJUUFSMJLFBQQDMFBO BSDIJUFDUVSF w ػೳΊͬͪΌͬͨ w
ϦπΟʔτɺ͍͍ͶɺͳͲҰ୴ແ͠
ଆ͔Β࡞͍ͬͯ͘
ΤϯςΟςΟ w ΤϯςΟςΟ ʹ࠷ॏཁϏδωεσʔλʴ࠷ॏཁϏδωεϧʔϧ w ࠷ॏཁϏδωεϧʔϧ Ϗδωεʹͱ͔ͬͯܽͤͳ͍ͷͰ͋ΓɺγεςϜ͕ࣗ ಈԽ͞Ε͍ͯͳͯ͘ଘࡏ͢Δ w ࠷ॏཁϏδωεσʔλ
࠷ॏཁϏδωεϧʔϧʹඞཁͳσʔλ
w ࠷ॏཁϏδωεσʔλ w Ϣʔβʔ w πΟʔτ w ࠷ॏཁϏδωεϧʔϧ w πΟʔτͷςΩετจࣈҎ
w Ϣʔβʔ໊จࣈҎ্ͷӳࣈ
ίʔυ σʔλͨͩͷ0CKFDU
ϧʔϧ७ਮͳؔ ίʔυ
w ʮγεςϜ͕ࣗಈԽ͞Ε͍ͯͳͯ͘ଘࡏ͢Δʯ w 5XJUUFSࣗಈԽલఏͷαʔϏεͰʁ w αϯϓϧͷςʔϚ ΦʔΫγϣϯͱ͔ͷํ͕Α͔ͬͨͷͰʁ w ࣍ճͷվળͱ͍͏͜ͱʹͯ͠ɺઌʹਐΈ·͢
Ϣʔεέʔε w ΞϓϦέʔγϣϯݻ༗ͷϏδωεϧʔϧ w Ϣʔβʔ͔ΒͷೖྗɺϢʔβʔʹ͢ग़ྗɺ ग़ྗΛੜ͢ΔεςοϓͳͲΛఆٛ w 6*ʹ͍ͭͯهड़͠ͳ͍ w σʔλΞΫηεͷΠϯλϑΣʔεΛϢʔεέʔεຖʹఆٛ
Ϣʔεέʔεͷܕʢ*6TF$BTFʣʜ ೖྗΛҾʹग़ྗΛ1SPNJTFͰฦ͢ ϢʔεέʔεͷϑΝΫτϦͷܕʢ*6TF$BTF'BDUPSZʣʜ σʔλΞΫηεΛҾʹϢʔεέʔεΛฦ͢ ॻ੶ɾϒϩάʹ࣮αϯϓϧ͕ແ͍ͷͰख୳ΓͰఆٛ
ߟ͑ͨϢʔεέʔε w αΠϯΞοϓॲཧ w αΠϯΠϯॲཧ w πΟʔτॲཧ w λΠϜϥΠϯදࣔॲཧ
ྫʣαΠϯΞοϓॲཧ w ೖྗɿϢʔβ໊ɺύεϫʔυɺग़ྗɿ࡞͞ΕͨϢʔβʔ w εςοϓɿ w ೖྗͷόϦσʔγϣϯΛ࣮ߦ w σʔλΞΫηεͷϢʔβʔ࡞ॲཧΛݺͼग़͢ w
࡞͞ΕͨϢʔβʔΛฦ͢ w σʔλΞΫηεɿ w Ϣʔβ໊͔ΒϢʔβʔͷऔಘʢϢʔβ໊ͷॏෳνΣοΫʣɺ Ϣʔβʔ࡞
ίʔυ
ΠϯλϑΣʔεͳͷͰอଘઌ͕Կͳͷ͔͔Βͳ͍ঢ়ଶ Ϣʔεέʔε͕Ͳ͏͍͏σʔλΞΫηεΛ͢Δͷ͔ɺͱ͍͏͜ͱ͚ͩΛఆٛ
None
None
*4JHO6Q 8JUI1BTTXPSE *4JHO6Q 8JUI1BTTXPSE 'BDUPSZ *4JHO6Q 8JUI1BTTXPSE 'BDUPSZ ͷ࣮ *4JHO6Q
8JUI1BTTXPSE *OQVU *4JHO6Q 8JUI1BTTXPSE 0VUQVU JOUFSGBDF JOUFSGBDF ੜ ࣮ ੜ *4JHO6Q 8JUI1BTTXPSE ͷ࣮ ࣮ *%BUB"DDFTT ར༻ ೖྗ ग़ྗ JOUFSGBDF
Ϣʔεέʔεຖʹ σʔλΞΫηεɺ*O0VUΛఆٛ *OQVU 4JHO6Q 6TF$BTF *%BUB"DDFTT 0VUQVU *OQVU 4JHO*O 6TF$BTF
*%BUB"DDFTT 0VUQVU *OQVU $SFBUF5XFFU 6TF$BTF *%BUB"DDFTT 0VUQVU ʜ
ΠϯλʔϑΣʔε Ξμϓλ w ํͱৄࡉͷڮ͠ w ྫ w ΤϯςΟςΟΛ%#Ͱѻ͍͍͢ܗࣜʹมɺ ·ͨͦͷٯ w
ΤϯςΟςΟΛ6*Ͱѻ͍͍͢ܗࣜʹมɺ ·ͨͦͷٯ w σʔλΞΫηεͷΠϯλϑΣʔεΞμϓλͱɺ 6*ͷσʔλϕʔεΞμϓλΛ࡞
6* ํ %# σʔλΞΫηεͷ ΠϯλϑΣʔεΞμϓλʔ 6*ͷ ΠϯλϑΣʔεΞμϓλʔ
σʔλΞΫηεͷ ΠϯλϑΣʔεΞμϓλ w ·ͩཁ͕͔݅Βͳ͍ͷͰࢼߦࡨޡ͍͢͠Α͏ʹ w Ұ୴ϝϞϦ্ʢม্ʣʹ σʔλΛอଘ͢Δ͚ͩͷͷΛ࡞Δ w .FNPSZ%BUB"DDFTT
None
7JFXଆͷ ΠϯλϑΣʔεΞμϓλ w ʮ͜ͷϨΠϠʔ(6*ͷ.7$Λશʹแ͢ΔͩΖ͏ʯ w ͱ͍͏͜ͱ'MVY͔͜͜ w 3FBDUKTΛ͏ͷͰɺ3FEVYΛ༻ w ΞΫγϣϯܦ༝ͰϢʔεέʔεΛݺͼग़͠ɺ
ग़ྗΛTUBUFʹઃఆ w Ϣʔεέʔεͷ࣮SFEVYUIVOLͷΧελϜҾ͔Βೖ
SFEVYUIVOLͷΧελϜҾ
SFEVYUIVOLͷΧελϜҾ ΧελϜҾ UIVOLΞΫγϣϯͷ ୈҾ
None
ৄࡉ ํ Ξμϓλʔ 6TF$BTF &OUJUZ *%BUB"DDFTT 3FEVY .FNPSZ %BUB"DDFTT ϝϞϦ
7JFX ʢ3FBDUKTʣ "DUJPO 4UBUF
.BJOίϯϙʔωϯτ w ΞϓϦέʔγϣϯͷى /PEFKTͳΒʮOPEFʙKTʯ ΫϥΠΞϯταΠυͳΒXFCQBDLͷFOUSZ w %*ίϯςφΛͬͯ ֤ϢʔεέʔεσʔλΞΫηεͷΠϯελϯεΛੜ w ࠓճ%*ίϯςφͱͯ͠BXJMJYΛ༻
w IUUQTXXXOQNKTDPNQBDLBHFBXJMJY
None
# ͜ΕͰͬͱ6*Ͱ֬ೝͰ͖Δঢ়ଶ
σʔλΞΫηεΛ มߋ͢Δ w αΠϯΞοϓɺαΠϯΠϯΛ࣮ͨ͋ͨ͠ΓͰɺ σʔλΛӬଓԽͨ͘͠ͳ͖ͬͯͨ w -PDBM4UPSBHF%BUB"DDFTTΛ࣮ͯ͠ɺ .FNPSZ%BUB"DDFTTͷΘΓʹೖ͢Δ͚ͩ
None
.FNPSZ%BUB"DDFTTͷΘΓʹ-PDBM4UPSBHF%BUB"DDFTTΛ %*ίϯςφʹಥͬࠐΉ͚ͩ Ϣʔεέʔε3FEVYͷBDUJPO$SFBUPSมߋແ͠ͰೖΕସ͑Մೳ
$ σʔλΞΫηεΛ ϓϥάΠϯԽͰ͖͍ͯΔ
॓ w ͕࣌ؒΓͳͯؒ͘ʹ߹Θͳ͔ͬͨ͜ͱ w σʔλΞΫηεΛ'JSFCBTFʹมߋ w $43͔Β$43 443ߏ w 443༻ͷ%BUB"DDFTTͱ$43༻ͷ%BUB"DDFTTΛ
࡞Ε͍͚ͦ͏ w /FYUKTͷҠߦ w ͍͚Δ͔ʁ
࣮ޙͷײ
σʔλΞΫηεͷ ϓϥάΠϯԽ w ඇৗʹΑ͍ w ࢼߦࡨޡͯ͠ΠϯλϑΣʔε͕҆ఆͨ͠ޙʹɺ ͲͷσʔλετΞΛ͏ͷ͔ɺ Ͳ͏͍͏εΩʔϚͰอଘ͢Δͷ͔ߟ͑ΕΑ͍ ˠɹదͳબ͕Ͱ͖ͦ͏ w
͏ͪΐͬͱݕূ͍ͨ͠ w Ϣʔεέʔε͕ͬͱ૿͑ͨ߹ʹͲ͏ͳΔ͔
7JFXଆͷϓϥάΠϯԽ w Α͍$ w 3FEVYͷBDUJPO͕γϯϓϧʹͳΔ ʢϢʔεέʔεΛݺͼग़͚ͩ͢ʣ w Ϣʔεέʔε୯ମͰςετ͞Ε͍ͯΔ҆৺ײ
7JFXଆͷϓϥάΠϯԽ w ΫϦʔϯΞʔΩςΫνϟͰมΘΒͳ͍ w 3FEVYʴ5ZQF4DSJQUɺ͍͠ w 3FEVYͷTUBUFͷઃܭɺ͍͠ w ͏ͪΐͬͱݕূ͍ͨ͠ w
8FC༻ͷ7JFXͱΞϓϦ༻ͷ7JFXɺ 1$༻ͷ7JFXͱεϚϑΥ༻ͷ7JFXΈ͍ͨͳϓϥάΠϯ ͏·͍͖ͦ͘͏ͳͷͰɺࢼͯ͠Έ͍ͨ
Ϣʔεέʔεͷ࣮ w ϒϩάɾॻ੶ʹ۩ମతͳίʔυ΄ͱΜͲͳ͍ w ॻ੶ʹ؆қతͳΫϥεਤ͕ࡌ͍ͬͯΔˍ ଟݴޠͷ࣮ྫ݁ߏ͋ΔͷͰख୳ΓͰ࣮ w ϢʔεέʔεԿॻ͖ͨ͠ɺ σΟϨΫτϦɾϑΝΠϧߏࢼߦࡨޡͨ͠ ͏ͪΐͬͱࢼߦࡨޡ͍ͨ͠
w νʔϜͰΔ࣮࣌ͷࢦΛ༻ҙͨ͠΄͏͕Αͦ͞͏
ݸਓͷݟղʢײʣ w ৽نϓϩδΣΫτΑΓɺ طଘϓϩδΣΫτͷϦϑΝΫλϦϯάʹ׆༻͍ͨ͠ w ࢀߟʹͰ͖Δ࣮ࢦ͕ͳ͍ͱ νʔϜͰҰؾʹΔʹݱঢ়͍͠ w طଘϓϩδΣΫτʹదԠͯ͠Έͯ ࿅Λ্͍͛ͨ
·ͱΊ
w ΫϦʔϯΞʔΩςΫνϟ ํͱৄࡉͷϓϥάΠϯΞʔΩςΫνϟ w ৄࡉΛϓϥάΠϯʹ͢Δ͜ͱͰɺ ܾఆΛԆͰ͖Δˍมߋ͕༰қʹͳΔ w σʔλΞΫηεΛϓϥάΠϯԽͰ͖ΔͷͱͯΑ͍ w ݸਓతʹɺ
·ͣطଘϓϩδΣΫτͷϦϑΝΫλϦϯάͰ ࢼߦࡨޡͯ͠Έ͍ͨ
w ັྗΛ͖͑Εͯͳ͍ؾ͕͢ΔͷͰ ॻ੶ΛͥͻಡΜͰΈ͍ͯͩ͘͞$ w IUUQTXXXLBEPLBXBDPKQ QSPEVDU
w ͰͤΔ༰Ͱͳ͔ͬͨ' w ࠙ձͰ͠·͠ΐ͏(
͋Γ͕ͱ͏ ͍͟͝·ͨ͠