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
810
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
BuriKaigi2023の発表資料です!
nus3
January 21, 2023
Tweet
Share
More Decks by nus3
See All by nus3
DenoでOpenTelemetryに入門する
yotahada3
2
370
WebDriver BiDiとは何なのか
yotahada3
1
240
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.6k
フロントエンドクイズ大会
yotahada3
0
85
Node.jsのWorker threadsの話
yotahada3
1
1.1k
ワタシとPodcast
yotahada3
2
1.3k
Do you like Storybook?
yotahada3
2
4.3k
App Runner & Next.js
yotahada3
0
140
frontend-couse03
yotahada3
1
120
Other Decks in Programming
See All in Programming
ビカム・ア・コパイロット
ymd65536
1
170
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
160
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
2k
iOSアプリで測る!名古屋駅までの 方向と距離
ryunakayama
0
160
インプロセスQAにおいて大事にしていること / In-process QA Meetup
medley
0
190
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
120
M5UnitUnified 最新動向 2025/05
gob
0
150
Storybookの情報をMCPサーバー化する
shota_tech
3
1.4k
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
160
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
120
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
150
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
180
53k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How STYLIGHT went responsive
nonsquared
100
5.5k
Fireside Chat
paigeccino
37
3.4k
Docker and Python
trallard
44
3.4k
GitHub's CSS Performance
jonrohan
1031
460k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
620
It's Worth the Effort
3n
184
28k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
How GitHub (no longer) Works
holman
314
140k
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ʙ