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
Programming
0
540
Bulletproof Reactで始める!ESLintで強化する! 効果的なプロダクト開発
# 参考資料
https://github.com/alan2207/bulletproof-react
naro143
November 14, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
380
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
360
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.7k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
190
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
Infer入門
riru
4
1.6k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
610
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
180
Claude Codeで挑むOSSコントリビュート
eycjur
0
180
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Producing Creativity
orderedlist
PRO
347
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for Performance
lara
610
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.5k
Practical Orchestrator
shlominoach
190
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GitHub's CSS Performance
jonrohan
1032
460k
How to train your dragon (web standard)
notwaldorf
96
6.2k
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