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
Bulletproof Reactで始める!ESLintで強化する! 効果的なプロダクト開発
Search
naro143
November 14, 2023
Technology
0
570
Bulletproof Reactで始める!ESLintで強化する! 効果的なプロダクト開発
# 参考資料
https://github.com/alan2207/bulletproof-react
naro143
November 14, 2023
Tweet
Share
More Decks by naro143
See All by naro143
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
270
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
37
14k
Other Decks in Technology
See All in Technology
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
150
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
事業開発におけるDify活用事例
kentarofujii
4
1.3k
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
110
AI時代、“平均値”ではいられない
uhyo
8
2.2k
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
2
2.2k
Kubernetes self-healing of your workload
hwchiu
0
360
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.2k
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
17k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
1
440
Wasmの気になる最新情報
askua
0
180
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Practical Orchestrator
shlominoach
190
11k
Transcript
Bulletproof Reactで始める!ESLintで強化する! 効果的なプロダクト開発
Yusuke Ishimi 株式会社プレックス SaaS事業の立ち上げやっています X : @naro143 🐱: @naro143
時間が足りない
関心事を分けると開発は早くなる
Bulletproof React
React Appのアーキテクチャ 説明と具体例があり非常に良い。 https://github.com/alan2207/bulletproof-react
Project Structure
大事な箇所だけ、さくっと見ます
features
大事な箇所だけ、さくっと見ます
導入してみた
前提 • SaaS事業の立ち上げ期 • 正式リリースに向けてデザインリニューアルをするタイミングで導入 • Next.js 13のプロジェクトに導入 特性 •
市場・顧客の知識が複雑 • 機能の正解がわからない • 副業メンバー多数での開発
シンプルな方針 1つのroutingに対して1つのfeaturesとした。理由は後述。 • src/app/projects • src/features/projects • src/app/projects/[projectId] • src/features/project-detail
こんな感じ ▼page.tsx features/ ▶
良かったこと • 「どこに実装するか?汎用的に実装するか?」で悩む時間が少なくなった。 ◦ プロダクト初期では「同じ UIだけど、同じ責務か?」の判断が難しい。(◀ 方針の理由) ◦ 個人的には「不毛な実装しているな」と感じるまでは共通化はしなくて良いと考えている。 •
影響範囲がfeatures内に閉じるため、考慮事項が少なくなった。 ◦ 副業メンバーなど深く事業に関わらないメンバーがより成果を出せるようになった。 ◦ 挑戦とフィードバックの質が上がり、メンバーの成長が早くなった。 • 構成の指針があることで、自然と責務の分離がされるようになった。
featuresの導入によって、 関心事が分かれて開発が早くなった✨
ESLint
依存関係を制限する • features/ は他のfeaturesを参照しない • components/ はfeaturesを参照しない • lib/ はfeaturesを参照しない
• providers/ はfeaturesを参照しない
index.tsでexportしたものだけ許可する features内は ../ で参照できる。
まだ語りたいけど...!
ここまで!
参考 • https://github.com/alan2207/bulletproof-react