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
430
機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング
RightTouch
PRO
December 13, 2023
Tweet
Share
More Decks by RightTouch
See All by RightTouch
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
200
カスタマーサポート市場の改革に挑む 急成長中のプロダクトエンジニアチームの挑戦と舞台裏
righttouch
PRO
1
210
Webカスタマーサポート向けSaaSにおけるLLMの活用
righttouch
PRO
1
980
Other Decks in Programming
See All in Programming
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
280
C#/.NETのこれまでのふりかえり
tomokusaba
1
170
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
340
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
230
Synchronizationを支える技術
s_shimotori
1
150
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
33k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
660
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
220
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
150
Identifying User Idenity
moro
6
8.4k
Macとオーディオ再生 2024/11/02
yusukeito
0
250
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Language of Interfaces
destraynor
154
24k
Six Lessons from altMBA
skipperchong
26
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Scaling GitHub
holman
458
140k
Docker and Python
trallard
40
3.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Designing Experiences People Love
moore
138
23k
A Philosophy of Restraint
colly
203
16k
A designer walks into a library…
pauljervisheath
202
24k
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 ·ͱΊ • αʔϏε࣮ॳظʹ࡞ͬͨػೳ͕༷తʹ࣮తʹෛ࠴Λ๊͍͑ͯͨ • ظతͳ֦ுੑอकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔظతͳར༻ʹ͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ
• ࣮తʹෛ࠴͕ཷ·͍ͬͯͨ෦Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ