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
漸進的な変更を支えるフロントエンド設計
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
jaxx2104
July 30, 2019
Programming
5
2.3k
漸進的な変更を支えるフロントエンド設計
Ginza.js#3
https://ginzajs.connpass.com/event/136794/
jaxx2104
July 30, 2019
Tweet
Share
More Decks by jaxx2104
See All by jaxx2104
freeeにおけるファンクションを超えた一気通貫でのAI活用
jaxx2104
3
1.7k
Relative CI が気になっている話
jaxx2104
0
540
デザインファイルにおける継続的インテグレーション
jaxx2104
2
490
価値あるフロントエンドデザイン領域開拓
jaxx2104
0
450
Gatsby と Netlify で JAMstack なメディア開発
jaxx2104
0
790
サイレントヒーローを作らない取り組み
jaxx2104
1
200
開発組織のメンバーからリーダーになって
jaxx2104
0
140
Nikuman
jaxx2104
0
460
レガシーなフロントエンド環境で心理的安全性を確保する / RecoChoku Tech Night #08
jaxx2104
0
370
Other Decks in Programming
See All in Programming
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
960
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
460
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
210
Oxlintはいいぞ
yug1224
5
1.3k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
980
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
290
ZJIT: The Ruby 4 JIT Compiler / Ruby Release 30th Anniversary Party
k0kubun
1
390
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.5k
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
220
CSC307 Lecture 05
javiergs
PRO
0
490
Featured
See All Featured
A Soul's Torment
seathinner
5
2.2k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
89
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
96
Navigating Team Friction
lara
192
16k
Git: the NoSQL Database
bkeepers
PRO
432
66k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
230
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
50
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3k
Transcript
漸進的な変更を支えるフロントエンド設計 漸進的な変更を支えるフロントエンド設計 Ginza.js #3 / Futoshi Iwashita
自己紹介 自己紹介 岩下 太 (@jaxx2104) 株式会社リクルート Front-end engineer
None
飲食業務支援アプリ レストランボード 飲食業務支援アプリ レストランボード
組織診断ツール Geppo 組織診断ツール Geppo
様々なプロダクトに関わってきて 様々なプロダクトに関わってきて
自分が感じるフロントエンドの変化 自分が感じるフロントエンドの変化 一度構築したWEBアプリケーションのフロントエンド アーキテクチャを運用する仕事が増えた。 UIだけでなくデザインモック・テストなど複数環境が より高く求められるようになってきた。 限られたリソース(人、時間、お金)のなかでエンハンス しながらどのようにアプリケーション更新するのかが課題。
みなさんはどうでしょうか みなさんはどうでしょうか
話すこと 話すこと 変化を予測・制御することについて 漸進的な変更を支える設計について 自分がやってみていること
変化を予測・制御するのって難しい 変化を予測・制御するのって難しい ビジネス要件から予期しないスケールの仕方をする 新たな機能ドメインが必要になる 開発体制が1年で10倍くらいに増える 時として設計を見誤ることもある
どうやって向き合っていくか どうやって向き合っていくか
None
Coupling between classes (the points on the perimeter) in a
Big Ball of Mud from an unnamed client project. https://www.thoughtworks.com/insights/blog/microservices- evolutionary-architecture
良さそうな内容をいくつか 良さそうな内容をいくつか 変化が目的通りなのか指標を設ける 再利用と疎結合を見極める 依存管理コストを解消する
自分がやってみていること 自分がやってみていること Vueで構築されたWEBアプリケーションの場合
変化が目的通りなのか指標を設ける 変化が目的通りなのか指標を設ける vue-cli の packages 単位での移行 @vue/babel-preset-app がオススメ 可能なら vue-cli
導入 https://github.com/vuejs/vue-cli/tree/dev/packages/@vue
指標があることのメリット 指標があることのメリット 拡張している差分がわかりやすい 可逆的な判断/対応もしやすい
再利用と疎結合を見極める 再利用と疎結合を見極める 自分で環境を作る場合に必要 粒度感は先程のような packages を 参考にモジュール化することが多い 疎結合のために重複を許容することも必要
こんな感じ こんな感じ package.json
依存管理コストを解消する 依存管理コストを解消する 依存モジュール更新を自動化する renovate や Greenkeeper を使う 疎結合による重複のコストを減らす
更新頻度に対する考え方 更新頻度に対する考え方 開発者のコードがライブラリを呼び出す ライブラリは必要になったら更新 フレームワークは開発者のコードを呼び出す フレームワークは積極的に依存を更新 https://martinfowler.com/bliki/InversionOfControl.html
renovate の場合 renovate の場合 renovate.json
まとめ まとめ 指標を設けることで拡張した差分がわかりやすい 再利用と疎結合を見極め、時には重複を許容する フレームワークは自動化で積極的に依存解消する
ここでは紹介しませんでしたが以下のトピックも 面白いので読んでない人はおすすめです。 テスト、CI、機能トグル 落とし穴やアンチパターン 組織構造とアーキテクチャ
ありがとうございました ありがとうございました