Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ドキッ!失敗だらけのシステム開発
Search
Shinichi Kozake
November 30, 2019
Technology
1
840
ドキッ!失敗だらけのシステム開発
KanJava 10th Anniversary Partyでの発表資料です。
https://kanjava.connpass.com/event/147145/
Shinichi Kozake
November 30, 2019
Tweet
Share
More Decks by Shinichi Kozake
See All by Shinichi Kozake
アーキテクトとは
kozake
0
2.2k
Ionic React でサービス開発したお話
kozake
0
150
やはり俺のWeb APIは間違えている
kozake
0
540
すごい大規模 たのしく作ろう
kozake
4
2.5k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
kozake
0
910
Docker with JHipster
kozake
1
580
実践JHipster #jsug #sf_36
kozake
2
7.7k
Ionicでアプリ作ったよ!開発方法の紹介
kozake
2
1k
アプリ作ろうぜ! Yomoo!ってアプリを作ったよ! #kanjava
kozake
0
1.6k
Other Decks in Technology
See All in Technology
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
130
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
290
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
「Verify with Wallet API」を アプリに導入するために
hinakko
1
250
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
490
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
330
GopherCon Tour 概略
logica0419
2
190
Trust as Infrastructure
bcantrill
0
350
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
520
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
It's Worth the Effort
3n
187
28k
Writing Fast Ruby
sferik
629
62k
The Cult of Friendly URLs
andyhume
79
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Agile that works and the tools we love
rasmusluckow
331
21k
Scaling GitHub
holman
463
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Transcript
"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 config ϑΝΠϧ 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://latentflip.com/loupe/
None
None
None
None
None
None
None
None
None
None
None
None
None
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&/(&
ࣦഊʹΊ͛ͣ ΈΜͳ͕ΜΖ͏ͳʂ