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
4
570
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
RightTouch
PRO
December 13, 2023
Tweet
Share
More Decks by RightTouch
See All by RightTouch
音声AIエージェント開発とプロダクトエンジニアチームの挑戦
righttouch
PRO
3
84
RightTouch_mind
righttouch
PRO
2
6.7k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
660
RightTouch Company Deck ver1.2
righttouch
PRO
6
26k
小規模組織のプロダクトエンジニアとして、アンラーニングしたこと
righttouch
PRO
4
890
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
6
760
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
5
1.2k
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
5
600
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
5
1.4k
Other Decks in Programming
See All in Programming
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
880
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
210
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
860
モテるデスク環境
mozumasu
3
1.3k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
9k
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.8k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
440
AIのバカさ加減に怒る前にやっておくこと
blueeventhorizon
0
110
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Designing Experiences People Love
moore
142
24k
Speed Design
sergeychernyshev
32
1.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Docker and Python
trallard
46
3.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
A better future with KSS
kneath
239
18k
Being A Developer After 40
akosma
91
590k
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 ·ͱΊ • αʔϏε࣮ॳظʹ࡞ͬͨػೳ͕༷తʹ࣮తʹෛ࠴Λ๊͍͑ͯͨ • ظతͳ֦ுੑอकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔظతͳར༻ʹ͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ
• ࣮తʹෛ࠴͕ཷ·͍ͬͯͨ෦Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ