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
900
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
Bedrock で検索エージェントを再現しようとした話
ny7760
2
130
AWSで始める実践Dagster入門
kitagawaz
1
750
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
1k
KotlinConf 2025_イベントレポート
sony
1
140
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
メルカリIBISの紹介
0gm
0
640
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
2.3k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
今日から始めるAWSセキュリティ対策 3ステップでわかる実践ガイド
yoshidatakeshi1994
0
130
LLMを搭載したプロダクトの品質保証の模索と学び
qa
1
1.1k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
66k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
590
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Into the Great Unknown - MozCon
thekraken
40
2k
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&/(&
ࣦഊʹΊ͛ͣ ΈΜͳ͕ΜΖ͏ͳʂ