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
2.1k
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
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
2.3k
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
18
14k
null or undefined
susisu
25
7.6k
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
susisu
0
900
BuckleScript 使ってみた
susisu
0
350
Atom パッケージ開発のすゝめ
susisu
1
2.2k
5分でわかる Curry–Howard 同型対応
susisu
0
1.1k
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2.2k
遅延評価と健康
susisu
0
630
Other Decks in Programming
See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
RDoc meets YARD
okuramasafumi
4
170
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Deep Dive into Kotlin Flow
jmatsu
1
360
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
BBQ
matthewcrist
89
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Being A Developer After 40
akosma
90
590k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Six Lessons from altMBA
skipperchong
28
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.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 ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯհ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •
ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊