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
560
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
RightTouch
PRO
December 13, 2023
Tweet
Share
More Decks by RightTouch
See All by RightTouch
音声AIエージェント開発とプロダクトエンジニアチームの挑戦
righttouch
PRO
3
47
RightTouch_mind
righttouch
PRO
2
4.1k
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
610
RightTouch Company Deck ver1.1
righttouch
PRO
5
24k
小規模組織のプロダクトエンジニアとして、アンラーニングしたこと
righttouch
PRO
4
880
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
6
720
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
5
1.2k
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
5
590
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
5
1.4k
Other Decks in Programming
See All in Programming
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
270
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
970
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
300
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
120
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
250
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
980
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
410
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
750
Serena MCPのすすめ
wadakatu
4
800
Reactをクライアントで使わない
yusukebe
7
6.2k
CSC509 Lecture 02
javiergs
PRO
0
400
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
For a Future-Friendly Web
brad_frost
180
9.9k
Building an army of robots
kneath
306
46k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Site-Speed That Sticks
csswizardry
10
870
Faster Mobile Websites
deanohume
310
31k
How GitHub (no longer) Works
holman
315
140k
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 ·ͱΊ • αʔϏε࣮ॳظʹ࡞ͬͨػೳ͕༷తʹ࣮తʹෛ࠴Λ๊͍͑ͯͨ • ظతͳ֦ுੑอकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔظతͳར༻ʹ͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ
• ࣮తʹෛ࠴͕ཷ·͍ͬͯͨ෦Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ