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.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
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
2.5k
君だけのオリジナル async / await を作ろう / TSKaigi 2025
susisu
18
15k
null or undefined
susisu
25
7.6k
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
susisu
0
910
BuckleScript 使ってみた
susisu
0
360
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
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
120
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
7
5.5k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
200
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
260
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
210
三者三様 宣言的UI
kkagurazaka
0
260
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
For a Future-Friendly Web
brad_frost
180
10k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Become a Pro
speakerdeck
PRO
29
5.6k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Documentation Writing (for coders)
carmenintech
75
5.1k
A Tale of Four Properties
chriscoyier
161
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
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 ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯհ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •
ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊