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
Web Re-Architecture プロジェクトにおける技術的チャレンジ
Search
mercari
PRO
September 10, 2018
Programming
3
700
Web Re-Architecture プロジェクトにおける技術的チャレンジ
- どのように最新技術を取り入れているのか
- どのような技術的チャレンジをしているのか
- プロダクト開発と技術イノベーションとの関係
mercari
PRO
September 10, 2018
Tweet
Share
More Decks by mercari
See All by mercari
[mercari GEARS 2025] Techniques for Reliable Code Generation Using AI Agents
mercari
PRO
0
9
[mercari GEARS 2025] Foundations of AI - The Invisible Forces Driving Product Innovation
mercari
PRO
0
8
[mercari GEARS 2025] Building Foundation for Mercari’s Global Expansion
mercari
PRO
1
100
[mercari GEARS 2025] The Past, Present, and Future of Anti-Phishing Measures at Mercari
mercari
PRO
0
6
[mercari GEARS 2025] Backend Standardization with MCP
mercari
PRO
0
8
[mercari GEARS 2025] Transforming customer engagement with Google Customer Engagement Suite
mercari
PRO
0
7
[mercari GEARS 2025] PJ Aurora’s Vision and Automated UI Quality Evaluation Agents
mercari
PRO
0
9
[mercari GEARS 2025] なぜメルカリはノーコードを選ばなかったのか? 社内問い合わせ工数を60%削減したLLM活用の裏側
mercari
PRO
0
30
[mercari GEARS 2025] The Journey to AI Native - Driving Company-Wide Adoption Through Data and Practice
mercari
PRO
0
11
Other Decks in Programming
See All in Programming
Flutterアプリ運用の現場で役立った監視Tips 5選
ostk0069
1
360
Atomics APIを知る / Understanding Atomics API
ssssota
1
120
「正規表現をつくる」をつくる / make "make regex"
makenowjust
1
280
業務でAIを使いたい話
hnw
0
260
アーキテクチャと考える迷子にならない開発者テスト
irof
7
2.2k
ネストしたdata classの面倒な更新にさようなら!Lensを作って理解するArrowのOpticsの世界
shiita0903
1
310
PHPライセンス変更の議論を通じて学ぶOSSライセンスの基礎
matsuo_atsushi
0
140
JJUG CCC 2025 Fall: Virtual Thread Deep Dive
ternbusty
3
150
Temporal Knowledge Graphで作る! 時間変化するナレッジを扱うAI Agentの世界
po3rin
5
1.3k
flutter_kaigi_2025.pdf
kyoheig3
1
220
Honoを技術選定したAI要件定義プラットフォームAcsimでの意思決定
codenote
0
140
ビルドプロセスをデバッグしよう!
yt8492
0
290
Featured
See All Featured
Designing for Performance
lara
610
69k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
1.8k
How to train your dragon (web standard)
notwaldorf
97
6.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
970
Context Engineering - Making Every Token Count
addyosmani
9
380
Navigating Team Friction
lara
190
15k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
How to Think Like a Performance Engineer
csswizardry
28
2.3k
Transcript
Web Re-Architecture プロジェクトにおける Web Re-Architecture プロジェクトにおける 技術的チャレンジ 技術的チャレンジ フロントエンドエンジニア @vwxyuratoooo
About Me About Me 宮崎優太郎 2018/05/16 入社 Front end engineer
Web Re‒Architecture Project
Frontend ⚒ Re‒Architecture
今日話すこと 今日話すこと どのように最新技術を取り入れているのか どのような技術的チャレンジをしているのか プロダクト開発と技術イノベーションとの関係
Web Re-Architecture Project Web Re-Architecture Project
の前に、メルカリで進められている 2つの Project に関して...
Re-Architecture Project Re-Architecture Project Frontend 以外でも行われている 古くなった技術スタックの刷新 OKR と共に全社的に周知され 高い優先度で進められている
Microservices Project Microservices Project 巨大なモノリシックサービスを 独立した複数のサービスに分割 大きくなったエンジニア組織に対して 一人ひとりにオーナシップ 変化や障害にも強い組織とプロダクト目指す
今の技術と組織を考えてベストな選定をしようとすると 勝手に Microservices になってくる
Frontend における Re-Architecture Frontend における Re-Architecture https://speakerdeck.com/sota1235/road‒to‒migrate‒jp‒web‒as‒a‒microservice
Frontend における Re-Architecture Frontend における Re-Architecture アプリに追いついていない未実装機能 + α PC・SP
共に最適化しきれていない UI ⬇ ⬇ ⬇ 開発スピードの向上 チームの変化 Web に求められているものと 立ち位置の変化
Architecture Frameworks Architecture Frameworks https://speakerdeck.com/sota1235/road‒to‒migrate‒jp‒web‒as‒a‒microservice
None
None
ここまでのまとめ ここまでのまとめ これから先更にプロダクトを進めていくための Re‒Architecture と Microservices Re‒Architecture と Microservices 化が新しい技術挑戦の
場にもなっている これから先新しい技術をすばやく取り入れていくための 基盤づくりでもある
どのように進めているのか どのように進めているのか
スケジュールとか スケジュールとか ページ毎にリプレイスしていく アーキテクチャに問題があれば早めに気付ける リリーススケジュールを都度細かく調整
技術選定 技術選定 Issue, Slack, 口頭で議論 必要があればプロトタイプを作って比較検証 チームのメンバーが近くの席にいる ❌ 誰かが決める、これ使えって言われる ⭕
各自がオーナーシップを持ち決定できる ディスカッションをしていく中でベストなソリューション が共通認識として出来上がってくる
SET (Software Engineer in Test) や セキュリティなど、プロに相談できる
今後のフロントエンド 今後のフロントエンド PWA でできること Microfrontend の可能性 メルカリ、メルペイと定期的に勉強会をしながら 技術の共有やディスカッション
まとめ まとめ 組織と仕組み オーナーシップ, チャレンジ, コードを新しく保つことへ の理解 一緒に課題解決できるメンバー プロフェッショナル, 目的意識と手段
世の中を変えていくチャンスや文化 プラットフォーム, 基盤を作る2つのプロジェクト
ありがとうございました