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

Transcript

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/

57. None
58. None
59. None
60. None
61. None
62. None
63. None
64. None
65. None
66. None
67. None
68. None
69. None

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. ࣦഊʹΊ͛ͣ
    ΈΜͳ͕Μ͹Ζ͏ͳʂ