さむブログ

学生エンジニアのポートフォリオ

React x AtomicDesignでのフォルダ構成

バイト先でもReactでの案件が多いから学習するぞいっ(-ω-)/
って時に壁にぶち当たった。

フォルダ構成ってどうすればいいの?

調べてみると、'AtomicDesig' というデザインの考え方がありそれに従ったフォルダ構成があるらしい。

AtomicDesignとは?

すごくわかりやすくまとめてくださってたので参照↓

簡単に言うと
「ボタン」や「入力エリア」、「見出し」などの
これ以上分割できない、それ単体では機能しないもの(ここ重要)が
Atoms(原子)

Atomを組み合わせてできる、「検索ボックス」などが
Molecules(分子)

AtomとMoleculeを組み合わせてできる、「ヘッダー」や「フッダー」が
Organisms(生体)

Organismsを組み合わせてできる、「コンテンツが流し込まれる前のページ」が
Templates(テンプレート)

Templatesにコンテンツが流し込まれた、いわゆるTemplatesのインスタンス
Pages(ページ)

なるほど、わかりやすい!

フォルダ構成の例

標準

root  
└ src  
  ├ index.js  
  ├ container  
  │ ├ header.js  
  │ └ footer.js  
  └ presentational  
    ├ atoms  
    │ ├ button.js  
    │ └ checkbox.js  
    └ molecules  
      ├ serchbox.js  
      └ sharebutton.js  

containerがラッパー、presentationalが表示部品という構成が分かりやすいですね( ..)φメモメモ

複数ページの場合

root
└ src
  ├ index.js
  ├ container
  │ ├ organisms
  │ │ ├ header.js
  │ │ └ footer.js
  │ └ templates
  │   ├ top.js
  │   └ 404.js
  └ presentational
    ├ atoms
    │ ├ button.js
    │ └ checkbox.js
    └ molecules
      ├ serchbox.js
      └ sharebutton.js

templatesにページのひな型が入っていて、どのorganismsの組み合わせをエントリーポイントに渡すか?
という構造が分かりやすいですね( ..)φメモメモ

より複雑なアプリケーションの場合

root
└ src
  ├ index.js
  ├ components
  │ ├ container
  │ │ ├ organisms
  │ │ │ ├ header.js
  │ │ │ └ footer.js
  │ │ └ templates
  │ │   ├ top.js
  │ │   └ 404.js
  │ └ presentational
  │   ├ atoms
  │   │ ├ button.js
  │   │ └ checkbox.js
  │   └ molecules
  │     ├ serchbox.js
  │     └ sharebutton.js
  └ modules
    ├ benri.js
    └ methods.js

UIの描画とは別に独立した処理(API接続)などがある場合moduleとして分けることで、 使う際にインポートして使う方法があるのかぁ( ..)φメモメモ