Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer...
Search
Susisu
February 05, 2020
Programming
0
2k
Mackerel のフロントエンドフレームワーク移行 序章 / Hatena Engineer Seminar #13
https://hatena.connpass.com/event/164042/
Susisu
February 05, 2020
Tweet
Share
More Decks by Susisu
See All by Susisu
null or undefined
susisu
25
7.2k
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
susisu
0
830
BuckleScript 使ってみた
susisu
0
300
Atom パッケージ開発のすゝめ
susisu
1
2.1k
5分でわかる Curry–Howard 同型対応
susisu
0
950
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.1k
遅延評価と健康
susisu
0
590
楽しく学ぶ難解プログラミング言語
susisu
0
790
多分これが一番早いと思います
susisu
0
410
Other Decks in Programming
See All in Programming
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
CI改善もDatadogとともに
taumu
0
110
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
120
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
2
820
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
220
Software Architecture
hschwentner
6
2.1k
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Statistics for Hackers
jakevdp
797
220k
Adopting Sorbet at Scale
ufuk
74
9.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Speed Design
sergeychernyshev
25
780
Git: the NoSQL Database
bkeepers
PRO
427
64k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Transcript
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
ϨΨγʔϑϩϯτΤϯυग़ϓϩδΣΫτΛͲͷΑ͏ʹ্ཱ͔ͪ͛ͨ ࠓओʹ͢͜ͱ
• id:susisu • Mackerel ։ൃνʔϜ ΞϓϦέʔγϣϯΤϯδχΞ • 2016 Πϯλʔϯ ˠ
2018 ৽ଔ • JavaScript ͕͖
None
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 ͱ
ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
A n g u l a r J S ͱ
ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
A n g u l a r J S ͱ
ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
A n g u l a r J S ͱ
ͷ ૬ ޓ ӡ ༻ ʢ ֓ ؍ ʣ
ج ൫ උ : ػ ೳ Ҏ ֎ ͷ
໘ • ϚΠϧετʔϯͷઃఆ • ࣮ࡍʹখ͞ͳίϯϙʔωϯτΛ React Ҡߦͯ͠Έͯɺશମͷ࡞ۀΛେ ·͔ʹݟੵΓ
ج ൫ උ : ػ ೳ Ҏ ֎ ͷ
໘ • ਐḿʢίʔυߦʣͷՄࢹԽ • ࡞ۀͷʢେࡶͳʣࢦඪ • ॏཁɿϞνϕʔγϣϯͷҡ࣋ • Mackerel ͷػೳΛ׆༻ • ίʔυߦΛαʔϏεϝτϦοΫͱͯ͠ߘ • ΧελϜμογϡϘʔυͰҰཡͰ͖ΔΑ͏ʹ
None
Phase 2: ෳਓମ੍ Phase 1: Ҡߦͷ։࢝
P h a s e 2 : ෳ ਓ
ମ ੍ • ج൫͕͋ΔఔͬͨͨΊɺෳਓମ੍Ͱͷ React ͷҠߦΛ։࢝ • ϓϩδΣΫτΛيಓʹ͍ͤͯ͘ஈ֊
ෳ ਓ ମ ੍ ʹ ͳ ͬ ͨ ͜
ͱ ʹ ΑΔ ม Խ • ใͷڞ༗͕ඞཁ ˠ Scrapbox Λ׆༻ • ։ൃࢽͰݱঢ়ͷڞ༗ɺ࣭ίʔφʔͰٙͷղܾ • ҰਓͰݟ͚ͭʹ͔ͬͨ͘ج൫ͷෆඋ͕໌֬ʹͳΔ͜ͱ • ܧଓతʹඋΛߦ͏ • AngularJS ͷίʔυ͕ݮগʹసͨ͡
·ͱΊ
· ͱ Ί • Mackerel ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯհ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •
ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊