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

"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 conﬁg ϑΝΠϧ 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://latentﬂip.com/loupe/

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&/(&

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

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

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

More Decks by Shinichi Kozake

Other Decks in Technology

Featured

Transcript