Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ドキッ!失敗だらけのシステム開発
Shinichi Kozake
November 30, 2019
Technology
0
320
ドキッ!失敗だらけのシステム開発
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
250
kozake
4
1.4k
kozake
0
540
kozake
1
300
kozake
2
5.6k
kozake
2
710
kozake
0
960
kozake
5
7.4k
kozake
0
940
Other Decks in Technology
See All in Technology
shomaekawa
3
1.2k
shirayanagiryuji
0
2.1k
kanaugust
PRO
0
230
con_mame
4
2k
yuhta28
1
220
kanaugust
PRO
0
170
neo_analytics
1
1k
hhiroshell
7
400
cygames
1
370
cmwatanabeseigo
0
350
hsano
0
130
oracle4engineer
0
2.6k
Featured
See All Featured
edds
56
9.3k
cherdarchuk
71
260k
cromwellryan
101
5.9k
gr2m
83
11k
jakevdp
774
200k
brettharned
93
3k
mza
80
4.1k
dougneiner
55
5.4k
kastner
54
1.9k
rmw
11
740
geoffreycrofte
18
780
kneath
219
15k
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&/(&
ࣦഊʹΊ͛ͣ ΈΜͳ͕ΜΖ͏ͳʂ