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
660
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
BuriKaigi2023の発表資料です!
nus3
January 21, 2023
Tweet
Share
More Decks by nus3
See All by nus3
ワタシとPodcast
yotahada3
2
770
Do you like Storybook?
yotahada3
2
3.8k
App Runner & Next.js
yotahada3
0
89
frontend-couse03
yotahada3
1
77
frontend-couse02.pdf
yotahada3
0
51
Frontend couse01
yotahada3
0
180
sot-podcast
yotahada3
0
1.7k
Before starting vue
yotahada3
0
13k
カオスなフロントエンドと戦うために
yotahada3
0
110
Other Decks in Programming
See All in Programming
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
400
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
960
Snowflakeで眠ったデータを起こそう!
estie
0
130
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.2k
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.8k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Ruby Function Composition
bkuhlmann
1
340
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
420
Ruby Pattern Matching
bkuhlmann
0
930
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
26
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
The Invisible Customer
myddelton
114
12k
Building Effective Engineering Teams - LeadDev
addyosmani
31
1.9k
Six Lessons from altMBA
skipperchong
22
3k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
The Cost Of JavaScript in 2023
addyosmani
19
3.9k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
YesSQL, Process and Tooling at Scale
rocio
165
13k
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ʙ