機能リプレースで進化する: フロントエンドの刷新とサーバーモデルのリファクタリング

Transcript

1. © RightTouch Inc.ɹ|ɹConfidential Yuichi Yabu ػೳϦϓϨʔεͰਐԽ͢Δ ϑϩϯτΤϯυͷ࡮৽ͱαʔόʔϞσϧͷϦϑΝΫλϦϯά
2. © RightTouch Inc.ɹ|ɹConfidential RightTouch https://plaid.co.jp/news/20211216/
3. © RightTouch Inc.ɹ|ɹConfidential RightSupport
4. © RightTouch Inc.ɹ|ɹConfidential νʔϜ RightSupportνʔϜ RightConnectνʔϜ TalkνʔϜ PdM 1ਓ 1ਓ 1ਓ Engineer 6ਓ 3.5ਓ 2.5ਓ Designer 1ਓ 0.5ਓ 0.5ਓ
5. © RightTouch Inc.ɹ|ɹConfidential Support Widget • ͓٬͞ΜͷࠔΓ͝ͱʹରͯ͠ద੾ͳΞηοτΛಧ͚ࣗݾղܾͯ͠΋Β͏ͨΊͷ ػೳ • ҰਓͻͱΓͷ͓٬͞Μʹରͯ͠ΧελϚΠζ͞Εͨ΢ΟδΣοτΛಧ͚Δ ͜ͱ͕Ͱ͖Δ • Τϥʔ౳Λݕ஌͠ɺڧௐදࣔ͢Δ͜ͱ͕Ͱ͖Δ
6. © RightTouch Inc.ɹ|ɹConfidential ؆୯ͳΞʔΩςΫνϟ
7. © RightTouch Inc.ɹ|ɹConfidential Support WidgetͷݶքͱϦϓϨʔεͷܾஅ • ͞·͟·ͳࢪࡦΛଧ͍ͬͯ͘தͰɺ͜͏͍͏͜ͱ͍ͨ͠ͱ͍͏ཁ๬͕͓٬͞Μ΍ΧελϚʔαΫηεͷϝϯόʔ͔Βग़ ͖ͯͨ • ࠷ॳ͸ɺSupport WidgetΛ֦ுͯ͠࡞͍͕ͬͯͨɺ͍Ζ͍Ζͱ࿪Έ͕ग़͖ͯͨ • ׳Εͳ͍SvelteͰͷ࣮૷ʹΑͬͯɺΤϯυʹ഑Δ෦෼ͷϩδοΫ͕ෳࡶԽʢվम͕େมʹͳ͖ͬͯͨʣ • αʔόʔϞσϧʢܕʣͷݟ௨͕͠ѱ͘ͳ͖ͬͯͨ • ઃఆUIͷUXͷ௿Լ • ͜ΕͲ͏͠Α͏͔ͱ͍͏ٞ࿦ʹͳΓɺཧ૝͔Βߟ͑ͯߦͬͯɺࢥ͍੾ͬͯ·Δͬͱ࡞Γ௚ͦ͏
8. © RightTouch Inc.ɹ|ɹConfidential Svelteͷ࿩ • ΤϯυϢʔβʔʹ഑Δ΋ͷͩͬͨͷͰɺϑΝΠϧαΠζͷখ͞͞Λॏཁࢹ • ਏ͔ͬͨͱ͜ (޷Έ΍׳Εͷ໰୊͸͋Δͱ͍͏લఏͷ্Ͱ) • ؅ཧը໘͸ReactͰॻ͍͍ͯͯɺSvelteͷ஌ݟ͕νʔϜ಺ʹͳ͔ͬͨͷͰɺ࣮૷͕ඍົʹͳ͍ͬͯͨ • Plaidάϧʔϓ಺Ͱ͸SvelteΛ࢖ͬͯΔνʔϜ΋͋ͬͨͷͰɺ΋͏গ͠࿈ܞ͍ͯͨ͠Βҧ͍͔ͬͯͨ΋ʁ • Svelteͷ࠶ඳըͷ࢓૊Έ͕ͳΜ͔׳Εͳ͔ͬͨ • $: ͷ΍ͭ • ෳࡶͳঢ়ଶભҠ͕͋Δͱ͖ʹɺద੾ʹ࠶ඳը͠੾Εͣҙਤ͠ͳ͍όάͰۤ࿑ͨ͠
9. © RightTouch Inc.ɹ|ɹConfidential αʔόʔϞσϧͷ࿩ • ϙοϓΞοϓ΢ΟδΣοτ͚ͩΛ૝ఆͨ͠ઃܭ • ͩΜͩΜ૿େ͍ͯ͘͠ϓϩύςΟͷ਺ͱߏ଄Խɺ֊૚Խ͞ΕͣฒྻʹͳΒΜͰ͍͘ڪා
10. © RightTouch Inc.ɹ|ɹConfidential Support Widgetܕ
11. © RightTouch Inc.ɹ|ɹConfidential ΍͹͍ϙΠϯτ1
12. © RightTouch Inc.ɹ|ɹConfidential ΍͹͍ϙΠϯτ2
13. © RightTouch Inc.ɹ|ɹConfidential Support Action • ΑΓ൚༻తͳWebαϙʔτΛ࣮ݱ͢ΔͨΊͷػೳ • ΢ΟδΣοτͳͲΛίϯϙʔωϯτͱͯ͠ఆٛ͠ɺίϯϙʔωϯτΛ૊Έ߹ΘͤͯࢪࡦΛ࡞ΕΔ࢓૊Έ
14. © RightTouch Inc.ɹ|ɹConfidential Svelte͔ΒPreact΁ • Svelte΄Ͳ͡Όͳ͍͕Preact΋े෼খ͍͞ • ίϯϙʔωϯτͷ਺͕૿͍͑ͯ͘ͱɺ্هͷࠩ෼͕ॖ·͍ͬͯ͘ͱ͍͏࿩΋͋ΔͬΆ͍ʁ • ؅ཧը໘্ͰɺϓϨϏϡʔΛ࡞Δͱ͖ɺPreactͩͱίϯϙʔωϯτΛ͋Δఔ౓ͦͷ··࣋ͬͯ͜ΕΔʁ • SVGͷϓϩύςΟ໊ͷ໋໊نଇ͕ҧ͏ • preact/compatͰࠩ෼Λٵऩ • inputϑΥʔϜʹର͢Δมߋݕ஌ͷλΠϛϯάͷҧ͍ • ReactͷonChange͸มߋ࣌ɺPreact͸มߋͷίϛοτ࣌ => onInputΛ࢖͏Α͏lintͰڲਖ਼
15. © RightTouch Inc.ɹ|ɹConfidential αʔόʔϞσϧͷϦϑΝΫλϦϯά • ίΞͱͳΔActionܕ͸Ұఆγϯϓϧʹͭͭ͠ɺ໾ׂ͝ͱʹComponentͱ͍͏ܗͰந৅Խ • ৽͍͠ػೳΛ௥Ճͨ͘͠ͳͬͨΒɺComponentΛ૿΍͍͚ͯ͠͹͍͍ • ܕύζϧ͕Ή͍ͣ • mosha<TC>͞ΜͷType ChallengeͰνʔϜͷܕೳྗͷڧԽ • https://mosya.dev/type-challenges
16. © RightTouch Inc.ɹ|ɹConfidential SupportActionܕ
17. © RightTouch Inc.ɹ|ɹConfidential Support ActionϦϦʔε • Նࠒ͔Β࣮૷Λ࢝Ίɺࡢ೔ϦϦʔε • େن໛ͳϦϓϨʔεɺϦϑΝΫλϦϯάׂͩͬͨʹ͸ɺૣΊʹϦϦʔε·Ͱߦ͚ͨؾ͕͢Δ • αϯυϘοΫεͰͷ࣮ݧΛׂΓͱͪΌΜͱ΍ͬͨ • γϯϓϧ͞ͱߏ଄Խ͸Ͱ͖Δ͚ͩଥڠ͠ͳ͍ • ෛ࠴ʹର͢ΔϞϠϞϠײ͔ΒϦϓϨʔε΁ͷϞνϕ͕ߴ͔ͬͨ • ීஈ͔ΒϦϑΝΫλϦϯάձΛ΍ͬͯͯɺطଘͷίʔυ͕͜Εແཧͩͳ͍ͬͯ͏ײ͕֮͋ͬͨ • େن໛ͳϦϓϨʔεʢϦιʔεͷ౤ೖʣʹࣾ಺ͷཧղ͕ಘΒΕͨ
18. © RightTouch Inc.ɹ|ɹConfidential ·ͱΊ • αʔϏε࣮૷ॳظʹ࡞ͬͨػೳ͕࢓༷తʹ΋࣮૷తʹ΋ෛ࠴Λ๊͍͑ͯͨ • ௕ظతͳ֦ுੑ΍อकੑΛߟ͑ɺ·ΔͬͱϦϓϨʔεɺϦϑΝΫλϦϯάΛͨ͠ • ݁Ռɺ͋Δఔ౓௕ظతͳར༻ʹ଱͑͏ΔػೳΛ࡞Δ͜ͱ͕Ͱ͖ͨʢͱࢥ͏ʣ • ࣮૷తʹ΋ෛ࠴͕ཷ·͍ͬͯͨ෦෼Λ͔ͳΓղফͰ͖ͨ • ؾ࣋ͪΑ͘೥Λӽ͠ɺ৽͍͓͠٬͞ΜΛͲΜͲΜड͚ΒΕΔ