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

Transcript

1. 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. 2.

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

3. 3.

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

   2018 ৽ଔ • JavaScript ͕޷͖
4. 4.

   None
5. 5.

   M a c k e re l ͷ ։ ൃ

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

   M a c k e re l ͷ ϑ ϩ

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

   M a c k e re l ͷ ϑ ϩ

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

   A n g u l a r J S ୤

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

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

10. 10.

    P h a s e 0 : ϓ ϩ δΣ

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

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

12. 12.

    ཁ ݅ 1 . ػ ೳ ։ ൃ ͸ ࢭ

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

    ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

    ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

    ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ

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

    ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ·

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

    ܾ ఆ ͠ ͨ ํ ਑ · ͱ Ί •

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

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

19. 19.

    P h a s e 1 : Ҡ ߦ ͷ

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

    ج ൫ ੔ උ : ػ ೳ త ͳ ໘

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

    A n g u l a r J S ͱ

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

    A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
23. 23.

    A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
24. 24.

    A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
25. 25.

    A n g u l a r J S ͱ

    ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
26. 26.

    ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

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

    ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

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

    None
29. 29.

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

30. 30.

    P h a s e 2 : ෳ ਺ ਓ

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

    ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜

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

    ·ͱΊ

33. 33.

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

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