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
ドキッ!失敗だらけのシステム開発
Search
Shinichi Kozake
November 30, 2019
Technology
1
840
ドキッ!失敗だらけのシステム開発
KanJava 10th Anniversary Partyでの発表資料です。
https://kanjava.connpass.com/event/147145/
Shinichi Kozake
November 30, 2019
Tweet
Share
More Decks by Shinichi Kozake
See All by Shinichi Kozake
アーキテクトとは
kozake
0
2.3k
Ionic React でサービス開発したお話
kozake
0
150
やはり俺のWeb APIは間違えている
kozake
0
540
すごい大規模 たのしく作ろう
kozake
4
2.5k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
kozake
0
910
Docker with JHipster
kozake
1
580
実践JHipster #jsug #sf_36
kozake
2
7.8k
Ionicでアプリ作ったよ!開発方法の紹介
kozake
2
1k
アプリ作ろうぜ! Yomoo!ってアプリを作ったよ! #kanjava
kozake
0
1.6k
Other Decks in Technology
See All in Technology
【SORACOM UG Explorer 2025】さらなる10年へ ~ SORACOM MVC 発表
soracom
PRO
0
170
ヘンリー会社紹介資料(エンジニア向け) / company deck for engineer
henryofficial
0
420
OpenCensusと歩んだ7年間
bgpat
0
140
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.6k
Azure Well-Architected Framework入門
tomokusaba
1
140
re:Invent 2025の見どころと便利アイテムをご紹介 / Highlights and Useful Items for re:Invent 2025
yuj1osm
0
310
RemoteFunctionを使ったコロケーション
mkazutaka
1
130
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
4
550
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
540
様々なファイルシステム
sat
PRO
0
260
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
680
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
220
Featured
See All Featured
BBQ
matthewcrist
89
9.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Mobile First: as difficult as doing things right
swwweet
225
10k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Invisible Side of Design
smashingmag
302
51k
Transcript
"OOJWFSTBSZ1BSUZ ؔδϟόUI
υΩοʂ ͩΒ͚ ࣦഊ ͷ ։ൃ γε ςϜ େن։ൃ
BCPVUࣦഊ
ۙگ ʴ େنҊ݅ͱ֨ಆͯ͠·ͨ͠ʂ ۤઅ ࣦഊͱলͷʑʔ
ຊͷΰʔϧ
ຊͷΰʔϧ ࣦഊ͔ΒֶΜٕͩज़ͷڞ༗ ͷใऩर ࣦഊʹ͍ͭͯߟ͑Δ
ҙࣄ߲
4ZTUFN"SDIJUFDU +BWB !T@LP[BLF 8IPBN* 4ZTUFN"SDIJUFDU Love Beer!
ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ ͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢
ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ ͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢
ͲΜͳγεςϜΛ ։ൃ͔ͨͬͯ͠
։ൃظؒ ཁ݅ఆٛʹ̍ ઃܭʹ̍ ։ൃɾςετʹϲ݄ ͳ͕ʔʔʔʔ͍γεςϜઃܭ
γεςϜཁ݅ 1$ϑΝʔετ ͰɺλϒϨοτͰ༻ 63-ʹΑΔը໘ભҠՄ Ξϯυืूͯ͜͠ͳ͍ϑϩϯτΤϯδχΞ ϢʔβϏϦςΟ্ 8JUI*& Ϩεϙϯγϒ σβΠϯ 440ೝূ
γεςϜߏ 基幹システム JSON on HTTP 帳票Server 基幹Server 認証Server(OAuth2) AppServer 他システム
フロントエンド ࢹ γεςϜ ϞόΠϧ γεςϜ CRM γεςϜ 運用Server 監視Server
ΞϓϦέʔγϣϯϞσϧ Page Provider DTO Rest Controller Application Service Domain Service
Repository Entity O/R Mapper DTO Model Code Mail Service ϢʔβΠϯλϑΣʔε(SPA) ϓϨθϯςʔγϣϯ ΞϓϦέʔγϣϯ υϝΠϯ ΠϯϑϥετϥΫνϟ
։ൃख๏ CODE DAO Generator config ϑΝΠϧ Web dependencies dependencies ΞϓϦέʔγϣϯ
ϓϨθϯςʔγϣϯ υϝΠϯ CODE API UI ϢʔβΠϯλϑΣʔε dependencies dependencies typescript-angular ςʔϒϧ ఆٛॻ ίʔυ ఆٛॻ OpenAPI Generator
։ൃڥɾπʔϧ setting/build/run resolve deploy SQL(JDBC) Get build publish pull/push
ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ ͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢
ೖྗνΣοΫͷ͓
ೖྗνΣοΫ ୯߲νΣοΫ ૬߲ؔνΣοΫ ۀϧʔϧνΣοΫ ඞਢνΣοΫܕνΣοΫ ൣғνΣοΫॻࣜνΣοΫFUD ݅ඞਢνΣοΫٯసνΣοΫFUD ଘࡏνΣοΫঢ়ଶνΣοΫ ݖݶνΣοΫഉଞνΣοΫFUD
όϦσʔγϣϯ ϑΥʔϜόϦσʔγϣϯ #FBOόϦσʔγϣϯ 4QSJOHόϦσʔλʔ ͲͪΒʹ͋Δ όϦσʔγϣϯػೳ
8IFSFνΣοΫ "OHVMBSͰͲ͜·Ͱ νΣοΫ͢Δʁ 4QSJOHͰશ෦ ͬͪΌ͑ ָͩΑͶʁ ͰνΣοΫͷͨΊʹ αʔό௨৴͕ඞཁʁ ΏΕΔํ
ͦͦ ೖྗνΣοΫͷׂʁ
ೖྗνΣοΫͷׂ σʔλ߹ੑ
ೖྗνΣοΫͷׂ ϢʔβϏϦςΟ σʔλ߹ੑ
ೖྗνΣοΫͷׂ αʔόଆͰશ෦Δ ϢʔβϏϦςΟ ϑϩϯτͰ୲อ ϑϩϯτଆͷೖྗνΣοΫ ૢ࡞ΨΠυΛ݉ͶΔ ϢʔβϏϦςΟ σʔλ߹ੑ
ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲νΣοΫ ୯߲νΣοΫ ૬߲ؔνΣοΫ ۀϧʔϧνΣοΫ ϑΥʔϜ ೖྗ
ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲νΣοΫ ୯߲νΣοΫ ૬߲ؔνΣοΫ ۀϧʔϧνΣοΫ ϑΥʔϜ ೖྗ ͳʹ͔Εͯͳ͍ʁ
ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲νΣοΫ ୯߲νΣοΫ ૬߲ؔνΣοΫ ۀϧʔϧνΣοΫ ϑΥʔϜ ೖྗ ը໘63-
ೖྗ
ը໘ͷ63- IUUQLBOKBWBHBNFO 63-ʹը໘ ͷೖྗ͕͋Δ ઃܭ࣌ͰೖྗνΣοΫ࿙Ε ݅ΑΓΤϥʔ͕ൃੜ
ೖྗνΣοΫͷڭ܇ ೖྗνΣοΫ ϢʔβϏϦςΟͱσʔλ߹ੑͷͨΊ 63-Ϣʔβͷೖྗ
ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ ͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢
ϨϯμϦϯάͷ͓
*&Ͱ͍
8IZ*& *&ͰͷΈಈ͘طଘγεςϜ *&͕αϙʔτ͢Δػೳ "DUJWF9 CJU൛ͷΈ *.&੍ޚ ·ͰͷԆαϙʔτ &EHFͷ*&ϞʔυʢXJUI"DUJWF9
https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode
*&Ͱ͍ *&Ͱ͍ $ISPNFͰ͍ ϨϯμϦϯάʹ͕͔͔͍࣌ؒͬͯΔ ͕͍͑ͨ͞
*&ੑೳϘτϧωοΫ $44ͷଐੑηϨΫλʔΛ͏ͱ͍ʂ /* λΠτϧͷଐੑΛͭ<a>ཁૉ */ a[title] { color: purple; }
/* href ʹ "example" ΛؚΉ <a> ཁૉ */ a[href*="example"] { font-size: 2em; } ଐੑηϨΫλʔͷྫ
*&ੑೳϘτϧωοΫ https://medium.com/@aantipov/ie11-performance-bottleneck-de304569361d IE11 performance bottleneck ৄࡉͪ͜ΒͷهࣄΛʂ
λϒϨοτͰ͍
λϒϨοτͰ͍ $ISPNFͳͷʹ͍ 1$Ͱ͍ʢ*&Ͱ͍ʣ ϨϯμϦϯάʹ͕͔͔࣌ؒͬͯͦ͏ ࠷৽ όʔδϣϯͷ ςετऴ൫Ͱٽ͖ͦ͏Ͱ͟͝Δ ʀ㱼ʀ
ͦͦ ϨϯμϦϯάJTͳʹʁ
8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά
8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά G .0%&- %0. .0%&-Λೖྗͱͨؔ͠ͱ͍͑Δ
8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά .0%&-͕มߋ͞ΕΔͱϨϯμϦϯά͕ඞཁ G .0%&- %0.
443 G .0%&- %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF %0.
$43 G .0%&- %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF .0%&- ʹϨΠΞτॲཧʹ·ͭΘΔύϫʔ͕ඞཁ ͦͯ͠ɺλϒϨοτ1$ʹൺͯεϖοΫ
2͍ͭϨϯμϦϯά͕Δͷʁ
2͍ͭϨϯμϦϯά͕Δͷʁ Ϟσϧͷঢ়ଶ͕ มߋ͞Εͨ࣌
$IBOHF%FUFDUJPO MFUDIBOHFEDIBOHF%FUFDUJPO JG DIBOHFE \ SFOEFS6* ^ มߋݕͷ֓೦ΛίʔυԽ
ϞσϧͷมߋΛݕ͢ΔͱɺϨϯμϦϯά͢Δ
$IBOHF%FUFDUJPO $PNQPOFOU5SFF
$IBOHF%FUFDUJPO $% $% $% $% $% $% $% $PNQPOFOUͦΕͧΕʹ$IBOHF%FUFDUJPO͕͋Δ
$IBOHF%FUFDUJPO $% $% $% $% $% $% $% ্͔ΒԼʹมߋݕ͕࣮ࢪ͞ΕΔ
2͍ͭมߋݕ͕ߦΘΕΔͷʁ
2͍ͭมߋݕ͕ߦΘΕΔͷʁ Ϟσϧͷঢ়ଶ͕ มߋ͞Εͨ Մೳੑ͕͋Δ࣌
ඇಉظॲཧ Πϕϯτ 9)3 λΠϚʔ DMJDL TVCNJU αʔό͔ΒͷԠ TFU5JNFPVU TFU*OUFSWBM ඇಉظॲཧͷऴΘΓʹϞσϧͷঢ়ଶ͕มߋ͞ΕͨՄೳੑ͕͋Δ
+43VOUJNFڥ https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f
model = {name : 'World'} $.on('button', 'click', function onClick() {
console.log("Hello " + model.name + '!'); model.name = 'Kozake'; setTimeout(function timer() { model.name = 'Kanjava'; console.log("Hello " + model.name + '!'); }, 2000); console.log("Hello " + model.name + '!'); }); +4࣮ߦͷσϞ
+4࣮ߦͷσϞ http://latentflip.com/loupe/
None
None
None
None
None
None
None
None
None
None
None
None
None
2ͩΕ͕ඇಉظॲཧ ͷऴΘΓΛݕ͢Δͷʁ
2ͩΕ͕ඇಉظॲཧ ͷऴΘΓΛݕ͢Δͷʁ ;POFKT
;POFKT : "dependencies": { "@angular/common": "~8.1.2", "@angular/core": "~8.1.2", "@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2", : : "zone.js": "~0.9.1" }, : QBDLBHFKTPO
;POFKT "OHVMBSνʔϜ͕։ൃ͍ͯ͠ΔඇಉظॲཧͷϥΠϒϥϦɻ %BSUΠϯεύΠΞ͞Εͯ࡞͞Εͨκʔϯͷ࣮ɻ κʔϯඇಉظλεΫؒͰ࣋ଓ͢Δ࣮ߦίϯςΩετɻ +BWBͰݴ͏ͱ͜ΖͷɺεϨουϩʔΧϧมͷ࣮ݱɻ
;POFKT import 'zone.js'; Zone.current.fork({ name: 'zone1', properties: { context:'<0001>' }
}).run(() => setTimeout(main, 0)); Zone.current.fork({ name: 'zone2', properties: { context:'<0002>' } }).run(() => setTimeout(main, 0)); function main() { console.log(Zone.current.get('context'), 'Hello Zone.js'); } <0001> Hello Zone.js <0002> Hello Zone.js
;POFKT ;POFKTશͯͷඇಉظॲཧʹ ύονΛ͍ͯͯΔɻ λεΫͷऴΘΓʹॲཧΛׂΓࠐΈ Ͱ͖Δɻ
;POFKT constructor(...) { : this._zone.onMicrotaskEmpty.subscribe( {next: () => { this._zone.run(()
=> { this.tick(); }); }}); : tick(): void { : for (let view of this._views) { view.detectChanges(); } : } BOHVMBSQBDLBHFTDPSFTSDBQQMJDBUJPO@SFGUT
มߋݕΛ ͘Ͱ͖ͳ͍ʁ
$IBOHF%FUFDUJPO4USBUFHZ
มߋݕઓུ "OHVMBSʹมߋݕΛ࣮ߦ͢ΔͨΊ ͷ̎ͭͷઓུ͕༻ҙ͞Ε͍ͯΔ ɾ0O1VTI ɾ%FGBVMU ͯ͢ͷίϯϙʔωϯτΛνΣοΫ͢Δ ෆཁͳνΣοΫΛεΩοϓͰ͖Δ
มߋݕઓུ $% $% 0O1VTI $% $% 0O1VTI 0O1VTI ෆཁͳมߋݕΛεΩοϓͰ͖Δʂ
มߋݕઓུ 0O1VTIࢦఆ࣌ͷมߋݕλΠϛϯά ɾೖྗͷࢀর͕มߋ͞Εͨ࣌ ɾίϯϙʔωϯτͱͦͷࢠڙͷ ɹΠϕϯτϋϯυϥ͕ݺΕͨ࣌ ɾมߋݕΛखಈͰݺΜͩ࣌ ɾBTZODύΠϓ͕৽͍͠Λݕग़ͨ࣌͠
ࠓճͷࣦഊͱରࡦ ΧελϜͰ࡞ͨ͠શͯͷίϯϙʔωϯτͷ มߋݕઓུ͕%FGBVMUͩͬͨʂ ඞཁʹԠͯ͡0O1VTIʹมߋʂ ʆɾТɾ λϒϨοτͰ͘ͳͬͨʂ 1$Ͱͷ*&Ϩεϙϯεͷ ͞ΒͳΔվળޮՌʂ
ੑೳͰͷڭ܇ ૣ͍͏ͪͷٕज़ݕূ͔ͬ͠Γͱ αϘΔͷμϝɺઈର ࠓճͨ·ͨ·ॿ͔͚ͬͨͩ
ࢀߟϦϯΫ https://dev.to/mokkapps/the-last-guide-for-angular-change-detection-you-ll-ever-need-3pe4 The Last Guide For Angular Change Detection You'll
Ever Need มߋݕ·ΘΓͪ͜Β https://qiita.com/lacolaco/items/523d96ddbfe55c4e6949 ຊޠ༁ɿAngular 2 Change Detection Explained https://qiita.com/Quramy/items/83f4fbc6755309f78ad2 AngularͱZone.jsͱςετͷ
ࢀߟϦϯΫ +4ͷλεΫͷ https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f How JavaScript works in browser and node?
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ Tasks, microtasks, queues and schedules
/FYU7JFX&OHJOF "OHVMBS*WZ DPNJOHTPPO "OHVMBS͔Β࣍ੈϏϡʔΤϯδϯ*WZ͕σϑΥϧτʹʂ ΑΓখ͘͞ʂΑΓ͘ʂΑΓγϯϓϧʹʂ
BCPVUࣦഊ
ʑͷࣦഊ ʋ ʀ˜ʀ ϊ ࠓճ  ͨ͘͞Μࣦഊ͠·ͨ͠ʂ %BUB(SJEͰʜ ΤϥʔνΣοΫʜ 42-͕͍Αʙ
λϒϨοτͰ μϒϧΫϦοΫʁ γϯάϧαΠϯΞτʙ ʀТʀʆ ŲƄƂŕ TFU5JNFPV ͨ͠Β ಈ͖·͕͢ͳʹ͔ʁ ϨεϙϯεσβΠϯ @ ཀAʯ㲃 ͑ʁϩάΠϯϢʔβ͕ ΓସΘΒͳ͍ʂʁ ϑΥʔΧε੍ޚ ·͡ϜϦ ."9@4"'&@*/5&(&3 4XBHHFS$PEFHFO ϚδͰ͔ 41"Ͱ440ޙͷ ϦμΠϨΫτ͕͕͕
ࣦഊ ࣝͷๅੴശ
*U`TpOFUPDFMFCSBUFTVDDFTT CVUJUJTNPSFJNQPSUBOUUPIFFEUIF MFTTPOTPGGBJMVSF ޭΛॕ͏ͷ͍͍͕ɺ ͬͱେͳͷࣦഊ͔ΒֶͿ͜ͱͩɻ ϏϧɾήΠπ
ࣦഊͷͱੳ ࠓճͷࣦഊΛৼΓฦΔͱɺ ϑϩϯτΤϯυଆʹଟ͍ ৽͍͜͠ͱɾܦݧ͕ͳ͍͜ͱ ࣦഊ͕ଟ͘ͳΔ
/0$)"--&/(& /046$$&44 /0'"6-5 /0$)"3&/(&
ࣦഊʹΊ͛ͣ ΈΜͳ͕ΜΖ͏ͳʂ