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

Bulletproof Reactで始める！ESLintで強化する！効果的なプロダクト開発

Bulletproof Reactで始める！ESLintで強化する！効果的なプロダクト開発

naro143

More Decks by naro143

Other Decks in Technology

Featured

Transcript