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
770
ドキッ!失敗だらけのシステム開発
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
2k
Ionic React でサービス開発したお話
kozake
0
120
やはり俺のWeb APIは間違えている
kozake
0
510
すごい大規模 たのしく作ろう
kozake
4
2.4k
KHipster ~JHipsterで始めるKotlin Web プログラミング~
kozake
0
840
Docker with JHipster
kozake
1
540
実践JHipster #jsug #sf_36
kozake
2
7.6k
Ionicでアプリ作ったよ!開発方法の紹介
kozake
2
970
アプリ作ろうぜ! Yomoo!ってアプリを作ったよ! #kanjava
kozake
0
1.5k
Other Decks in Technology
See All in Technology
AIエージェント入門
minorun365
PRO
32
19k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.4k
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.3k
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
160
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
660
Introduction to OpenSearch Project - Search Engineering Tech Talk 2025 Winter
tkykenmt
2
150
クラウド食堂とは?
hiyanger
0
120
What's new in Go 1.24?
ciarana
1
110
MIMEと文字コードの闇
hirachan
2
1.4k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
For a Future-Friendly Web
brad_frost
176
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Scaling GitHub
holman
459
140k
Bash Introduction
62gerente
611
210k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Practical Orchestrator
shlominoach
186
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
Navigating Team Friction
lara
183
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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&/(&
ࣦഊʹΊ͛ͣ ΈΜͳ͕ΜΖ͏ͳʂ