フロントエンドの設計刷新〜決断から効果検証まで〜

Transcript

1. ϑϩϯτΤϯυͷઃܭ࡮৽ ʙܾஅ͔ΒޮՌݕূ·Ͱʙ ϑϩϯτΤϯυͷٕज़తෛ࠴ʹ޲͖߹͏LTେձ@෱Ԭ 2023/08/23(ਫ)
2. ͳͥϑϩϯτΤϯυͷઃܭ࡮৽Λܾஅͨ͠ͷ͔
3. ҟಈલޙͷ਺஋ൺֱ 3
4. ҟಈલޙͷൺֱ • ҟಈલͱൺ΂ͯੜ࢈ੑ͕൒෼ҎԼ·Ͱ௿Լ ◦ ײ֮஋ͱ਺஋͕Ұகͨͨ͠ΊɺͲ͔͜͠Βʹ໰୊఺͕͋Δ͸ͣ • ίʔυϦʔσΟϯάʹରͯ͠ඞཁҎ্ͷർ࿑ײΛײͨ͡ ◦ ผͷϓϩμΫτͱൺֱͯ͠΋໌Β͔ʹർ࿑ײ͕ҧͬͨ • ײ֮஋͚ͩͰपΓΛೲಘͤ͞Δͷ͸ແཧ ◦ ͳͥੜ࢈ੑ͕Լ͕ͬͨͷ͔Λ۩ମతʹચ͍ग़ͯ͠ΈΔ͜ͱʹͨ͠ 4
5. ໰୊఺ͷચ͍ग़͠
6. ݱߦઃܭͷ໰୊఺ • ա౓ͳڞ௨Խ ◦ ػೳ௥Ճʹ͸ڧ͍͕ɺมߋɺ࡟আʹ͸ऑ͔ͬͨ ◦ άϥϑ΍ςʔϒϧ͝ͱʹσʔλ௨৴Λߦ͏Α͏ʹͯ͠ڞ௨Խ͍ͯͨ͠ ▪ άϥϑ΍ςʔϒϧͷݟͨ໨͸ಉ͕ͩ͡ɺऔಘɺදࣔ͢Δσʔλ͕ҟͳΔέʔεʹରԠͮ͠Β͍ ▪ σʔλͷऔಘͱදࣔ͸෼͚ͯߟ͑Δ΂͖ͩͬͨ • ॲཧʹҰ؏ੑ͕ແ͍ ◦ APIͷݺͼग़͕͠ෳ਺ՕॴͰ࣮ߦ͞Ε͓ͯΓɺσʔλͷྲྀΕΛ௥͏͜ͱ͕ࠔ೉ ◦ util͕utilҎ্ͷ͜ͱΛ͍ͯ͠Δ ▪ utilͰॲཧ͕ίέͨΒྫ֎Λthrow͓ͯ͠Γɺͦͷ࣌఺ͰΞϓϦέʔγϣϯશମ͕མͪΔ • ςετίʔυΛॻ͖ͮΒ͍ ◦ ඳըΛߦ͏͜ͱʹઐ೦͍ͨ͠͸ͣͷॲཧͷதͰσʔλͷऔಘ͕࣮ߦ͞Ε͍ͯΔ ◦ ੹຿ͷ෼୲͕Ͱ͖͍ͯͳ͍ 6
7. ઃܭ࡮৽ʹର͢Δೝࣝ߹Θͤͱ߹ҙܗ੒
8. ݱϝϯόʔͱೝࣝ߹Θͤ • ςοΫϦʔυ͕ʮ΍Εʯͱݴͬͯϝϯόʔʹ΍ΒͤΔͷ͸؆୯ ◦ ࣗ෼ͨͪͰʮ΍Δʯͱݴͬͯ΍Δͷͱɺʮ΍ΕʯͱݴΘΕͯ΍Β͞ΕΔͷ͸Ձ஋͕ҧ͏ • ݱߦͷઃܭʹର͢Δҙݟަ׵ ◦ ϝϯόʔΛूΊͯͰ͸ͳ͘ɺ1ਓͣͭ࣌ؒΛऔͬͯ࿩Λ͢Δ ◦ ʮࣗ෼͸͜͏ࢥͬͯΔΜ͚ͩͲɺͿͬͪΌ͚You͸Ͳ͏ࢥͬͯΔʁʯ • ҙݟΛ·ͱΊͨ݁Ռɺݱߦͷઃܭʹର͢Δҙݟ͸΄΅Ұகͨ͠ ◦ ࣗ෼ͷײ֮஋ɺ਺஋ɺͦͯ͠पΓͷײ֮஋શ͕ͯҰகͨ͠ ◦ ϦϑΝΫλೖΕ͍͚ͨͲɺ࡞Γ௚͠ن໛ͩͱֻ͕͔࣌ؒΓ͗͢Δ • ͔͜͜ΒϓϩμΫτ։ൃͷεϐʔυΛߋʹՃ଎ͤ͞ΔͨΊʹɺઃܭͷ࡮৽͸ඞཁෆՄ ܽͱ݁࿦ ◦ ਺ϲ݄ͷؒɺ৽ػೳ։ൃ͸ۃྗετοϓ͠ɺઃܭ࡮৽ʹूத͢Δ • ܦӦਞͱͷ߹ҙܗ੒Λ࡞Γʹߦ͘͜ͱʹ 8
9. ܦӦਞͱͷ߹ҙܗ੒ 9 ࠷ۙͲ͏ʁ ϑϩϯτΤϯυΛ࡞Γ௚ͨ͠΄͏͕͍͍ ͔΋͠Ε·ͤΜɻ ࡞Γ௚ͨ͠Βੜ࢈ੑΛ࠷௿Ͱ΋2ഒҎ্ ʹҾ্͖͛Δ͜ͱ͕ग़དྷ·͢ɻ Ϛδʁ͡Ό͋΍ͬͯʂ
10. ߹ҙܗ੒ • Ҏલʹ΋ผγεςϜͷઃܭ࡮৽Λߦͬͨ͜ͱ͕͋Δ ◦ ͦͷࡍʹ΋ੜ࢈ੑΛര্͛ग़དྷ͍ͯͨͨΊɺઃܭ࡮৽ʹର͢Δ੒ޭମݧ͕͋Δ ▪ ίετ͸ֻ͔Δ͕ɺ͙͢ʹճऩͰ͖ͨͱ͍͏ܦݧ஋͕͋Δ ▪ ֻ͔ͬͨίετͱϦλʔϯΛ਺஋Ͱग़͢͜ͱ͕ग़དྷ͍ͯͨ • աڈͷ੒ޭମݧͱ࣮ࡍͷ਺஋Λग़͢͜ͱͰɺೝࣝ߹Θͤͱ߹ҙܗ੒͕ਐΉ 10
11. ணखલͷ४උ
12. ணखલͷ४උ • ৽ઃܭํ਑ΛݻΊΔ ◦ ଟগ৑௕Ͱ΋ྑ͍ͷͰɺڞ௨Խ͸࠷௿ݶʹཹΊΔ ▪ ͦͷޙɺڞ௨Խ͢Δ͔Ͳ͏͔ͷٞ࿦Λ௨ͬͨॲཧ͚ͩڞ௨Խ͢Δ ▪ unit testΛ༻ҙ͓͖ͯ͠ɺޙͷڞ௨ԽͰ΋ॲཧ͕յΕͳ͍͜ͱΛอূ͢Δ ◦ ίʔυͷ੹຿Λ໌֬ʹ͠ɺͦΕҎ্ͷ͜ͱ͸ߦΘͳ͍Α͏ʹ͢Δ • ؆୯ͳը໘ΛҰ͚ͭͩ࡞Γ௚͢ ◦ ৽ઃܭͰͷຌྫͱͯ͠ϝϯόʔʹల։͢Δ ◦ ޱͰઆ໌͢ΔΑΓɺίʔυͰઆ໌ͨ͠΄͏͕ཧղ͠΍͍͢ • ࣮ࡍͷ࡞Γ௚͠ͷྲྀΕΛݻΊΔ ◦ ݱঢ়ͷػೳɺελΠϧΛҡ࣋ͨ͠··ɺ҆શʹҠߦ͢Δ͜ͱ͕େલఏ ◦ ϖʔδ୯ҐͰ࡞Γ௚͠ΛਐΊ͍ͯ͘ ◦ API͸طʹ࢖ͬͯΔ΋ͷΛͦͷ··࢖͍ճ͢ 12
13. ࡞Γ௚͠ͷྲྀΕ
14. ಉ͡ը໘Λશ͘ҧ͏ίʔυͰ࡞Γ௚ͯ͠ผURLͰެ։ جຊతͳ࡞Γ௚͠ͷྲྀΕ 14 ৽ը໘ΛQA ϧʔςΟϯά੾Γସ͑ چ࣮૷Λશ࡟আ
15. ࡞Γ௚͠ͷྲྀΕ • ಉ͡ը໘ΛผURLͰ࣮૷ ◦ طଘը໘ʹखΛՃ͑Δͷ͸جຊNG ◦ Ұ࣌తʹಉ͡ը໘͕ҟͳΔURLͰެ։͞ΕΔ ◦ طଘը໘ͱҟͳΔίʔυͰ࣮૷͍ͯ͠ΔͷͰɺPullrequestΛΨϯΨϯmergeͰ͖Δ • ৽ઃܭͰͷ࣮૷͕׬ྃޙɺຊ൪؀ڥͰಈ࡞֬ೝΛߦ͏ ◦ ಈ࡞֬ೝ͕OKͰ͋Ε͹چ࣮૷ͷURLͷϧʔςΟϯάΛ৽ઃܭͷը໘ʹ޲͚Δ ▪ Կ͔͠Βෆ۩߹͕ൃੜͨ͠৔߹͸ϧʔςΟϯάΛ໭͢͜ͱͰճආ • Ұఆظ༷ؒࢠΛݟͯɺ໰୊ͳͦ͞͏ͳΒچ࣮૷ͷίʔυΛશ࡟আ ◦ ࡞Γ௚͠ͰҰ൪ָ͍͠࡞ۀ 15
16. ৼΓฦΓ
17. ࡞Γ௚ͨ݁͠Ռ લ೥ൺͰҰਓ౰ͨΓͷੜ࢈ੑ͕2.5ഒఔ౓·Ͱ্ঢ 17
18. ࡞Γ௚͠ͷߏ૝͔Βணखɺ׬ྃ·Ͱʹֻ͔ͬͨ޻਺ • ߹ܭͰ17ਓ݄ఔ౓ͷ޻਺ֻ͕͔ͬͨ ◦ ४උظؒͰ1ਓ݄ ◦ ΨοπϦ࡞Γ௚͠ظؒͰ4ਓ * 3ϲ݄Ͱ12ਓ݄ ◦ ͋Δఔ౓࡞Γ௚͕͠ऴΘͬͨ͋ͱ͸1ਓ * 4ϲ݄Ͱ4ਓ݄ • ը໘਺͸40ݸఔ౓ ◦ 1ਓ౰ͨΓҰिؒ൒͘Β͍Ͱ1ը໘ͷ࡞Γ௚͕͠ຊ൪ࠩ͠ସ͑·Ͱ׬ྃ͢Δεϐʔυײ • طʹ࡞Γ௚͠ʹֻ͔ͬͨίετΛճऩࡁ ◦ ೥໌͚͔Β࡞Γ௚͠Λ։࢝ͯ͠7݄ʹશͯ׬ྃ ◦ 4݄ลΓ͔Β࡞Γ௚͠ʹֻ͚ΔίετΛԼ͛ɺ޻਺ͷେ൒Λػೳ௥Ճͷํʹ໭͢ ◦ 7݄ͷ࣌఺Ͱ࡞Γ௚͠ʹֻ͔ͬͨίετͷճऩʹ੒ޭ ▪ 3ਓ ✕ 4ϲ݄ ✕ 2.5ഒ - 3ਓ ✕ 4ϲ݄ = 18ਓ݄ 18
19. ·ͱΊ
20. ·ͱΊ • ࡞Γ௚͠ɺઃܭ࡮৽ΛఏҊ͢Δલʹɺ·ͣײ֮஋ͱ࣮ࡍͷ਺஋Λݟൺ΂Δ ◦ ͔ͦ͜Βϝϯόʔͱͷೝࣝ߹Θͤ • ࣮ࡍͷ਺஋ͱ੒ޭମݧͰɺܦӦਞͱͷ߹ҙܗ੒ ◦ ·ͣ͸਺ࣈ͋Γ͖ ◦ ੒ޭମݧ͕͋Ε͹࣍ͷఏҊ͸ࢥͬͨҎ্ʹ্ख͘ਐΉ ◦ ࠷ॳͷ੒ޭମݧΛ࡞Δͷ͕ඇৗʹ೉͍͠ ▪ ਺ࣈΛग़͠ɺখ͞ͳ੒ޭମݧΛੵΜͰΈΔ͜ͱ͕େࣄ • ϓϩμΫτͷϑΣΠζʹ߹ΘͤͨઃܭΛ ◦ ϩϯνͨ͠͹͔Γͷ΋ͷͱɺ੒௕ͷϑΣΠζʹೖͬͨ΋ͷʹٻΊΒΕΔઃܭ͸ҧ͏ ◦ ϑΣΠζ͕มΘͬͨͳΒઃܭ΋ηοτͰݟ௚͢ 20
21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠