Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

RightTouch
December 13, 2023

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

RightTouch

December 13, 2023
Tweet

More Decks by RightTouch

Other Decks in Programming

Transcript

  1. © RightTouch Inc.ɹ|ɹConfidential Support WidgetͷݶքͱϦϓϨʔεͷܾஅ • ͞·͟·ͳࢪࡦΛଧ͍ͬͯ͘தͰɺ͜͏͍͏͜ͱ͍ͨ͠ͱ͍͏ཁ๬͕͓٬͞Μ΍ΧελϚʔαΫηεͷϝϯόʔ͔Βग़ ͖ͯͨ • ࠷ॳ͸ɺSupport

    WidgetΛ֦ுͯ͠࡞͍͕ͬͯͨɺ͍Ζ͍Ζͱ࿪Έ͕ग़͖ͯͨ • ׳Εͳ͍SvelteͰͷ࣮૷ʹΑͬͯɺΤϯυʹ഑Δ෦෼ͷϩδοΫ͕ෳࡶԽʢվम͕େมʹͳ͖ͬͯͨʣ • αʔόʔϞσϧʢܕʣͷݟ௨͕͠ѱ͘ͳ͖ͬͯͨ • ઃఆUIͷUXͷ௿Լ • ͜ΕͲ͏͠Α͏͔ͱ͍͏ٞ࿦ʹͳΓɺཧ૝͔Βߟ͑ͯߦͬͯɺࢥ͍੾ͬͯ·Δͬͱ࡞Γ௚ͦ͏
  2. © RightTouch Inc.ɹ|ɹConfidential Svelteͷ࿩ • ΤϯυϢʔβʔʹ഑Δ΋ͷͩͬͨͷͰɺϑΝΠϧαΠζͷখ͞͞Λॏཁࢹ • ਏ͔ͬͨͱ͜ (޷Έ΍׳Εͷ໰୊͸͋Δͱ͍͏લఏͷ্Ͱ) •

    ؅ཧը໘͸ReactͰॻ͍͍ͯͯɺSvelteͷ஌ݟ͕νʔϜ಺ʹͳ͔ͬͨͷͰɺ࣮૷͕ඍົʹͳ͍ͬͯͨ • Plaidάϧʔϓ಺Ͱ͸SvelteΛ࢖ͬͯΔνʔϜ΋͋ͬͨͷͰɺ΋͏গ͠࿈ܞ͍ͯͨ͠Βҧ͍͔ͬͯͨ΋ʁ • Svelteͷ࠶ඳըͷ࢓૊Έ͕ͳΜ͔׳Εͳ͔ͬͨ • $: ͷ΍ͭ • ෳࡶͳঢ়ଶભҠ͕͋Δͱ͖ʹɺద੾ʹ࠶ඳը͠੾Εͣҙਤ͠ͳ͍όάͰۤ࿑ͨ͠
  3. © RightTouch Inc.ɹ|ɹConfidential Svelte͔ΒPreact΁ • Svelte΄Ͳ͡Όͳ͍͕Preact΋े෼খ͍͞ • ίϯϙʔωϯτͷ਺͕૿͍͑ͯ͘ͱɺ্هͷࠩ෼͕ॖ·͍ͬͯ͘ͱ͍͏࿩΋͋ΔͬΆ͍ʁ • ؅ཧը໘্ͰɺϓϨϏϡʔΛ࡞Δͱ͖ɺPreactͩͱίϯϙʔωϯτΛ͋Δఔ౓ͦͷ··࣋ͬͯ͜ΕΔʁ

    • SVGͷϓϩύςΟ໊ͷ໋໊نଇ͕ҧ͏ • preact/compatͰࠩ෼Λٵऩ • inputϑΥʔϜʹର͢Δมߋݕ஌ͷλΠϛϯάͷҧ͍ • ReactͷonChange͸มߋ࣌ɺPreact͸มߋͷίϛοτ࣌ => onInputΛ࢖͏Α͏lintͰڲਖ਼
  4. © RightTouch Inc.ɹ|ɹConfidential Support ActionϦϦʔε • Նࠒ͔Β࣮૷Λ࢝Ίɺࡢ೔ϦϦʔε • େن໛ͳϦϓϨʔεɺϦϑΝΫλϦϯάׂͩͬͨʹ͸ɺૣΊʹϦϦʔε·Ͱߦ͚ͨؾ͕͢Δ •

    αϯυϘοΫεͰͷ࣮ݧΛׂΓͱͪΌΜͱ΍ͬͨ • γϯϓϧ͞ͱߏ଄Խ͸Ͱ͖Δ͚ͩଥڠ͠ͳ͍ • ෛ࠴ʹର͢ΔϞϠϞϠײ͔ΒϦϓϨʔε΁ͷϞνϕ͕ߴ͔ͬͨ • ීஈ͔ΒϦϑΝΫλϦϯάձΛ΍ͬͯͯɺطଘͷίʔυ͕͜Εແཧͩͳ͍ͬͯ͏ײ͕֮͋ͬͨ • େن໛ͳϦϓϨʔεʢϦιʔεͷ౤ೖʣʹࣾ಺ͷཧղ͕ಘΒΕͨ