$30 off During Our Annual Pro Sale. View Details »

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

Susisu
February 05, 2020

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

Susisu

February 05, 2020
Tweet

More Decks by Susisu

Other Decks in Programming

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