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
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
Search
nus3
January 21, 2023
Programming
3
820
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
BuriKaigi2023の発表資料です!
nus3
January 21, 2023
Tweet
Share
More Decks by nus3
See All by nus3
DenoでOpenTelemetryに入門する
yotahada3
2
440
WebDriver BiDiとは何なのか
yotahada3
1
330
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.7k
フロントエンドクイズ大会
yotahada3
0
100
Node.jsのWorker threadsの話
yotahada3
1
1.1k
ワタシとPodcast
yotahada3
2
1.4k
Do you like Storybook?
yotahada3
2
4.4k
App Runner & Next.js
yotahada3
0
150
frontend-couse03
yotahada3
1
130
Other Decks in Programming
See All in Programming
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
17
5.3k
階層化自動テストで開発に機動力を
ickx
0
110
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
270
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
Model Pollution
hschwentner
1
160
What's new in AppKit on macOS 26
1024jp
0
150
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
930
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
NPOでのDevinの活用
codeforeveryone
0
900
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Code Reviewing Like a Champion
maltzj
524
40k
How GitHub (no longer) Works
holman
314
140k
Become a Pro
speakerdeck
PRO
29
5.4k
Making Projects Easy
brettharned
116
6.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Unsuck your backbone
ammeep
671
58k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Adopting Sorbet at Scale
ufuk
77
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
Ҏ্ଓ͘ϓϩμΫτͷ ϑϩϯτΤϯυ৽ϓϩδΣΫτͷ ;Γ͔͑Γ ʙͦͯ͠ɺͦͷૉͳݱࡏʙ
໊લΛOVTʹ౷Ұͨ͠ͷαΠϘζʹೖ͔ͬͯΒɻେֶσϏϡʔͳΒ͵ձࣾσϏϡʔϑϩͶ OVT ͳ͢͞Μ ࡀஉੑಢݝࡏॅ
ຊɺ͢͜ͱ Ͳ͏ɺ͝հ͕Ε·ͨ͠ɺϑϩϯτΤϯυ৽ϓϩδΣΫτͷϚείοτΩϟϥΫλʔɺϑϩϦΞͪΌΜͱݴ͏ϑϩΑ
ຊɺ͢͜ͱ ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ Ҏ্ଓ͘ϓϩμΫτͷϑϩϯτΤϯυ৽ϓϩδΣΫτͷ֓ཁ ܦͬͯΈͯͷৼΓฦΓ ͷOVTͷ๊ෛ
Ҏ্ΛϓϩδΣΫτͷதͷਓ͕ ૉʹ͠·͢ ຊɺ͢͜ͱ ҰԠɺมͳ͜ͱݴΘͳ͍Α͏ʹνΣοΫͯ͠ΒͬͨϑϩΑ
Ҏ্ଓ͘ϓϩμΫτͷ
Ҏ্ଓ͘ϓϩμΫτͷ αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
Ҏ্ଓ͘ϓϩμΫτͷ αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF Ҏ্։ൃɾӡ༻͍ͯ͠Δ
Ҏ্ଓ͘ϓϩμΫτͷ αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF ੈքதͷνʔϜΛࢧ͑Δ ϓϩμΫτΛࢦ͍ͯ͠Δ
Ҏ্ଓ͘ϓϩμΫτͷ αΠϘζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF ϑϩϯτΤϯυ։ൃΛՃ͍ͨ͠
ͦ͜Ͱ Ҏ্ଓ͘ϓϩμΫτͷ
Ҏ্ଓ͘ϓϩμΫτͷ
Ҏ্ଓ͘ϓϩμΫτͷ ͷ͔Β LJOUPOFϑϩϯτΤϯυ৽͕ ϓϩδΣΫτԽ ௨শ ϑϩϦΞ
ϑϩϦΞ͕Γ͍ͨ͜ͱ
࣋ଓՄೳͳঢ়ଶͰ ϑϩϯτΤϯυͷ։ൃΛՃͤ͞Δ ϑϩϦΞ͕Γ͍ͨ͜ͱ ͱɺOVTࢥ͍ͬͯΔϑϩ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ϑϩϦΞͪΌΜ͑ͯΈͨϑϩΑɻେମɺը໘͙Β͍ɺ+BWB4DSJQU͚ͩͰສߦ͙Β͍͋ͬͨϑϩͶ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ίʔυϕʔεΛػೳɾνʔϜମ੍ʹ ߹Θׂͤͯ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ӨڹൣғΛখ۠͘͞Δ ػೳ͝ͱʹϑϩϯτΤϯυΛׂ ೝෛՙΛԼ͛Δ Өڹൣғείʔϓ͕͔Γ͍͢ͱɺϑϩϦΞͪΌΜ։ൃʹೖΓ͍͢ϑϩͶ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ νʔϜ͝ͱͷσ ΟϨΫτϦɾ.POPSFQPΛ࠾༻ ΞʔΩςΫνϟͱνʔϜମ੍Λଗ͑Δ νʔϜ͕ಠཱٕͯ͠ज़બఆ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ νʔϜͷ.POPSFQPͷதͰɺQBDLBHFTϩʔΧϧύοέʔδ OQNܦ༝ Ͱར༻͍ͯ͠ΔϑϩΑ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ࠓޙɺେنͳ ϑϩϯτΤϯυ৽ΛߦΘͳ͍ ߏΛࢦͯ͠ 8FCͷਐԽɾมԽʹదԠͰ͖ΔΑ͏ͳΞʔΩςΫνϟΛࢦͯ͠ΔϑϩͶ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ݱࡏͷνʔϜମ੍
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ࠓճ͜ͷνʔϜͷৼΓฦΓ OVT͕ීஈɺ׆ಈ͍ͯ͠ΔνʔϜͳΜϑϩΑ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ػೳ#ͷϑϩϯτΤϯυ৽Λ͢ΔνʔϜ σβΠϯͦͷ··ɺૢ࡞ײΛม͑ͳ͍ ػೳ# ը໘͙Β͍ Λ$MPTVSF5PPMTˠ3FBDUஔ͖͑Δ αΠϨϯτϦϦʔε͢Δ͜ͱͰɺϦϦʔε·ͰͷΛग़͢ ࠷ͰϑϩϯτΤϯυ৽͢ΔͨΊͷΞϓϩʔνΛࢼ͍ͯ͠Δϑϩ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ͜Ε·Ͱ
ͲͷΑ͏ʹऔΓΜͰ͍Δ͔ ͜Ε͔Β ͖ͬ͞ͷεϥΠυͱॴʑζϨͯΔͷ༰ͳ৺Ͱݟͯ΄͍͠ϑϩΑ
"%3ͷ;Γ͔͑Ζ͏
"%3 "SDIJUFDUVSF%FDJTJPO3FDPSE ͱ "%3ͷ;Γ͔͑Γ ʮ"%3ͱʯͰݕࡧ͢Δͱɺ࠷ॳʹώοτ͢Δͷʮࡋ֎ฆ૪ղܾखଓ "%3 ʹ͍ͭͯ๏লʯͩͬͨϑϩΑ
"%3ͷ;Γ͔͑Γ νʔϜ͕ܾఆͨ͜͠ͱ ·ͨɺͦͷܾఆʹࢸΔ·ͰΛهͨ͠ υΩϡϝϯτ
ࠓ·Ͱʹݸ΄Ͳͷ"%3͕͋ͬͨ "%3ͷ;Γ͔͑Γ ͍ΖΜͳ͜ͱܾΊ͖ͯͨϑϩͶʙ
"%3ͷ;Γ͔͑Γ ৽લޙͰݟ͕ͨมΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ αΠϨϯτϦϦʔεΛ͢ΔͨΊʹݟͨɾૢ࡞ײม͑ͳ͍ ϦϦʔε·ͰͷΛग़ͨ͢ΊʹɺαΠϨϯτϦϦʔε͍ͨ͠ ݟͨɾૢ࡞ײ͕มΘ͍ͬͯͳ͍͜ͱΛςετΛ͍ͨ͠ 7JTVBM3FHSFTTJPO5FTU͢Δ͔
"%3ͷ;Γ͔͑Γ 1MBZXSJHIU7JUFͰ͡ΊΔϨΨγʔ͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ ৽લޙͰݟ͕ͨมΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ ࠷ॳɺ৽લޙͰಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛࢦͯͨ͠ϑϩͶʙ 1MBZXSJHIU7JUFͰ͡ΊΔϨΨγʔ͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ
"%3ͷ;Γ͔͑Γ 1MBZXSJHIU7JUFͰ͡ΊΔϨΨγʔ͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ ৽લޙͰݟ͕ͨมΘΒͳ͍͜ͱΛ735Ͱ୲อ͠Α͏ ࠷ॳɺ৽લޙͰಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛࢦͯͨ͠ϑϩͶʙ 1MBZXSJHIU7JUFͰ͡ΊΔϨΨγʔ͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ 735͕༏ल ݫ͠ ͗ͨ͢ͷͰɺ ݱࡏɺଟগͷը໘ࠩҟڐ༰͢Δํʹ
"%3ͷ;Γ͔͑Γ ΞΫηγϏϦςΟͷվળΛɺ͍͖ͬͯʂ IUUQTOPUFDPNDZCP[V@EFTJHOOOBFEEB
"%3ͷ;Γ͔͑Γ ΞΫηγϏϦςΟͷվળΛɺ͍͖ͬͯʂ దʹϑΥʔΧε͕Ҡಈ͢Δ ϘλϯɺϦϯΫΩʔϘʔυͷΈͰૢ࡞Ͱ͖Δ ΩʔϘʔυτϥοϓ͕ͳ͍ ϚʔΫΞοϓɾ8"*"3*"ʹ͍ͭͯϨϏϡʔ͞Ε͍ͯΔ ΞΫηγϏϦςΟʹ͍ͭͯ૬ஊͰ͖ΔʮϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜʯ͕ͱͯཔΓʹͳΔϑϩ
"%3ͷ;Γ͔͑Γ ৽ͨ͠ޙʹΘΕͳ͘ͳͬͨݹ͍ίʔυফͦ͏ ͱ͍͏͜ͱͰআϙϦγʔΛ࡞ͬͨ ݹ͍ίʔυΛফ͢·Ͱ͕৽Ͱ͢Α Ͳ͜·ͰϑΝΠϧΛফ͢ͷ͔ΛܾΊ͍ͯΔ ݹ͍ίʔυΛফ͢·Ͱ͕৽Ͱ͢Α $7҆˓ઌੜ
"%3ͷ;Γ͔͑Γ %0.ߏͲ͜·Ͱ࠶ݱ͠Α͏ʁ ࠷ॳ%0.ߏ࠶ݱ͢Δํͩͬͨ %0.ߏ͏$44ͦͷ··సه͢Δํ͕͍ʁ ΞΫηγϏϦςΟΛվળ͍ͨ͠ ૢ࡞ײ͕มΘΒͳ͚Ε%0.ߏม͑ͯϤγʂ
Λ;Γ͔͑ͬͯɺ (PPEͱ5IJOLJOHΛͭͣͭ OVT͕ࢥ͏΄ΜͱʹΑ͔ͬͨͳͬͯ͜ͱͱɺ͜Ε͔Βߟ͔͑ͯͳ͔͋Μͳͬͯ͜ͱϑϩ
ͷৼΓฦΓ (PPE ը໘͝ͱʹϦϦʔε͢ΔํͰ ΄Μ·ɺΑ͔ͬͨͳ͊ɾɾɾ
ͷৼΓฦΓ 5IJOLJOH ·ͩ·ͨಓɾɾɾ ͬͱͬͱεέʔϧͤ͞ΔϑϩΑʂ
ͷOVTͷ๊ෛ ๊ෛʹग़ͨ͠ํ͕͍͍ͬͯɺͬͪ͡ΌΜݴͬͯͨϑϩΑ
ͷOVTͷ๊ෛ ࣗͷνʔϜͷ৽Λ രͰ͍ྃͤͨ͞ ڈͷऔͰͶɻരʹͰ͖Δج൫Ͱ͖ͨͱࢥ͏ΜͰ͢Αɻ͡Όͳ͔ͬͨɺࢥ͏Μͩϑϩ
ͷOVTͷ๊ෛ ͦͯ͠৽͍͠ػೳͷ৽ʜ ϑϩϦΞ෦࡞݁ฤͰ͋ΔϑϩϦΞΫΤετᶙͷαϒλΠτϧͩϑϩ
͍͞͝ʹ
͍͞͝ʹ ࠓճͷൃදͰɺ͜ͷऔʹڵຯΛ ࣋ͬͯΒ͑ͨΒ͏Ε͍͠Ͱ͢
ʙGJOʙ