ドキッ！失敗だらけのシステム開発

KanJava 10th Anniversary Partyでの発表資料です。
https://kanjava.connpass.com/event/147145/

1. "OOJWFSTBSZ
   1BSUZ ؔδϟό
   UI
2. υΩοʂ ͩΒ͚ ࣦഊ ͷ ։ൃ γε ςϜ େن໛։ൃ
3. BCPVU
   ࣦഊ
4. ۙگ ʴ େن໛Ҋ݅ͱ֨ಆͯ͠·ͨ͠ʂ ۤઅ೥
   ࣦഊͱ൓লͷ೔ʑʔ
5. ຊ೔ͷΰʔϧ
6. ຊ೔ͷΰʔϧ ࣦഊ͔ΒֶΜٕͩज़ͷڞ༗ ๻ͷ৘ใऩर ࣦഊʹ͍ͭͯߟ͑Δ
7. ஫ҙࣄ߲
8. 4ZTUFN
   "SDIJUFDU +BWB !T@LP[BLF 8IP
   BN
   * 4ZTUFN
   "SDIJUFDU Love Beer!
9. ΞδΣϯμ υΩοʂೖྗνΣοΫ͕
   ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋
   ஗͍Ͱ͢
   ʀ㱼ʀ υΩοʂγεςϜ͕
   ͘͢͝ɾɾɾେ͖͍Ͱ͢
10. ΞδΣϯμ υΩοʂೖྗνΣοΫ͕
    ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋
    ஗͍Ͱ͢
    ʀ㱼ʀ υΩοʂγεςϜ͕
    ͘͢͝ɾɾɾେ͖͍Ͱ͢ ͲΜͳγεςϜΛ
    ։ൃ͔ͨͬͯ͠࿩
11. ։ൃظؒ ཁ݅ఆٛʹ̍೥ ઃܭʹ̍೥ ։ൃɾςετʹϲ݄ ͳ͕ʔʔʔʔ͍γεςϜઃܭ
12. γεςϜཁ݅ 1$ϑΝʔετ Ͱ΋ɺλϒϨοτͰ΋࢖༻ 63-ʹΑΔ௚઀ը໘ભҠՄ Ξϯυ
    ืूͯ͠΋͜ͳ͍ϑϩϯτΤϯδχΞ ϢʔβϏϦςΟ޲্ 8JUI
    *& Ϩεϙϯγϒ
    σβΠϯ 440ೝূ
13. γεςϜߏ੒ 基幹システム JSON on HTTP 帳票Server 基幹Server 認証Server(OAuth2) AppServer 他システム フロントエンド ؂ࢹ γεςϜ ϞόΠϧ γεςϜ CRM γεςϜ 運用Server 監視Server
14. ΞϓϦέʔγϣϯϞσϧ Page Provider DTO Rest Controller Application Service Domain Service Repository Entity O/R Mapper DTO Model Code Mail Service ϢʔβΠϯλϑΣʔε૚(SPA) ϓϨθϯςʔγϣϯ૚ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ΠϯϑϥετϥΫνϟ૚
15. ։ൃख๏ CODE DAO Generator config ϑΝΠϧ Web dependencies dependencies ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ υϝΠϯ૚ CODE API UI ϢʔβΠϯλϑΣʔε૚ dependencies dependencies typescript-angular ςʔϒϧ ఆٛॻ ίʔυ ఆٛॻ OpenAPI Generator
16. ։ൃ؀ڥɾπʔϧ setting/build/run resolve deploy SQL(JDBC) Get build publish pull/push
17. ΞδΣϯμ υΩοʂೖྗνΣοΫ͕
    ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋
    ஗͍Ͱ͢
    ʀ㱼ʀ υΩοʂγεςϜ͕
    ͘͢͝ɾɾɾେ͖͍Ͱ͢ ೖྗνΣοΫͷ͓࿩
18. ೖྗνΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ඞਢνΣοΫ
    
    ܕνΣοΫ
    
    
    ൣғνΣοΫ
    
    ॻࣜνΣοΫ
    
    FUD ৚݅ඞਢνΣοΫ
    
    ٯసνΣοΫ
    
    FUD ଘࡏνΣοΫ
    
    ঢ়ଶνΣοΫ
    
    
    ݖݶνΣοΫ
    
    ഉଞνΣοΫ
    
    FUD
19. όϦσʔγϣϯ ϑΥʔϜόϦσʔγϣϯ #FBOόϦσʔγϣϯ 4QSJOHόϦσʔλʔ ͲͪΒʹ΋͋Δ
    όϦσʔγϣϯػೳ
20. 8IFSF
    νΣοΫ "OHVMBSͰͲ͜·Ͱ
    νΣοΫ͢Δʁ 4QSJOHͰશ෦
    ΍ͬͪΌ͑͹
    ָͩΑͶʁ Ͱ΋νΣοΫͷͨΊʹ
    αʔό௨৴͕ඞཁʁ ΏΕΔํ਑
21. ͦ΋ͦ΋
    ೖྗνΣοΫͷ໾ׂ͸ʁ
22. ೖྗνΣοΫͷ໾ׂ σʔλ੔߹ੑ
23. ೖྗνΣοΫͷ໾ׂ ϢʔβϏϦςΟ σʔλ੔߹ੑ
24. ೖྗνΣοΫͷ໾ׂ αʔόଆͰશ෦΍Δ
    ϢʔβϏϦςΟ͸
    ϑϩϯτͰ୲อ ϑϩϯτଆͷೖྗνΣοΫ
    ͸ૢ࡞ΨΠυΛ݉ͶΔ ϢʔβϏϦςΟ σʔλ੔߹ੑ
25. ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ
    ೖྗ஋
26. ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ
    ೖྗ஋ ͳʹ͔๨Εͯͳ͍ʁ
27. ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ
    ೖྗ஋ ը໘63-
    ೖྗ஋
28. ը໘ͷ63- IUUQLBOKBWBHBNFO 63-ʹ΋ը໘
    ͷೖྗ஋͕͋Δ ઃܭ࣌఺ͰೖྗνΣοΫ࿙Ε
    ৚݅ΑΓΤϥʔ͕ൃੜ
29. ೖྗνΣοΫͷڭ܇ ೖྗνΣοΫ͸
    ϢʔβϏϦςΟͱσʔλ੔߹ੑͷͨΊ 63-΋Ϣʔβͷೖྗ஋
30. ΞδΣϯμ υΩοʂೖྗνΣοΫ͕
    ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋
    ஗͍Ͱ͢
    ʀ㱼ʀ υΩοʂγεςϜ͕
    ͘͢͝ɾɾɾେ͖͍Ͱ͢ ϨϯμϦϯάͷ͓࿩
31. *&Ͱ஗͍
32. 8IZ
    *& *&ͰͷΈಈ͘طଘγεςϜ *&͕αϙʔτ͢Δػೳ "DUJWF9 CJU൛ͷΈ *.&੍ޚ ೥·ͰͷԆ௕αϙʔτ &EHFͷ*&ϞʔυʢXJUI
    "DUJWF9
33. https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode
34. *&Ͱ஗͍ *&Ͱ஗͍ $ISPNFͰ͸଎͍ ϨϯμϦϯάʹ͕͔͔͍࣌ؒͬͯΔ ଱͕͍͑ͨ஗͞
35. *&
    ੑೳϘτϧωοΫ $44ͷଐੑηϨΫλʔΛ࢖͏ͱ஗͍ʂ /* λΠτϧͷଐੑΛ΋ͭ<a>ཁૉ */ a[title] { color: purple; } /* href ʹ "example" ΛؚΉ <a> ཁૉ */ a[href*="example"] { font-size: 2em; } ଐੑηϨΫλʔͷྫ
36. *&
    ੑೳϘτϧωοΫ https://medium.com/@aantipov/ie11-performance-bottleneck-de304569361d IE11 performance bottleneck ৄࡉ͸ͪ͜ΒͷهࣄΛʂ
37. λϒϨοτͰ஗͍
38. λϒϨοτͰ஗͍ $ISPNFͳͷʹ஗͍ 1$୺຤Ͱ͸଎͍ʢ*&Ͱ΋଎͍ʣ ϨϯμϦϯάʹ͕͔͔࣌ؒͬͯͦ͏ ࠷৽
    όʔδϣϯͷ ςετऴ൫Ͱٽ͖ͦ͏Ͱ͟͝Δ
    ʀ㱼ʀ
    
39. ͦ΋ͦ΋
    ϨϯμϦϯά
    JT
    ͳʹʁ
40. 8IBU
    ϨϯμϦϯά .0%&- %0. ϨϯμϦϯά
41. 8IBU
    ϨϯμϦϯά .0%&- %0. ϨϯμϦϯά G .0%&-
    
    %0. .0%&-Λೖྗͱͨؔ͠਺ͱ͍͑Δ
    
42. 8IBU
    ϨϯμϦϯά .0%&- %0. ϨϯμϦϯά .0%&-͕มߋ͞ΕΔͱϨϯμϦϯά͕ඞཁ
    G .0%&-
    
    %0.
43. 443 G .0%&-
    
    %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF %0.
44. $43 G .0%&-
    
    %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF .0%&- ୺຤ʹϨΠΞ΢τॲཧʹ·ͭΘΔύϫʔ͕ඞཁ
    ͦͯ͠ɺλϒϨοτ͸1$ʹൺ΂ͯ௿εϖοΫ
45. 2
    ͍ͭϨϯμϦϯά͕૸Δͷʁ
46. 2
    ͍ͭϨϯμϦϯά͕૸Δͷʁ Ϟσϧͷঢ়ଶ͕
    มߋ͞Εͨ࣌
47. $IBOHF
    %FUFDUJPO MFU
    DIBOHFE
    
    DIBOHF%FUFDUJPO 
    JG
    DIBOHFE
    \
    
    
    
    
    SFOEFS6*
    ^ มߋݕ஌ͷ֓೦ΛίʔυԽ
    ϞσϧͷมߋΛݕ஌͢ΔͱɺϨϯμϦϯά͢Δ
    
48. $IBOHF
    %FUFDUJPO $PNQPOFOU
    5SFFŠ
    
49. $IBOHF
    %FUFDUJPO $% $% $% $% $% $% $% $PNQPOFOUͦΕͧΕʹ$IBOHF
    %FUFDUJPO͕͋Δ
    
50. $IBOHF
    %FUFDUJPO $% $% $% $% $% $% $% ্͔ΒԼʹมߋݕ஌͕࣮ࢪ͞ΕΔ
    
51. 2
    ͍ͭมߋݕ஌͕ߦΘΕΔͷʁ
52. 2
    ͍ͭมߋݕ஌͕ߦΘΕΔͷʁ Ϟσϧͷঢ়ଶ͕
    มߋ͞Εͨ
    Մೳੑ͕͋Δ࣌
53. ඇಉظॲཧ Πϕϯτ 9)3 λΠϚʔ DMJDL
    TVCNJU αʔό͔ΒͷԠ౴ TFU5JNFPVU
    TFU*OUFSWBM ඇಉظॲཧͷऴΘΓʹϞσϧͷঢ়ଶ͕มߋ͞ΕͨՄೳੑ͕͋Δ
    
54. +4
    3VOUJNF
    ؀ڥ https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f
55. 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࣮ߦͷσϞ
56. +4࣮ߦͷσϞ http://latentflip.com/loupe/
70. 2
    ͩΕ͕ඇಉظॲཧ
    ͷऴΘΓΛݕ஌͢Δͷʁ
71. 2
    ͩΕ͕ඇಉظॲཧ
    ͷऴΘΓΛݕ஌͢Δͷʁ ;POFKT
72. ;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
73. ;POFKT "OHVMBSνʔϜ͕։ൃ͍ͯ͠ΔඇಉظॲཧͷϥΠϒϥϦɻ %BSU
    ΠϯεύΠΞ͞Εͯ࡞੒͞Εͨκʔϯͷ࣮૷ɻ κʔϯ͸ඇಉظλεΫؒͰ࣋ଓ͢Δ࣮ߦίϯςΩετɻ
    +BWBͰݴ͏ͱ͜ΖͷɺεϨουϩʔΧϧม਺ͷ࣮ݱɻ
74. ;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
75. ;POFKT ;POFKT͸શͯͷඇಉظॲཧʹ
    ύονΛ౰͍ͯͯΔɻ λεΫͷऴΘΓʹॲཧΛׂΓࠐΈ
    Ͱ͖Δɻ
76. ;POFKT constructor(...) { : this._zone.onMicrotaskEmpty.subscribe( {next: () => { this._zone.run(() => { this.tick(); }); }}); : tick(): void { : for (let view of this._views) { view.detectChanges(); } : } BOHVMBSQBDLBHFTDPSFTSDBQQMJDBUJPO@SFGUT
77. มߋݕ஌Λ
    ଎͘Ͱ͖ͳ͍ʁ
78. $IBOHF%FUFDUJPO4USBUFHZ
79. มߋݕ஌ઓུ "OHVMBSʹ͸มߋݕ஌Λ࣮ߦ͢ΔͨΊ
    ͷ̎ͭͷઓུ͕༻ҙ͞Ε͍ͯΔ ɾ0O1VTI ɾ%FGBVMU ͢΂ͯͷίϯϙʔωϯτΛνΣοΫ͢Δ ෆཁͳνΣοΫΛεΩοϓͰ͖Δ
80. มߋݕ஌ઓུ $% $% 0O1VTI $% $% 0O1VTI 0O1VTI ෆཁͳมߋݕ஌ΛεΩοϓͰ͖Δʂ
81. มߋݕ஌ઓུ 0O1VTIࢦఆ࣌ͷมߋݕ஌λΠϛϯά ɾೖྗͷࢀর͕มߋ͞Εͨ࣌ ɾίϯϙʔωϯτͱͦͷࢠڙͷ
    ɹΠϕϯτϋϯυϥ͕ݺ͹Εͨ࣌ ɾมߋݕ஌ΛखಈͰݺΜͩ࣌ ɾBTZODύΠϓ͕৽͍͠஋Λݕग़ͨ࣌͠
82. ࠓճͷࣦഊͱରࡦ ΧελϜͰ࡞੒ͨ͠શͯͷίϯϙʔωϯτͷ
    มߋݕ஌ઓུ͕%FGBVMUͩͬͨʂ ඞཁʹԠͯ͡0O1VTIʹมߋʂ ʆɾТɾ λϒϨοτ୺຤Ͱ΋଎͘ͳͬͨʂ 1$୺຤Ͱͷ*&Ϩεϙϯεͷ
    ͞ΒͳΔվળޮՌ΋ʂ
    
83. ੑೳ໰୊Ͱͷڭ܇ ૣ͍͏ͪͷٕज़ݕূ͸͔ͬ͠Γͱ
    αϘΔͷμϝɺઈର ࠓճ͸ͨ·ͨ·ॿ͔͚ͬͨͩ
84. ࢀߟϦϯΫ 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ͱςετͷ࿩
85. ࢀߟϦϯΫ +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
86. /FYU
    7JFX
    &OHJOF "OHVMBS
    *WZ
    DPNJOH
    TPPO "OHVMBS
    ͔Β࣍ੈ୅ϏϡʔΤϯδϯ*WZ͕σϑΥϧτʹʂ
    ΑΓখ͘͞ʂΑΓ଎͘ʂΑΓγϯϓϧʹʂ
    
87. BCPVU
    ࣦഊ
88. ਺ʑͷࣦഊ ʋ ʀ˜ʀ ϊ ࠓճ ΋ ͨ͘͞Μࣦഊ͠·ͨ͠ʂ %BUB(SJEͰʜ
    ΤϥʔνΣοΫʜ 42-͕஗͍Αʙ λϒϨοτͰ
    μϒϧΫϦοΫʁ γϯάϧαΠϯΞ΢τʙ
    ʀТʀʆ ŲƄƂŕ TFU5JNFPV ͨ͠Β
    ಈ͖·͕͢ͳʹ͔ʁ ϨεϙϯεσβΠϯ
    @ ཀAʯ
    㲃  ͑ʁϩάΠϯϢʔβ͕
    ੾ΓସΘΒͳ͍ʂʁ ϑΥʔΧε੍ޚ
    ·͡ϜϦ ."9@4"'&@*/5&(&3 4XBHHFS
    $PEFHFO
    ϚδͰ͔ 41"Ͱ440ޙͷ
    ϦμΠϨΫτ͕͕͕
89. ࣦഊ͸
    ஌ࣝͷๅੴശ
90. *U`T
    pOF
    UP
    DFMFCSBUF
    TVDDFTT
    
    CVU
    JU
    JT
    NPSF
    JNQPSUBOU
    UP
    IFFE
    UIF
    MFTTPOT
    PG
    GBJMVSF
    ੒ޭΛॕ͏ͷ͸͍͍͕ɺ
    ΋ͬͱେ੾ͳͷ͸ࣦഊ͔ΒֶͿ͜ͱͩɻ
    ϏϧɾήΠπ
91. ࣦഊͷ܏޲ͱ෼ੳ ࠓճͷࣦഊΛৼΓฦΔͱɺ
    ϑϩϯτΤϯυଆʹଟ͍ ৽͍͜͠ͱɾܦݧ͕ͳ͍͜ͱ
    ͸ࣦഊ͕ଟ͘ͳΔ
92. /0
    $)"--&/(&
    
    /0
    46$$&44 /0
    '"6-5
    /0
    $)"3&/(&
93. ࣦഊʹΊ͛ͣ
    ΈΜͳ͕Μ͹Ζ͏ͳʂ