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

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

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

3. • id:susisu • Mackerel ։ൃνʔϜ ΞϓϦέʔγϣϯΤϯδχΞ • 2016 Πϯλʔϯ ˠ

   2018 ৽ଔ • JavaScript ͕޷͖
4. None

5. M a c k e re l ͷ ։ ൃ

   ݴ ޠ ʢ ϑ Ϩ ʔϜϫ ʔ Ϋ ʣ • αʔόʔαΠυ: Scala (Play Framework), Go, Python • ϑϩϯτΤϯυ: TypeScript (AngularJS)

6. M a c k e re l ͷ ϑ ϩ

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

7. M a c k e re l ͷ ϑ ϩ

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

8. A n g u l a r J S ୤

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

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

10. P h a s e 0 : ϓ ϩ δΣ

    Ϋ τ ͷ ܭ ը • ݱঢ়ͷ෼ੳͱཁ݅ͷ੔ཧΛߦ͍ɺϑϨʔϜϫʔΫҠߦͷํ਑Λܾఆ •ʢͦ΋ͦ΋Ҡߦ͢Δͷ͔ɺՄೳͳͷ͔ʣ • ͲͷϑϨʔϜϫʔΫʹҠߦ͢Δͷ͔ • ͲͷΑ͏ʹҠߦΛਐΊΔͷ͔

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

12. ཁ ݅ 1 . ػ ೳ ։ ൃ ͸ ࢭ

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

13. ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

14. ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

15. ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ

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

16. ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ·

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

17. ܾ ఆ ͠ ͨ ํ ਑ · ͱ Ί •

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

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

19. P h a s e 1 : Ҡ ߦ ͷ

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

20. ج ൫ ੔ උ : ػ ೳ త ͳ ໘

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

21. A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ αʔϏε ίϯϙʔωϯτ

22. A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

23. A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

24. A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

25. A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ

26. ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

    ໘ • ϚΠϧετʔϯͷઃఆ • ࣮ࡍʹখ͞ͳίϯϙʔωϯτΛ React ΁Ҡߦͯ͠Έͯɺશମͷ࡞ۀΛେ ·͔ʹݟੵ΋Γ

27. ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

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

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

30. P h a s e 2 : ෳ ਺ ਓ

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

31. ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜

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

32. ·ͱΊ

33. · ͱ Ί • Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯ঺հ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •

    ҠߦΛਐΊΔதͰͲͷΑ͏ͳ޻෉Λ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτ͸يಓʹ৐Γͭͭ͋Δஈ֊