Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
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
安心して変更できるWebフロントエンドの作り方
pirosikick
7
3.2k
書き換えて学ぶTemporal #fukts
pirosikick
2
510
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
3
510
compilerOptions、全部読んだ
pirosikick
1
310
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
560
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
510
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
6
17k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.9k
Web Share Target API #w3fukuoka
pirosikick
0
750
Other Decks in Programming
See All in Programming
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
neuecc
5
4.9k
iOS 27でニュースアプリはどう変わる!? 〜日経電子版の新機能対応と、開発事例から〜
lynnswap
7
13k
Heart of Swift Concurrency
koher
0
1.2k
JRuby: Past, Present, and Future
headius
0
220
速習iPhone Duo対応
yuukiw00w
2
950
Augmenting AI with the Power of Jakarta EE
ivargrimstad
0
420
iOSDCのペンライトを自動制御したい!
akkeylab
0
360
20260914 AIエージェント時代のPlatform Engineering LLM基盤とプロダクトの責務境界線
kanfab1
7
2.4k
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
myus4a
0
390
難しいけど、読めた。- OSSの入口に立った話。
sts11142
0
130
iOSDC2026登壇資料.pdf
riofujimon
0
210
App Storeの外へ──日本のiOSサイドローディング入門 for iOSDC Japan 2026
yuukiw00w
0
300
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
409
67k
Become a Pro
speakerdeck
PRO
31
6.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
620
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
1
550
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
300
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
730
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
690
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
440
Automating Front-end Workflow
addyosmani
1369
210k
Marketing to machines
jonoalderson
1
5.8k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
290
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 ࠙ձͰ͠·͠ΐ͏(
͋Γ͕ͱ͏ ͍͟͝·ͨ͠