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
420
WebDriver BiDiとは何なのか
yotahada3
1
310
コンポーネントテストの手法と その効果を考える
yotahada3
8
1.7k
フロントエンドクイズ大会
yotahada3
0
98
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
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
GraphRAGの仕組みまるわかり
tosuri13
8
520
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
1.9k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
140
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PicoRuby on Rails
makicamel
2
120
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
610
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
700
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
490
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Statistics for Hackers
jakevdp
799
220k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Designing Experiences People Love
moore
142
24k
Automating Front-end Workflow
addyosmani
1370
200k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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ʙ