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
310
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
1
210
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
1
980
Other Decks in Programming
See All in Programming
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.2k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
250
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.4k
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
290
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.9k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.9k
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
3
890
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.6k
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
7
1.1k
Golang と Erlang
taiyow
8
1.9k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
160
カスタムしながら理解するGraphQL Connection
yanagii
1
1.4k
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
330
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
RailsConf 2023
tenderlove
29
880
Designing Experiences People Love
moore
138
23k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
A Philosophy of Restraint
colly
203
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
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 ·ͱΊ • αʔϏε࣮ॳظʹ࡞ͬͨػೳ͕༷తʹ࣮తʹෛ࠴Λ๊͍͑ͯͨ • ظతͳ֦ுੑอकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔظతͳར༻ʹ͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ
• ࣮తʹෛ࠴͕ཷ·͍ͬͯͨ෦Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ