Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13

https://hatena.connpass.com/event/164042/

Transcript

1. M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ϑ Ϩ ʔϜϫ ʔ Ϋ Ҡ ߦ
   ং ষ
   2 0 2 0 - 0 2 - 0 5 H a t e n a E n g i n e e r S e m i n a r # 1 3
   

   View Slide

2. ϨΨγʔϑϩϯτΤϯυ୤ग़ϓϩδΣΫτΛͲͷΑ͏ʹ্ཱ͔ͪ͛ͨ
   ࠓ೔ओʹ࿩͢͜ͱ
   

   View Slide

3. • id:susisu
   • Mackerel ։ൃνʔϜ
   ΞϓϦέʔγϣϯΤϯδχΞ
   • 2016 Πϯλʔϯ ˠ 2018 ৽ଔ
   • JavaScript ͕޷͖
   

   View Slide

4. View Slide

5. M a c k e re l ͷ ։ ൃ ݴ ޠ ʢ ϑ Ϩ ʔϜϫ ʔ Ϋ ʣ
   • αʔόʔαΠυ: Scala (Play Framework), Go, Python
   • ϑϩϯτΤϯυ: TypeScript (AngularJS)
   

   View Slide

6. M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ྺ ࢙
   • ։ൃ౰ॳ (2014 ೥͝Ζ) ͔Β AngularJS (v1) Λར༻
   • ։ൃݴޠ͸్தͰ JavaScript ͔Β TypeScript ΁
   • ͦͷޙେ͖ͳมߋ͸ͳ͘ݱࡏʹࢸΔ
   

   View Slide

7. M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ݱ ࡏ
   • AngularJS ͸ϨΨγʔԽ
   • ٕज़ࣗମ͕ݹ͘ɺ։ൃମݧ΋ϕετͰ͸ͳ͍
   • αϙʔτ΋ 2021 ೥ 6 ݄຤Ͱऴྃ
   • ։ൃΛܧଓ͢ΔͨΊʹ͸ϑϨʔϜϫʔΫͷҠߦ͕ඞਢ
   ˠ AngularJS ୤ग़ϓϩδΣΫτ
   

   View Slide

8. A n g u l a r J S ୤ ग़ ϓ ϩ δΣ Ϋ τ
   • 2019 ೥ 9 ݄ΑΓ։࢝
   • id:susisu ͕ओ୲౰ΤϯδχΞ
   • ݱࡏ͸ϓϩδΣΫτ͕ঃʑʹيಓʹ৐ΓɺϑϨʔϜϫʔΫͷҠߦ͕ਐΈͭ
   ͭ͋Δஈ֊
   • ͜ͷൃදͰ͸ϓϩδΣΫτ্ཱͪ͛ͷաఔΛ঺հ͠·͢
   

   View Slide

9. Phase 0: ϓϩδΣΫτͷܭը
   

   View Slide

10. P h a s e 0 : ϓ ϩ δΣ Ϋ τ ͷ ܭ ը
    • ݱঢ়ͷ෼ੳͱཁ݅ͷ੔ཧΛߦ͍ɺϑϨʔϜϫʔΫҠߦͷํ਑Λܾఆ
    •ʢͦ΋ͦ΋Ҡߦ͢Δͷ͔ɺՄೳͳͷ͔ʣ
    • ͲͷϑϨʔϜϫʔΫʹҠߦ͢Δͷ͔
    • ͲͷΑ͏ʹҠߦΛਐΊΔͷ͔
    

    View Slide

11. ཁ ݅
    1. ػೳ։ൃ͸ࢭΊͳ͍
    2. νʔϜɾࣾ಺Ͱϝϯςφϯε͍͚ͯ͠Δ
    3. αϙʔτऴྃͷظݶ·Ͱʹ୤ग़͢Δ
    

    View Slide

12. ཁ ݅ 1 . ػ ೳ ։ ൃ ͸ ࢭ Ί ͳ ͍
    • Mackerel ͸·ͩ੒௕Λଓ͚͍ͯΔαʔϏεͰɺ৽ػೳͷ։ൃ΋͋Δ
    • ৽چ 2 ͭͷϑϨʔϜϫʔΫͰಉ͡΋ͷΛ࡞Δͱೋ౓खؒʹͳͬͯ͠·͏
    ˠ ෦෼తʹஔ͖׵͍͑ͯ͘࡞ઓΛͱΔ
    • ओཁͳϑϨʔϜϫʔΫ (React, Vue, Angular) Ͱ͋Ε͹ͲΕͰ΋Մೳ
    

    View Slide

13. ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ
    • ҠߦઌͷϑϨʔϜϫʔΫ͸ԿΛબͿ͔
    • ৚݅Λߟ͑Δ
    • ಋೖͷ೉қ౓΍ύϑΥʔϚϯεͳͲͰٕज़తͳݒ೦͕ͳ͍
    • νʔϜϝϯόʔʹ։ൃܦݧ͕͋Ε͹ల։͠΍͍͢
    • ࣾ಺Ͱଞʹ࠾༻࣮੷͕͋Δͱ஌ݟͷަ׵ɾਓࡐͷަྲྀ͕͠΍͍͢
    

    View Slide

14. ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ
    • ֤߲໨ʹ͍ͭͯϑϨʔϜϫʔΫΛൺֱݕ౼
    • ٕज़໘ ˠ ࢼݧతʹಋೖͯ͠Έͯݕূ
    • νʔϜ಺ͷܦݧ ˠ ϝϯόʔʹܦݧ΍։ൃ࣌ͷҹ৅ΛώΞϦϯά
    • ࣾ಺ͷ࣮੷ ˠ ۙ೥͸ React Λ࠾༻͍ͯ͠Δ͜ͱ͕ଟ͍
    • ͜ΕΒΛ૯߹ͯ͠ React Λ࠾༻͢Δ͜ͱʹܾఆ
    

    View Slide

15. ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ ظ ݶ · Ͱ ʹ ୤ ग़ ͢ Δ
    • αϙʔτऴྃ (2021 ೥ 6 ݄຤) ·Ͱ 22 ϲ݄ (2019 ೥ 9 ݄࣌఺)
    • AngularJS ͷίʔυϕʔε͸ͦΕͳΓͷن໛͕͋Δ
    • εΫϦϓτͱςϯϓϨʔτΛ͋Θͤͯ໿ 52,000 ߦ
    • ଎౓Λग़ͭͭ͠ɺෳ਺ਓͰฒߦͯ͠࡞ۀ͠ͳ͍ͱ೉͍͠
    ˠ ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ
    

    View Slide

16. ཁ ݅ 3 . α ϙʔ τ ऴ ྃ · Ͱ ʹ ୤ ग़ ͢ Δ
    • ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ
    • طଘͷίʔυϕʔεͱͷΪϟοϓΛେ͖͗͘͢͠ͳ͍
    • ֶशίετΛԼ͛Δ
    • ଴ͪ߹Θ͕ͤൃੜ͢ΔΑ͏ͳਐΊํ͸ආ͚Δ
    • ͜ͷͨΊʹ͍͔ͭ͘ͷٕज़͸ͻͱ·ͣಋೖΛݟૹͬͨ
    • react-redux
    • styled-components
    

    View Slide

17. ܾ ఆ ͠ ͨ ํ ਑ · ͱ Ί
    • ҠߦઌϑϨʔϜϫʔΫ͸ React
    • ػೳ։ൃ͸ࢭΊͣʹ෦෼తʹஔ͖׵͍͑ͯ͘
    • ࡞ۀͷ଎౓ɾฒྻ౓Λεέʔϧͤ͞ΒΕΔΑ͏ʹ
    

    View Slide

18. Phase 1: Ҡߦͷ։࢝
    Phase 0: ϓϩδΣΫτͷܭը
    

    View Slide

19. P h a s e 1 : Ҡ ߦ ͷ ։ ࢝
    • React ΁Ҡߦ͢ΔͨΊͷج൫੔උ
    • ػೳతͳ໘
    • ػೳҎ֎ͷ໘
    • ϚΠϧετʔϯͷઃఆ
    • ਐḿͷՄࢹԽ
    

    View Slide

20. ج ൫ ੔ උ : ػ ೳ త ͳ ໘
    • React Ͱػೳ։ൃ͢ΔͨΊͷ४උ
    • جຊతͳػೳͷ࣮૷
    • AngularJS ͱͷ૬ޓӡ༻
    • ͜ͷൃදͰ͸ৄࡉ·Ͱ࿩͖͠Εͳ͍ͷͰɺ΋͠ڵຯ͕͋Ε͹͜ͷ͋ͱ
    ݸผʹฉ͍͍ͯͩ͘͞
    

    View Slide

21. A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
    αʔϏε
    ίϯϙʔωϯτ
    

    View Slide

22. A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
    

    View Slide

23. A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
    

    View Slide

24. A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
    

    View Slide

25. A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
    

    View Slide

26. ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ ໘
    • ϚΠϧετʔϯͷઃఆ
    • ࣮ࡍʹখ͞ͳίϯϙʔωϯτΛ React ΁Ҡߦͯ͠Έͯɺશମͷ࡞ۀΛେ
    ·͔ʹݟੵ΋Γ
    

    View Slide

27. ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ ໘
    • ਐḿʢίʔυߦ਺ʣͷՄࢹԽ
    • ࡞ۀ଎౓ͷʢେࡶ೺ͳʣࢦඪ
    • ॏཁɿϞνϕʔγϣϯͷҡ࣋
    • Mackerel ͷػೳΛ׆༻
    • ίʔυߦ਺ΛαʔϏεϝτϦοΫͱͯ͠౤ߘ
    • ΧελϜμογϡϘʔυͰҰཡͰ͖ΔΑ͏ʹ
    

    View Slide

28. View Slide

29. Phase 2: ෳ਺ਓମ੍΁
    Phase 1: Ҡߦͷ։࢝
    

    View Slide

30. P h a s e 2 : ෳ ਺ ਓ ମ ੍ ΁
    • ج൫͕͋Δఔ౓੔ͬͨͨΊɺෳ਺ਓମ੍Ͱͷ React ΁ͷҠߦΛ։࢝
    • ϓϩδΣΫτΛيಓʹ৐͍ͤͯ͘ஈ֊
    

    View Slide

31. ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜ ͱ ʹ ΑΔ ม Խ
    • ৘ใͷڞ༗͕ඞཁ ˠ Scrapbox Λ׆༻
    • ։ൃ೔ࢽͰݱঢ়ͷڞ༗΍ɺ࣭໰ίʔφʔͰٙ໰ͷղܾ
    • ҰਓͰ͸ݟ͚ͭʹ͔ͬͨ͘ج൫ͷෆඋ͕໌֬ʹͳΔ͜ͱ΋
    • ܧଓతʹ੔උΛߦ͏
    • AngularJS ͷίʔυ͕ݮগ܏޲ʹసͨ͡
    

    View Slide

32. ·ͱΊ
    

    View Slide

33. · ͱ Ί
    • Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ
    ͍ͭͯ঺հ͠·ͨ͠
    • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ
    • ҠߦΛਐΊΔதͰͲͷΑ͏ͳ޻෉Λ͍ͯ͠Δ͔
    • ݱࡏϓϩδΣΫτ͸يಓʹ৐Γͭͭ͋Δஈ֊
    

    View Slide