$30 off During Our Annual Pro Sale. View Details »
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
13
3.1k
Clean Architecture in Web Frontend #mixleap
Hiroyuki ANAI
December 20, 2018
Tweet
Share
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
3
430
compilerOptions、全部読んだ
pirosikick
1
240
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
450
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
400
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
6
17k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.8k
Web Share Target API #w3fukuoka
pirosikick
0
700
Google I/O '19のWebをまとめる会
pirosikick
2
850
PuppeteerでいらないCSSを消す
pirosikick
23
29k
Other Decks in Programming
See All in Programming
AIコーディングエージェント(Manus)
kondai24
0
170
リリース時」テストから「デイリー実行」へ!開発マネージャが取り組んだ、レガシー自動テストのモダン化戦略
goataka
0
130
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
Cell-Based Architecture
larchanjo
0
110
チームをチームにするEM
hitode909
0
320
TestingOsaka6_Ozono
o3
0
140
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
220
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.4k
テストやOSS開発に役立つSetup PHP Action
matsuo_atsushi
0
150
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
2
220
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
240
How Software Deployment tools have changed in the past 20 years
geshan
0
29k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.8k
Designing for Performance
lara
610
69k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Producing Creativity
orderedlist
PRO
348
40k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
A better future with KSS
kneath
240
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.6k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
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 ࠙ձͰ͠·͠ΐ͏(
͋Γ͕ͱ͏ ͍͟͝·ͨ͠