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.1k
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
susisu
0
810
BuckleScript 使ってみた
susisu
0
290
Atom パッケージ開発のすゝめ
susisu
1
2.1k
5分でわかる Curry–Howard 同型対応
susisu
0
930
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.1k
遅延評価と健康
susisu
0
580
楽しく学ぶ難解プログラミング言語
susisu
0
760
多分これが一番早いと思います
susisu
0
400
Other Decks in Programming
See All in Programming
快速入門可觀測性
blueswen
0
370
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
SymfonyCon Vienna 2025: Twig, still relevant in 2025?
fabpot
3
1.2k
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
460
MCP with Cloudflare Workers
yusukebe
2
220
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
170
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
0
100
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
Jakarta EE meets AI
ivargrimstad
0
250
fs2-io を試してたらバグを見つけて直した話
chencmd
0
240
103 Early Hints
sugi_0000
1
230
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
330
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Visualization
eitanlees
146
15k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Designing Experiences People Love
moore
138
23k
GitHub's CSS Performance
jonrohan
1030
460k
Typedesign – Prime Four
hannesfritz
40
2.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
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 ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯհ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •
ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊