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

95d12ef3ae39f388be5a43b4788cb70e?s=47 Susisu
February 05, 2020

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

95d12ef3ae39f388be5a43b4788cb70e?s=128

Susisu

February 05, 2020
Tweet

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. 4.
  3. 5.

    M a c k e re l ͷ ։ ൃ

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

    M a c k e re l ͷ ϑ ϩ

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

    M a c k e re l ͷ ϑ ϩ

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

    A n g u l a r J S ୤

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

    P h a s e 0 : ϓ ϩ δΣ

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

    ཁ ݅ 1 . ػ ೳ ։ ൃ ͸ ࢭ

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

    ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

    ཁ ݅ 2 . ν ʔϜ ɾ ࣾ ಺ Ͱ

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

    ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ

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

    ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ·

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

    ܾ ఆ ͠ ͨ ํ ਑ · ͱ Ί •

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

    P h a s e 1 : Ҡ ߦ ͷ

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

    ج ൫ ੔ උ : ػ ೳ త ͳ ໘

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

    A n g u l a r J S ͱ

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

    A n g u l a r J S ͱ

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

    A n g u l a r J S ͱ

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

    A n g u l a r J S ͱ

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

    A n g u l a r J S ͱ

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

    ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

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

    ج ൫ ੔ උ : ػ ೳ Ҏ ֎ ͷ

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

    P h a s e 2 : ෳ ਺ ਓ

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

    ෳ ਺ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜

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

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

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