https://hatena.connpass.com/event/164042/
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
ϨΨγʔϑϩϯτΤϯυग़ϓϩδΣΫτΛͲͷΑ͏ʹ্ཱ͔ͪ͛ͨࠓओʹ͢͜ͱ
• id:susisu• Mackerel ։ൃνʔϜΞϓϦέʔγϣϯΤϯδχΞ• 2016 Πϯλʔϯ ˠ 2018 ৽ଔ• JavaScript ͕͖
M a c k e re l ͷ ։ ൃ ݴ ޠ ʢ ϑ Ϩ ʔϜϫ ʔ Ϋ ʣ• αʔόʔαΠυ: Scala (Play Framework), Go, Python• ϑϩϯτΤϯυ: TypeScript (AngularJS)
M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ྺ ࢙• ։ൃॳ (2014 ͝Ζ) ͔Β AngularJS (v1) Λར༻• ։ൃݴޠ్தͰ JavaScript ͔Β TypeScript • ͦͷޙେ͖ͳมߋͳ͘ݱࡏʹࢸΔ
M a c k e re l ͷ ϑ ϩ ϯ τ Τ ϯ υ ͷ ݱ ࡏ• AngularJS ϨΨγʔԽ• ٕज़ࣗମ͕ݹ͘ɺ։ൃମݧϕετͰͳ͍• αϙʔτ 2021 6 ݄Ͱऴྃ• ։ൃΛܧଓ͢ΔͨΊʹϑϨʔϜϫʔΫͷҠߦ͕ඞਢˠ AngularJS ग़ϓϩδΣΫτ
A n g u l a r J S ग़ ϓ ϩ δΣ Ϋ τ• 2019 9 ݄ΑΓ։࢝• id:susisu ͕ओ୲ΤϯδχΞ• ݱࡏϓϩδΣΫτ͕ঃʑʹيಓʹΓɺϑϨʔϜϫʔΫͷҠߦ͕ਐΈͭͭ͋Δஈ֊• ͜ͷൃදͰϓϩδΣΫτ্ཱͪ͛ͷաఔΛհ͠·͢
Phase 0: ϓϩδΣΫτͷܭը
P h a s e 0 : ϓ ϩ δΣ Ϋ τ ͷ ܭ ը• ݱঢ়ͷੳͱཁ݅ͷཧΛߦ͍ɺϑϨʔϜϫʔΫҠߦͷํΛܾఆ•ʢͦͦҠߦ͢Δͷ͔ɺՄೳͳͷ͔ʣ• ͲͷϑϨʔϜϫʔΫʹҠߦ͢Δͷ͔• ͲͷΑ͏ʹҠߦΛਐΊΔͷ͔
ཁ ݅1. ػೳ։ൃࢭΊͳ͍2. νʔϜɾࣾͰϝϯςφϯε͍͚ͯ͠Δ3. αϙʔτऴྃͷظݶ·Ͱʹग़͢Δ
ཁ ݅ 1 . ػ ೳ ։ ൃ ࢭ Ί ͳ ͍• Mackerel ·ͩΛଓ͚͍ͯΔαʔϏεͰɺ৽ػೳͷ։ൃ͋Δ• ৽چ 2 ͭͷϑϨʔϜϫʔΫͰಉ͡ͷΛ࡞Δͱೋखؒʹͳͬͯ͠·͏ˠ ෦తʹஔ͖͍͑ͯ͘࡞ઓΛͱΔ• ओཁͳϑϨʔϜϫʔΫ (React, Vue, Angular) Ͱ͋ΕͲΕͰՄೳ
ཁ ݅ 2 . ν ʔϜ ɾ ࣾ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ• ҠߦઌͷϑϨʔϜϫʔΫԿΛબͿ͔• ݅Λߟ͑Δ• ಋೖͷқύϑΥʔϚϯεͳͲͰٕज़తͳݒ೦͕ͳ͍• νʔϜϝϯόʔʹ։ൃܦݧ͕͋Εల։͍͢͠• ࣾͰଞʹ࠾༻࣮͕͋Δͱݟͷަɾਓࡐͷަྲྀ͕͍͢͠
ཁ ݅ 2 . ν ʔϜ ɾ ࣾ Ͱ ϝ ϯ ς φ ϯε ͯ͠ ͍ ͚Δ• ֤߲ʹ͍ͭͯϑϨʔϜϫʔΫΛൺֱݕ౼• ٕज़໘ ˠ ࢼݧతʹಋೖͯ͠Έͯݕূ• νʔϜͷܦݧ ˠ ϝϯόʔʹܦݧ։ൃ࣌ͷҹΛώΞϦϯά• ࣾͷ࣮ ˠ ۙ React Λ࠾༻͍ͯ͠Δ͜ͱ͕ଟ͍• ͜ΕΒΛ૯߹ͯ͠ React Λ࠾༻͢Δ͜ͱʹܾఆ
ཁ ݅ 3 . α ϙʔ τ ऴ ྃ ͷ ظ ݶ · Ͱ ʹ ग़ ͢ Δ• αϙʔτऴྃ (2021 6 ݄) ·Ͱ 22 ϲ݄ (2019 9 ݄࣌)• AngularJS ͷίʔυϕʔεͦΕͳΓͷن͕͋Δ• εΫϦϓτͱςϯϓϨʔτΛ͋Θͤͯ 52,000 ߦ• Λग़ͭͭ͠ɺෳਓͰฒߦͯ͠࡞ۀ͠ͳ͍ͱ͍͠ˠ ࡞ۀͷɾฒྻΛεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ
ཁ ݅ 3 . α ϙʔ τ ऴ ྃ · Ͱ ʹ ग़ ͢ Δ• ࡞ۀͷɾฒྻΛεέʔϧͤ͞ΒΕΔΑ͏ʹ͢Δ• طଘͷίʔυϕʔεͱͷΪϟοϓΛେ͖͗͘͢͠ͳ͍• ֶशίετΛԼ͛Δ• ͪ߹Θ͕ͤൃੜ͢ΔΑ͏ͳਐΊํආ͚Δ• ͜ͷͨΊʹ͍͔ͭ͘ͷٕज़ͻͱ·ͣಋೖΛݟૹͬͨ• react-redux• styled-components
ܾ ఆ ͠ ͨ ํ · ͱ Ί• ҠߦઌϑϨʔϜϫʔΫ React• ػೳ։ൃࢭΊͣʹ෦తʹஔ͖͍͑ͯ͘• ࡞ۀͷɾฒྻΛεέʔϧͤ͞ΒΕΔΑ͏ʹ
Phase 1: Ҡߦͷ։࢝Phase 0: ϓϩδΣΫτͷܭը
P h a s e 1 : Ҡ ߦ ͷ ։ ࢝• React Ҡߦ͢ΔͨΊͷج൫උ• ػೳతͳ໘• ػೳҎ֎ͷ໘• ϚΠϧετʔϯͷઃఆ• ਐḿͷՄࢹԽ
ج ൫ උ : ػ ೳ త ͳ ໘• React Ͱػೳ։ൃ͢ΔͨΊͷ४උ• جຊతͳػೳͷ࣮• AngularJS ͱͷ૬ޓӡ༻• ͜ͷൃදͰৄࡉ·Ͱ͖͠Εͳ͍ͷͰɺ͠ڵຯ͕͋Ε͜ͷ͋ͱݸผʹฉ͍͍ͯͩ͘͞
A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣαʔϏείϯϙʔωϯτ
A n g u l a r J S ͱ ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
ج ൫ උ : ػ ೳ Ҏ ֎ ͷ ໘• ϚΠϧετʔϯͷઃఆ• ࣮ࡍʹখ͞ͳίϯϙʔωϯτΛ React Ҡߦͯ͠Έͯɺશମͷ࡞ۀΛେ·͔ʹݟੵΓ
ج ൫ උ : ػ ೳ Ҏ ֎ ͷ ໘• ਐḿʢίʔυߦʣͷՄࢹԽ• ࡞ۀͷʢେࡶͳʣࢦඪ• ॏཁɿϞνϕʔγϣϯͷҡ࣋• Mackerel ͷػೳΛ׆༻• ίʔυߦΛαʔϏεϝτϦοΫͱͯ͠ߘ• ΧελϜμογϡϘʔυͰҰཡͰ͖ΔΑ͏ʹ
Phase 2: ෳਓମ੍Phase 1: Ҡߦͷ։࢝
P h a s e 2 : ෳ ਓ ମ ੍ • ج൫͕͋ΔఔͬͨͨΊɺෳਓମ੍Ͱͷ React ͷҠߦΛ։࢝• ϓϩδΣΫτΛيಓʹ͍ͤͯ͘ஈ֊
ෳ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜ ͱ ʹ ΑΔ ม Խ• ใͷڞ༗͕ඞཁ ˠ Scrapbox Λ׆༻• ։ൃࢽͰݱঢ়ͷڞ༗ɺ࣭ίʔφʔͰٙͷղܾ• ҰਓͰݟ͚ͭʹ͔ͬͨ͘ج൫ͷෆඋ͕໌֬ʹͳΔ͜ͱ• ܧଓతʹඋΛߦ͏• AngularJS ͷίʔυ͕ݮগʹసͨ͡
·ͱΊ
· ͱ Ί• Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ͍ͭͯհ͠·ͨ͠• ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ• ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔• ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊