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
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
Search
RightTouch
PRO
December 13, 2023
Programming
0
440
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
RightTouch
PRO
December 13, 2023
Tweet
Share
More Decks by RightTouch
See All by RightTouch
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
1
220
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
1
990
Other Decks in Programming
See All in Programming
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
4
640
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
役立つログに取り組もう
irof
28
9.6k
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
100
Jakarta EE meets AI
ivargrimstad
0
520
CSC509 Lecture 09
javiergs
PRO
0
140
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
910
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
310
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
Quine, Polyglot, 良いコード
qnighy
4
640
Featured
See All Featured
Building an army of robots
kneath
302
43k
Adopting Sorbet at Scale
ufuk
73
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
A Tale of Four Properties
chriscoyier
156
23k
For a Future-Friendly Web
brad_frost
175
9.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Transcript
© RightTouch Inc.ɹ|ɹConfidential Yuichi Yabu ػೳϦϓϨʔεͰਐԽ͢Δ ϑϩϯτΤϯυͷ৽ͱαʔόʔϞσϧͷϦϑΝΫλϦϯά
© RightTouch Inc.ɹ|ɹConfidential RightTouch https://plaid.co.jp/news/20211216/
© RightTouch Inc.ɹ|ɹConfidential RightSupport
© RightTouch Inc.ɹ|ɹConfidential νʔϜ RightSupportνʔϜ RightConnectνʔϜ TalkνʔϜ PdM 1ਓ 1ਓ
1ਓ Engineer 6ਓ 3.5ਓ 2.5ਓ Designer 1ਓ 0.5ਓ 0.5ਓ
© RightTouch Inc.ɹ|ɹConfidential Support Widget • ͓٬͞ΜͷࠔΓ͝ͱʹରͯ͠దͳΞηοτΛಧ͚ࣗݾղܾͯ͠Β͏ͨΊͷ ػೳ • ҰਓͻͱΓͷ͓٬͞Μʹରͯ͠ΧελϚΠζ͞ΕͨΟδΣοτΛಧ͚Δ
͜ͱ͕Ͱ͖Δ • ΤϥʔΛݕ͠ɺڧௐදࣔ͢Δ͜ͱ͕Ͱ͖Δ
© RightTouch Inc.ɹ|ɹConfidential ؆୯ͳΞʔΩςΫνϟ
© RightTouch Inc.ɹ|ɹConfidential Support WidgetͷݶքͱϦϓϨʔεͷܾஅ • ͞·͟·ͳࢪࡦΛଧ͍ͬͯ͘தͰɺ͜͏͍͏͜ͱ͍ͨ͠ͱ͍͏ཁ͕͓٬͞ΜΧελϚʔαΫηεͷϝϯόʔ͔Βग़ ͖ͯͨ • ࠷ॳɺSupport
WidgetΛ֦ுͯ͠࡞͍͕ͬͯͨɺ͍Ζ͍ΖͱΈ͕ग़͖ͯͨ • ׳Εͳ͍SvelteͰͷ࣮ʹΑͬͯɺΤϯυʹΔ෦ͷϩδοΫ͕ෳࡶԽʢվम͕େมʹͳ͖ͬͯͨʣ • αʔόʔϞσϧʢܕʣͷݟ௨͕͠ѱ͘ͳ͖ͬͯͨ • ઃఆUIͷUXͷԼ • ͜ΕͲ͏͠Α͏͔ͱ͍͏ٞʹͳΓɺཧ͔Βߟ͑ͯߦͬͯɺࢥ͍ͬͯ·Δͬͱ࡞Γͦ͏
© RightTouch Inc.ɹ|ɹConfidential Svelteͷ • ΤϯυϢʔβʔʹΔͷͩͬͨͷͰɺϑΝΠϧαΠζͷখ͞͞Λॏཁࢹ • ਏ͔ͬͨͱ͜ (Έ׳Εͷ͋Δͱ͍͏લఏͷ্Ͱ) •
ཧը໘ReactͰॻ͍͍ͯͯɺSvelteͷݟ͕νʔϜʹͳ͔ͬͨͷͰɺ࣮͕ඍົʹͳ͍ͬͯͨ • PlaidάϧʔϓͰSvelteΛͬͯΔνʔϜ͋ͬͨͷͰɺ͏গ͠࿈ܞ͍ͯͨ͠Βҧ͍͔ͬͯͨʁ • Svelteͷ࠶ඳըͷΈ͕ͳΜ͔׳Εͳ͔ͬͨ • $: ͷͭ • ෳࡶͳঢ়ଶભҠ͕͋Δͱ͖ʹɺదʹ࠶ඳը͠Εͣҙਤ͠ͳ͍όάͰۤ࿑ͨ͠
© RightTouch Inc.ɹ|ɹConfidential αʔόʔϞσϧͷ • ϙοϓΞοϓΟδΣοτ͚ͩΛఆͨ͠ઃܭ • ͩΜͩΜ૿େ͍ͯ͘͠ϓϩύςΟͷͱߏԽɺ֊Խ͞ΕͣฒྻʹͳΒΜͰ͍͘ڪා
© RightTouch Inc.ɹ|ɹConfidential Support Widgetܕ
© RightTouch Inc.ɹ|ɹConfidential ͍ϙΠϯτ1
© RightTouch Inc.ɹ|ɹConfidential ͍ϙΠϯτ2
© RightTouch Inc.ɹ|ɹConfidential Support Action • ΑΓ൚༻తͳWebαϙʔτΛ࣮ݱ͢ΔͨΊͷػೳ • ΟδΣοτͳͲΛίϯϙʔωϯτͱͯ͠ఆٛ͠ɺίϯϙʔωϯτΛΈ߹ΘͤͯࢪࡦΛ࡞ΕΔΈ
© RightTouch Inc.ɹ|ɹConfidential Svelte͔ΒPreact • Svelte΄Ͳ͡Όͳ͍͕Preactेখ͍͞ • ίϯϙʔωϯτͷ͕૿͍͑ͯ͘ͱɺ্هͷ͕ࠩॖ·͍ͬͯ͘ͱ͍͏͋ΔͬΆ͍ʁ • ཧը໘্ͰɺϓϨϏϡʔΛ࡞Δͱ͖ɺPreactͩͱίϯϙʔωϯτΛ͋Δఔͦͷ··࣋ͬͯ͜ΕΔʁ
• SVGͷϓϩύςΟ໊ͷ໋໊نଇ͕ҧ͏ • preact/compatͰࠩΛٵऩ • inputϑΥʔϜʹର͢ΔมߋݕͷλΠϛϯάͷҧ͍ • ReactͷonChangeมߋ࣌ɺPreactมߋͷίϛοτ࣌ => onInputΛ͏Α͏lintͰڲਖ਼
© RightTouch Inc.ɹ|ɹConfidential αʔόʔϞσϧͷϦϑΝΫλϦϯά • ίΞͱͳΔActionܕҰఆγϯϓϧʹͭͭ͠ɺׂ͝ͱʹComponentͱ͍͏ܗͰநԽ • ৽͍͠ػೳΛՃͨ͘͠ͳͬͨΒɺComponentΛ૿͍͚͍͍ͯ͠ • ܕύζϧ͕Ή͍ͣ
• mosha<TC>͞ΜͷType ChallengeͰνʔϜͷܕೳྗͷڧԽ • https://mosya.dev/type-challenges
© RightTouch Inc.ɹ|ɹConfidential SupportActionܕ
© RightTouch Inc.ɹ|ɹConfidential Support ActionϦϦʔε • Նࠒ͔Β࣮Λ࢝ΊɺࡢϦϦʔε • େنͳϦϓϨʔεɺϦϑΝΫλϦϯάׂͩͬͨʹɺૣΊʹϦϦʔε·Ͱߦ͚ͨؾ͕͢Δ •
αϯυϘοΫεͰͷ࣮ݧΛׂΓͱͪΌΜͱͬͨ • γϯϓϧ͞ͱߏԽͰ͖Δ͚ͩଥڠ͠ͳ͍ • ෛ࠴ʹର͢ΔϞϠϞϠײ͔ΒϦϓϨʔεͷϞνϕ͕ߴ͔ͬͨ • ීஈ͔ΒϦϑΝΫλϦϯάձΛͬͯͯɺطଘͷίʔυ͕͜Εແཧͩͳ͍ͬͯ͏ײ͕֮͋ͬͨ • େنͳϦϓϨʔεʢϦιʔεͷೖʣʹࣾͷཧղ͕ಘΒΕͨ
© RightTouch Inc.ɹ|ɹConfidential ·ͱΊ • αʔϏε࣮ॳظʹ࡞ͬͨػೳ͕༷తʹ࣮తʹෛ࠴Λ๊͍͑ͯͨ • ظతͳ֦ுੑอकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔظతͳར༻ʹ͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ
• ࣮తʹෛ࠴͕ཷ·͍ͬͯͨ෦Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ