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
24
6.3k
スクリーンショット撮影のために Puppeteer を操る / Kyoto.js 16
susisu
0
770
BuckleScript 使ってみた
susisu
0
270
Atom パッケージ開発のすゝめ
susisu
1
2.1k
5分でわかる Curry–Howard 同型対応
susisu
0
870
ジェネレータを有効活用し隊 / Kyoto.js 11 LT
susisu
2
2k
遅延評価と健康
susisu
0
580
楽しく学ぶ難解プログラミング言語
susisu
0
710
多分これが一番早いと思います
susisu
0
400
Other Decks in Programming
See All in Programming
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
私のEbitengineの第一歩
qt_luigi
0
450
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
220
Jakarta EE meets AI
ivargrimstad
0
380
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
930
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
REXML改善のその後
naitoh
0
190
開発を加速する共有Swift Package実践
elmetal
PRO
0
410
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
370
Jakarta EE meets AI
ivargrimstad
1
480
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Speed Design
sergeychernyshev
22
430
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Bash Introduction
62gerente
608
210k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The World Runs on Bad Software
bkeepers
PRO
64
11k
In The Pink: A Labor of Love
frogandcode
139
22k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Building Your Own Lightsaber
phodgson
101
6k
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 ͷϑϩϯτΤϯυϑϨʔϜϫʔΫҠߦϓϩδΣΫτͷ্ཱͪ͛ʹ ͍ͭͯհ͠·ͨ͠ • ͲͷΑ͏ʹҠߦͷܭըΛཱ͔ͯͨ •
ҠߦΛਐΊΔதͰͲͷΑ͏ͳΛ͍ͯ͠Δ͔ • ݱࡏϓϩδΣΫτيಓʹΓͭͭ͋Δஈ֊