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
2. ϨΨγʔϑϩϯτΤϯυ୤ग़ϓϩδΣΫτΛͲͷΑ͏ʹ্ཱ͔ͪ͛ͨ ࠓ೔ओʹ࿩͢͜ͱ
3. • id:susisu • Mackerel ։ൃνʔϜ ΞϓϦέʔγϣϯΤϯδχΞ • 2016 Πϯλʔϯ ˠ 2018 ৽ଔ • JavaScript ͕޷͖
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 ͷػೳΛ׆༻ • ίʔυߦ਺ΛαʔϏεϝτϦοΫͱͯ͠౤ߘ • ΧελϜμογϡϘʔυͰҰཡͰ͖ΔΑ͏ʹ
29. Phase 2: ෳ਺ਓମ੍΁ Phase 1: Ҡߦͷ։࢝
30. P h a s e 2 : ෳ ਺ ਓ ମ ੍ ΁ • ج൫͕͋Δఔ౓੔ͬͨͨΊɺෳ਺ਓମ੍Ͱͷ React ΁ͷҠߦΛ։࢝ • ϓϩδΣΫτΛيಓʹ৐͍ͤͯ͘ஈ֊
31. ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜ ͱ ʹ ΑΔ ม Խ • ৘ใͷڞ༗͕ඞཁ ˠ Scrapbox Λ׆༻ • ։ൃ೔ࢽͰݱঢ়ͷڞ༗΍ɺ࣭໰ίʔφʔͰٙ໰ͷղܾ • ҰਓͰ͸ݟ͚ͭʹ͔ͬͨ͘ج൫ͷෆඋ͕໌֬ʹͳΔ͜ͱ΋ • ܧଓతʹ੔උΛߦ͏ • AngularJS ͷίʔυ͕ݮগ܏޲ʹసͨ͡
32. ·ͱΊ
33. · ͱ Ί • Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯ঺հ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ • ҠߦΛਐΊΔதͰͲͷΑ͏ͳ޻෉Λ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτ͸يಓʹ৐Γͭͭ͋Δஈ֊