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
650
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
BuriKaigi2023の発表資料です!
nus3
January 21, 2023
Tweet
Share
More Decks by nus3
See All by nus3
ワタシとPodcast
yotahada3
2
760
Do you like Storybook?
yotahada3
2
3.8k
App Runner & Next.js
yotahada3
0
88
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
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
Ruby Function Composition
bkuhlmann
1
330
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
7.9k
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
Milestoner
bkuhlmann
1
400
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
[SF Ruby, March 2024] Rails on Wasm
palkan
0
380
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
Featured
See All Featured
Visualization
eitanlees
135
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
In The Pink: A Labor of Love
frogandcode
138
21k
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Done Done
chrislema
178
15k
BBQ
matthewcrist
80
8.7k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Designing for Performance
lara
601
67k
Building Adaptive Systems
keathley
30
1.9k
Typedesign – Prime Four
hannesfritz
36
2.1k
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ʙ