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
書き換えて学ぶTemporal #fukts
pirosikick
2
440
fukuoka.ts #3 社内でESLintの共通設定を配りたい2025年春版
pirosikick
3
500
compilerOptions、全部読んだ
pirosikick
1
300
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
550
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
500
サイボウズ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
900
Other Decks in Programming
See All in Programming
AIの中の人になってみる
htkym
0
170
GraphRAGのKnowledge Graphを 直接!見る/View-GraphRAG's-KnowledgeGraph-directly!
tyumugi1113
1
280
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ! ~
po3rin
1
200
MIZARU@SPAJAM2026 第二回予選
1901drama
0
110
ハーネス設計入門 〜プロンプト、コンテキストの次〜
kinopeee
55
37k
AI × TiDD / 2026.09.05 Redmine 大阪
tokudiro
1
120
Family mrubyの進捗
kishima
1
110
Swift愛好会100回記念 第1回を振り返る
jollyjoester
0
120
AI時代に学ぶ 好きなルール 嫌いなルール Linter編
shorty5121
0
910
[DroidKaigi 2026] Bring your own phones to Gradle Managed Devices
f2lk
0
110
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
wp_daisuke
0
140
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会!〜〇〇への誘い〜 #n_study
mazrean
0
190
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
11
1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
820
Testing 201, or: Great Expectations
jmmastey
46
8.3k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
490
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
290
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
520
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Automating Front-end Workflow
addyosmani
1369
210k
Amusing Abliteration
ianozsvald
1
290
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.6k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
500
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 ࠙ձͰ͠·͠ΐ͏(
͋Γ͕ͱ͏ ͍͟͝·ͨ͠