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

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

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

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=128

Shinichi Kozake

November 30, 2019
Tweet

Transcript

  1. "OOJWFSTBSZ1BSUZ ؔδϟόUI

  2. υΩοʂ ͩΒ͚ ࣦഊ ͷ ։ൃ γε ςϜ େن໛։ൃ

  3. BCPVUࣦഊ

  4. ۙگ ʴ େن໛Ҋ݅ͱ֨ಆͯ͠·ͨ͠ʂ ۤઅ೥ ࣦഊͱ൓লͷ೔ʑʔ

  5. ຊ೔ͷΰʔϧ

  6. ຊ೔ͷΰʔϧ ࣦഊ͔ΒֶΜٕͩज़ͷڞ༗ ๻ͷ৘ใऩर ࣦഊʹ͍ͭͯߟ͑Δ

  7. ஫ҙࣄ߲

  8. 4ZTUFN"SDIJUFDU +BWB !T@LP[BLF 8IPBN* 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 MFUDIBOHFEDIBOHF%FUFDUJPO  JG DIBOHFE \ SFOEFS6*  ^ มߋݕ஌ͷ֓೦ΛίʔυԽ

    ϞσϧͷมߋΛݕ஌͢ΔͱɺϨϯμϦϯά͢Δ
  48. $IBOHF%FUFDUJPO $PNQPOFOU5SFFŠ

  49. $IBOHF%FUFDUJPO $% $% $% $% $% $% $% $PNQPOFOUͦΕͧΕʹ$IBOHF%FUFDUJPO͕͋Δ

  50. $IBOHF%FUFDUJPO $% $% $% $% $% $% $% ্͔ΒԼʹมߋݕ஌͕࣮ࢪ͞ΕΔ

  51. 2͍ͭมߋݕ஌͕ߦΘΕΔͷʁ

  52. 2͍ͭมߋݕ஌͕ߦΘΕΔͷʁ Ϟσϧͷঢ়ଶ͕ มߋ͞Εͨ Մೳੑ͕͋Δ࣌

  53. ඇಉظॲཧ Πϕϯτ 9)3 λΠϚʔ DMJDL TVCNJU αʔό͔ΒͷԠ౴ TFU5JNFPVU TFU*OUFSWBM ඇಉظॲཧͷऴΘΓʹϞσϧͷঢ়ଶ͕มߋ͞ΕͨՄೳੑ͕͋Δ

  54. +43VOUJNF؀ڥ 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. /FYU7JFX&OHJOF "OHVMBS*WZ DPNJOHTPPO "OHVMBS͔Β࣍ੈ୅ϏϡʔΤϯδϯ*WZ͕σϑΥϧτʹʂ ΑΓখ͘͞ʂΑΓ଎͘ʂΑΓγϯϓϧʹʂ

  87. BCPVUࣦഊ

  88. ਺ʑͷࣦഊ ʋ ʀ˜ʀ ϊ ࠓճ ΋ ͨ͘͞Μࣦഊ͠·ͨ͠ʂ %BUB(SJEͰʜ ΤϥʔνΣοΫʜ 42-͕஗͍Αʙ

    λϒϨοτͰ μϒϧΫϦοΫʁ γϯάϧαΠϯΞ΢τʙ ʀТʀʆ ŲƄƂŕ TFU5JNFPV ͨ͠Β ಈ͖·͕͢ͳʹ͔ʁ ϨεϙϯεσβΠϯ @ ཀAʯ㲃  ͑ʁϩάΠϯϢʔβ͕ ੾ΓସΘΒͳ͍ʂʁ ϑΥʔΧε੍ޚ ·͡ϜϦ ."9@4"'&@*/5&(&3 4XBHHFS$PEFHFO ϚδͰ͔ 41"Ͱ440ޙͷ ϦμΠϨΫτ͕͕͕
  89. ࣦഊ͸ ஌ࣝͷๅੴശ

  90. *U`TpOFUPDFMFCSBUFTVDDFTT  CVUJUJTNPSFJNQPSUBOUUPIFFEUIF MFTTPOTPGGBJMVSF ੒ޭΛॕ͏ͷ͸͍͍͕ɺ ΋ͬͱେ੾ͳͷ͸ࣦഊ͔ΒֶͿ͜ͱͩɻ  ϏϧɾήΠπ

  91. ࣦഊͷ܏޲ͱ෼ੳ ࠓճͷࣦഊΛৼΓฦΔͱɺ ϑϩϯτΤϯυଆʹଟ͍ ৽͍͜͠ͱɾܦݧ͕ͳ͍͜ͱ ͸ࣦഊ͕ଟ͘ͳΔ

  92. /0$)"--&/(& /046$$&44 /0'"6-5 /0$)"3&/(&

  93. ࣦഊʹΊ͛ͣ ΈΜͳ͕Μ͹Ζ͏ͳʂ