Reactのディレクトリ構成を検証する【bulletproof編】

はじめに

React公式はディレクトリ構成について、自由に決めていいよ〜という見解です。

お勧めの React プロジェクトの構成は？　
React はファイルをどのようにフォルダ分けするかについての意見を持っていません。

しかし（存在するなら）ベストプラクティス構成で実装したい。

そこで、巷でよく使われているディレクトリ構成を検証し、それそれの利点を探っていこうと思います。

• Reactのディレクトリ構成を検証する【Atomicデザイン編】
• Reactのディレクトリ構成を検証する【bulletproof編】 ←いまここ

bulletproofとは？

bulletproofは直訳すると防弾です。bulletproofはディレクトリ構成だけでなく、スタイルの定義の仕方、セキュリティ、最適化まで様々なナレッジが詰まったアーキテクチャです。素晴らしいので、とにかく読みましょう。

本記事は、bulletproofのディレクトリ構造のみを参考にし、検証した内容の記事になります。

前提条件

• 技術記事リンクデモサイトを作成し、ディレクトリ構成を検証
• 見た目と機能は変更しない、パッケージは同じバージョン
• 主な技術スタック
  • React
  • Vite
  • typescript
  • tailwind

成果物

技術記事リンクデモサイト
レンダリングの様子を観察するため、レンダリングのたびに要素が黄色くなります。
https://hacker-news-react-bulletproof.vercel.app/

GitHub
https://github.com/Nyamadamadamada/hacker-news-react-bulletproof

参考にしたサイト
https://github.com/SankThomas/hacker-news

私見による評価

評価基準と所感の詳細を以下に記載します。

Reactの設計原則に則っているか

Reactの思想に近いディレクトリ構成であればベストプラクティスのはず、ということでReactの設計原則に関連する３項目を評価対象にしました。

• 宣言的なView
  • 関連するコンポーネントのみ更新、描画する
  • 無駄に再レンダリングしない
• コンポーネント
  • UIは独立し、再利用できる部品であるか
• 単一責任の原則
  • ひとつのコンポーネントはひとつの役割だけをするべき

宣言的なView

評価は３。

bulletproofでは主に機能ごとに要素を分解しています。
APIからのデータ取得やHooksも別ファイルに分離しているため、関係する要素のみレンダリングすることができます。
カスタムフックを使うにはReactがいつ値を更新するかなど、再レンダリングの流れを知っておく必要があり、あらぬ方向に実装する可能性も否めないため評価を３にしました。

Atomicデザインの時もそうでしたが、ディレクトリの分け方で描画を最適にするのではなく、 useMemoやuseCallbackを使ってレンダリングの制御を行うことを意識したほうがよさそうです。

コンポーネント

評価は5。

全体で使える共通要素はsrc/Component、その他の機能はsrc/featuresの中に格納されています。
機能ごとに要素を分けているので再利用しやすく、且つ必要な分だけ分解するため、必要以上にファイルを作る必要がありません。文句なしで評価は５です！

featuresディレクトリの構造

src/features/news
|
+-- api         # APIからデータを取得用の関数置き場
|
+-- components  # newsに関するコンポーネント
|
+-- type        # 型置き場
|
+-- root        # newsに関するルート

単一責任の原則

評価は4。

コンポーネントは自由な粒度で分割することができ、自分の目安でコンポーネントに責任を持たせます。bulletproofではfeatures下に機能ごとにコンポーネントを作成するため、実装していく中でその機能に必要な要素を自然と切り分けることができます。
しかし、開発者が単一責任の原則を意識して実装しなければ、１つ以上の役割を持たせてしまう可能性があるため評価は４にしました。

コードの見やすさ

評価は５。

コンポーネントの切り分けが機能ごとでわかりやすいので、コードも見やすいです。
評価は５です！

実装しやすいか

評価は4。

コンポーネントの切り分けがしやすく、ディレクトリ構成もわかりやすいため、かなり実装しやすいと思いました。
しかし、機能（＝ドメイン）をどのように分割するか、チームで認識合わせをしないと、あらぬ場所にコンポーネントを配置するおそれがあるため、評価は４です。

LighthouseによるWEB評価

LighthouseはサイトのパフォーマンスやSEO評価をしてくれるGoogleのツールです。

bulletproofデザインのWEBサイト

ディレクトリ分けしないWEBサイト

• Performance
  • サイト内のスピードに関する評価
• Accessibility
  • サイトの訪問者および、検索エンジンのロボットに対して最適な作りになっているか
• Best Practices
  • サイトをスクロールする際のパフォーマンス
• SEO
  • 検索結果のランキングに影響する項目

Performanceが若干低め
bulletproofとしてディレクトリ分けをする上で、カスタムフックでAPIからデータを取得するようにしたのですがが、上手にコーディングできなかった可能性があります。。。

Accessibilityが若干高い。
１つのファイルに全部書くよりファイルを分けた方がレンダリングが最適化されて数値が上がったのかもしれません。詳しくないので原因がわかったら追記します。

さらにアクセシビリティを上げたい場合は公式の「アクセシビリティ」を参照すると良さげです。
https://ja.reactjs.org/docs/accessibility.html

まとめ

• bulletproofはReactの思想に沿った上に実装しやすいディレクトリ分けと思われる
• 特に機能ごとにコンポーネント,API,ルートをまとめて切り分ける構成は、バックエンドエンジニアに馴染み深い

結論

React開発はbulletproof構成で、しよう！！