ドキッ！失敗だらけのシステム開発

by Shinichi Kozake

Slide 1

Slide 1 text

"OOJWFSTBSZ1BSUZ ؔδϟόUI

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

BCPVUࣦഊ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ຊ೔ͷΰʔϧ

Slide 6

Slide 6 text

ຊ೔ͷΰʔϧ ࣦഊ͔ΒֶΜٕͩज़ͷڞ༗ ๻ͷ৘ใऩर ࣦഊʹ͍ͭͯߟ͑Δ

Slide 7

Slide 7 text

஫ҙࣄ߲

Slide 8

Slide 8 text

4ZTUFN"SDIJUFDU +BWB !T@LP[BLF 8IPBN* 4ZTUFN"SDIJUFDU Love Beer!

Slide 9

Slide 9 text

ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋ ஗͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢

Slide 10

Slide 10 text

ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋ ஗͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢ ͲΜͳγεςϜΛ ։ൃ͔ͨͬͯ͠࿩

Slide 11

Slide 11 text

։ൃظؒ ཁ݅ఆٛʹ̍೥ ઃܭʹ̍೥ ։ൃɾςετʹϲ݄ ͳ͕ʔʔʔʔ͍γεςϜઃܭ

Slide 12

Slide 12 text

γεςϜཁ݅ 1$ϑΝʔετ Ͱ΋ɺλϒϨοτͰ΋࢖༻ 63-ʹΑΔ௚઀ը໘ભҠՄ Ξϯυืूͯ͠΋͜ͳ͍ϑϩϯτΤϯδχΞ ϢʔβϏϦςΟ޲্ 8JUI*& Ϩεϙϯγϒ σβΠϯ 440ೝূ

Slide 13

Slide 13 text

γεςϜߏ੒ 基幹システム JSON on HTTP 帳票Server 基幹Server 認証Server(OAuth2) AppServer 他システムフロントエンド ؂ࢹ γεςϜ ϞόΠϧ γεςϜ CRM γεςϜ 運用Server 監視Server

Slide 14

Slide 14 text

ΞϓϦέʔγϣϯϞσϧ Page Provider DTO Rest Controller Application Service Domain Service Repository Entity O/R Mapper DTO Model Code Mail Service ϢʔβΠϯλϑΣʔε૚(SPA) ϓϨθϯςʔγϣϯ૚ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ΠϯϑϥετϥΫνϟ૚

Slide 15

Slide 15 text

։ൃख๏ CODE DAO Generator conﬁg ϑΝΠϧ Web dependencies dependencies ΞϓϦέʔγϣϯ૚ ϓϨθϯςʔγϣϯ૚ υϝΠϯ૚ CODE API UI ϢʔβΠϯλϑΣʔε૚ dependencies dependencies typescript-angular ςʔϒϧ ఆٛॻ ίʔυ ఆٛॻ OpenAPI Generator

Slide 16

Slide 16 text

։ൃ؀ڥɾπʔϧ setting/build/run resolve deploy SQL(JDBC) Get build publish pull/push

Slide 17

Slide 17 text

ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋ ஗͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢ ೖྗνΣοΫͷ͓࿩

Slide 18

Slide 18 text

ೖྗνΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ඞਢνΣοΫܕνΣοΫ ൣғνΣοΫॻࣜνΣοΫFUD ৚݅ඞਢνΣοΫٯసνΣοΫFUD ଘࡏνΣοΫঢ়ଶνΣοΫ ݖݶνΣοΫഉଞνΣοΫFUD

Slide 19

Slide 19 text

όϦσʔγϣϯ ϑΥʔϜόϦσʔγϣϯ #FBOόϦσʔγϣϯ 4QSJOHόϦσʔλʔ ͲͪΒʹ΋͋Δ όϦσʔγϣϯػೳ

Slide 20

Slide 20 text

8IFSFνΣοΫ "OHVMBSͰͲ͜·Ͱ νΣοΫ͢Δʁ 4QSJOHͰશ෦ ΍ͬͪΌ͑͹ ָͩΑͶʁ Ͱ΋νΣοΫͷͨΊʹ αʔό௨৴͕ඞཁʁ ΏΕΔํ਑

Slide 21

Slide 21 text

ͦ΋ͦ΋ ೖྗνΣοΫͷ໾ׂ͸ʁ

Slide 22

Slide 22 text

ೖྗνΣοΫͷ໾ׂ σʔλ੔߹ੑ

Slide 23

Slide 23 text

ೖྗνΣοΫͷ໾ׂ ϢʔβϏϦςΟ σʔλ੔߹ੑ

Slide 24

Slide 24 text

ೖྗνΣοΫͷ໾ׂ αʔόଆͰશ෦΍Δ ϢʔβϏϦςΟ͸ ϑϩϯτͰ୲อ ϑϩϯτଆͷೖྗνΣοΫ ͸ૢ࡞ΨΠυΛ݉ͶΔ ϢʔβϏϦςΟ σʔλ੔߹ੑ

Slide 25

Slide 25 text

ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ ೖྗ஋

Slide 26

Slide 26 text

ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ ೖྗ஋ ͳʹ͔๨Εͯͳ͍ʁ

Slide 27

Slide 27 text

ೖྗνΣοΫ ϑϩϯτΤϯυ όοΫΤϯυ ୯߲໨νΣοΫ ୯߲໨νΣοΫ ૬߲ؔ໨νΣοΫ ۀ຿ϧʔϧνΣοΫ ϑΥʔϜ ೖྗ஋ ը໘63- ೖྗ஋

Slide 28

Slide 28 text

ը໘ͷ63- IUUQLBOKBWBHBNFO 63-ʹ΋ը໘ ͷೖྗ஋͕͋Δ ઃܭ࣌఺ͰೖྗνΣοΫ࿙Ε ৚݅ΑΓΤϥʔ͕ൃੜ

Slide 29

Slide 29 text

ೖྗνΣοΫͷڭ܇ ೖྗνΣοΫ͸ ϢʔβϏϦςΟͱσʔλ੔߹ੑͷͨΊ 63-΋Ϣʔβͷೖྗ஋

Slide 30

Slide 30 text

ΞδΣϯμ υΩοʂೖྗνΣοΫ͕ ࿙Ε͍ͯΔʂʁЄ ʉɻʉů ů υΩοʂը໘͕ͱͬͯ΋ ஗͍Ͱ͢ ʀ㱼ʀ υΩοʂγεςϜ͕ ͘͢͝ɾɾɾେ͖͍Ͱ͢ ϨϯμϦϯάͷ͓࿩

Slide 31

Slide 31 text

*&Ͱ஗͍

Slide 32

Slide 32 text

8IZ*& *&ͰͷΈಈ͘طଘγεςϜ *&͕αϙʔτ͢Δػೳ "DUJWF9 CJU൛ͷΈ *.&੍ޚ ೥·ͰͷԆ௕αϙʔτ &EHFͷ*&ϞʔυʢXJUI"DUJWF9

Slide 33

Slide 33 text

https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode

Slide 34

Slide 34 text

*&Ͱ஗͍ *&Ͱ஗͍ $ISPNFͰ͸଎͍ ϨϯμϦϯάʹ͕͔͔͍࣌ؒͬͯΔ ଱͕͍͑ͨ஗͞

Slide 35

Slide 35 text

*&ੑೳϘτϧωοΫ $44ͷଐੑηϨΫλʔΛ࢖͏ͱ஗͍ʂ /* λΠτϧͷଐੑΛ΋ͭཁૉ */ a[title] { color: purple; } /* href ʹ "example" ΛؚΉ ཁૉ */ a[href*="example"] { font-size: 2em; } ଐੑηϨΫλʔͷྫ

Slide 36

Slide 36 text

*&ੑೳϘτϧωοΫ https://medium.com/@aantipov/ie11-performance-bottleneck-de304569361d IE11 performance bottleneck ৄࡉ͸ͪ͜ΒͷهࣄΛʂ

Slide 37

Slide 37 text

λϒϨοτͰ஗͍

Slide 38

Slide 38 text

λϒϨοτͰ஗͍ $ISPNFͳͷʹ஗͍ 1$୺຤Ͱ͸଎͍ʢ*&Ͱ΋଎͍ʣ ϨϯμϦϯάʹ͕͔͔࣌ؒͬͯͦ͏ ࠷৽ όʔδϣϯͷ ςετऴ൫Ͱٽ͖ͦ͏Ͱ͟͝Δ ʀ㱼ʀ

Slide 39

Slide 39 text

ͦ΋ͦ΋ ϨϯμϦϯάJTͳʹʁ

Slide 40

Slide 40 text

8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά

Slide 41

Slide 41 text

8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά G .0%&- %0. .0%&-Λೖྗͱͨؔ͠਺ͱ͍͑Δ

Slide 42

Slide 42 text

8IBUϨϯμϦϯά .0%&- %0. ϨϯμϦϯά .0%&-͕มߋ͞ΕΔͱϨϯμϦϯά͕ඞཁ G .0%&- %0.

Slide 43

Slide 43 text

443 G .0%&- %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF %0.

Slide 44

Slide 44 text

$43 G .0%&- %0. 3FRVFTU DIBOHF.PEFM 3FTQPOTF .0%&- ୺຤ʹϨΠΞ΢τॲཧʹ·ͭΘΔύϫʔ͕ඞཁ ͦͯ͠ɺλϒϨοτ͸1$ʹൺ΂ͯ௿εϖοΫ

Slide 45

Slide 45 text

2͍ͭϨϯμϦϯά͕૸Δͷʁ

Slide 46

Slide 46 text

2͍ͭϨϯμϦϯά͕૸Δͷʁ Ϟσϧͷঢ়ଶ͕ มߋ͞Εͨ࣌

Slide 47

Slide 47 text

$IBOHF%FUFDUJPO MFUDIBOHFEDIBOHF%FUFDUJPO JG DIBOHFE \ SFOEFS6* ^ มߋݕ஌ͷ֓೦ΛίʔυԽ ϞσϧͷมߋΛݕ஌͢ΔͱɺϨϯμϦϯά͢Δ

Slide 48

Slide 48 text

$IBOHF%FUFDUJPO $PNQPOFOU5SFF

Slide 49

Slide 49 text

$IBOHF%FUFDUJPO $% $% $% $% $% $% $% $PNQPOFOUͦΕͧΕʹ$IBOHF%FUFDUJPO͕͋Δ

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

+43VOUJNF؀ڥ https://itnext.io/how-javascript-works-in-browser-and-node-ab7d0d09ac2f

Slide 55

Slide 55 text

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࣮ߦͷσϞ

Slide 56

Slide 56 text

+4࣮ߦͷσϞ http://latentﬂip.com/loupe/

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

2ͩΕ͕ඇಉظॲཧ ͷऴΘΓΛݕ஌͢Δͷʁ

Slide 71

Slide 71 text

2ͩΕ͕ඇಉظॲཧ ͷऴΘΓΛݕ஌͢Δͷʁ ;POFKT

Slide 72

Slide 72 text

;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

Slide 73

Slide 73 text

;POFKT "OHVMBSνʔϜ͕։ൃ͍ͯ͠ΔඇಉظॲཧͷϥΠϒϥϦɻ %BSUΠϯεύΠΞ͞Εͯ࡞੒͞Εͨκʔϯͷ࣮૷ɻ κʔϯ͸ඇಉظλεΫؒͰ࣋ଓ͢Δ࣮ߦίϯςΩετɻ +BWBͰݴ͏ͱ͜ΖͷɺεϨουϩʔΧϧม਺ͷ࣮ݱɻ

Slide 74

Slide 74 text

;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

Slide 75

Slide 75 text

;POFKT ;POFKT͸શͯͷඇಉظॲཧʹ ύονΛ౰͍ͯͯΔɻ λεΫͷऴΘΓʹॲཧΛׂΓࠐΈ Ͱ͖Δɻ

Slide 76

Slide 76 text

;POFKT constructor(...) { : this._zone.onMicrotaskEmpty.subscribe( {next: () => { this._zone.run(() => { this.tick(); }); }}); : tick(): void { : for (let view of this._views) { view.detectChanges(); } : } BOHVMBSQBDLBHFTDPSFTSDBQQMJDBUJPO@SFGUT

Slide 77

Slide 77 text

มߋݕ஌Λ ଎͘Ͱ͖ͳ͍ʁ

Slide 78

Slide 78 text

$IBOHF%FUFDUJPO4USBUFHZ

Slide 79

Slide 79 text

มߋݕ஌ઓུ "OHVMBSʹ͸มߋݕ஌Λ࣮ߦ͢ΔͨΊ ͷ̎ͭͷઓུ͕༻ҙ͞Ε͍ͯΔ ɾ0O1VTI ɾ%FGBVMU ͢΂ͯͷίϯϙʔωϯτΛνΣοΫ͢Δ ෆཁͳνΣοΫΛεΩοϓͰ͖Δ

Slide 80

Slide 80 text

มߋݕ஌ઓུ $% $% 0O1VTI $% $% 0O1VTI 0O1VTI ෆཁͳมߋݕ஌ΛεΩοϓͰ͖Δʂ

Slide 81

Slide 81 text

มߋݕ஌ઓུ 0O1VTIࢦఆ࣌ͷมߋݕ஌λΠϛϯά ɾೖྗͷࢀর͕มߋ͞Εͨ࣌ ɾίϯϙʔωϯτͱͦͷࢠڙͷ ɹΠϕϯτϋϯυϥ͕ݺ͹Εͨ࣌ ɾมߋݕ஌ΛखಈͰݺΜͩ࣌ ɾBTZODύΠϓ͕৽͍͠஋Λݕग़ͨ࣌͠

Slide 82

Slide 82 text

ࠓճͷࣦഊͱରࡦ ΧελϜͰ࡞੒ͨ͠શͯͷίϯϙʔωϯτͷ มߋݕ஌ઓུ͕%FGBVMUͩͬͨʂ ඞཁʹԠͯ͡0O1VTIʹมߋʂ ʆɾТɾ λϒϨοτ୺຤Ͱ΋଎͘ͳͬͨʂ 1$୺຤Ͱͷ*&Ϩεϙϯεͷ ͞ΒͳΔվળޮՌ΋ʂ

Slide 83

Slide 83 text

ੑೳ໰୊Ͱͷڭ܇ ૣ͍͏ͪͷٕज़ݕূ͸͔ͬ͠Γͱ αϘΔͷμϝɺઈର ࠓճ͸ͨ·ͨ·ॿ͔͚ͬͨͩ

Slide 84

Slide 84 text

ࢀߟϦϯΫ 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ͱςετͷ࿩

Slide 85

Slide 85 text

ࢀߟϦϯΫ +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

Slide 86

Slide 86 text

/FYU7JFX&OHJOF "OHVMBS*WZ DPNJOHTPPO "OHVMBS͔Β࣍ੈ୅ϏϡʔΤϯδϯ*WZ͕σϑΥϧτʹʂ ΑΓখ͘͞ʂΑΓ଎͘ʂΑΓγϯϓϧʹʂ

Slide 87

Slide 87 text

BCPVUࣦഊ

Slide 88

Slide 88 text

਺ʑͷࣦഊ ʋ ʀ˜ʀ ϊ ࠓճ ΋ ͨ͘͞Μࣦഊ͠·ͨ͠ʂ %BUB(SJEͰʜ ΤϥʔνΣοΫʜ 42-͕஗͍Αʙ λϒϨοτͰ μϒϧΫϦοΫʁ γϯάϧαΠϯΞ΢τʙ ʀТʀʆ ŲƄƂŕ TFU5JNFPV ͨ͠Β ಈ͖·͕͢ͳʹ͔ʁ ϨεϙϯεσβΠϯ @ ཀAʯ㲃 ͑ʁϩάΠϯϢʔβ͕ ੾ΓସΘΒͳ͍ʂʁ ϑΥʔΧε੍ޚ ·͡ϜϦ ."9@4"'&@*/5&(&3 4XBHHFS$PEFHFO ϚδͰ͔ 41"Ͱ440ޙͷ ϦμΠϨΫτ͕͕͕

Slide 89

Slide 89 text

ࣦഊ͸ ஌ࣝͷๅੴശ

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

ࣦഊʹΊ͛ͣ ΈΜͳ͕Μ͹Ζ͏ͳʂ