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
13
2.9k
Clean Architecture in Web Frontend #mixleap
Hiroyuki ANAI
December 20, 2018
Tweet
Share
More Decks by Hiroyuki ANAI
See All by Hiroyuki ANAI
Step Functionsの設計時に知っておいたほうがいいかもしれないこと
pirosikick
0
230
Go言語による並行処理「4.4 orチャネル」の図
pirosikick
0
240
サイボウズWebフロントエンド脱レガシーの今までとこれから
pirosikick
5
16k
@cybozu/eslint-configから学ぶ、全社共通ESLint configの運用
pirosikick
4
1.6k
Web Share Target API #w3fukuoka
pirosikick
0
550
Google I/O '19のWebをまとめる会
pirosikick
2
730
PuppeteerでいらないCSSを消す
pirosikick
24
27k
Progressive Hydration #react_fukuoka
pirosikick
5
1.5k
WebFEのテストにおける気持ちの変遷
pirosikick
0
400
Other Decks in Programming
See All in Programming
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.3k
孤独のCTOグルメという やや奇抜な企画をやった目的と効果
shoheimitani
3
1k
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
Why 1 + 1 = 2 in Swift?
1plus4
1
240
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
品質が高いコードって何?Rev2.1
ickx
1
490
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
Creating Retro-Style Photos Using Swift
ski
1
340
Go1.22からの疑似乱数生成器について/go-122-pseudo-random-generator
convto
1
160
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Fireside Chat
paigeccino
19
2.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
Become a Pro
speakerdeck
PRO
8
4.4k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
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 ࠙ձͰ͠·͠ΐ͏(
͋Γ͕ͱ͏ ͍͟͝·ͨ͠