現状、そうなっているおれのフロントエンド開発のファイル構造
ここに書いてあることは全然適当でおれは労働してないししたこともないからもっと筋のいい書き方が多分あるしむしろあってほしい
おおよそここで使った技法をおれの備忘録として吐き出し
https://gyazo.com/251195620bad8b872d6829a4d96ed195
ヘッ
code:src
components/ <- 別にページに依存しているわけでもない遊撃コンポーネント．
HeaderNav/ <- AtomicDesignのOrganisms単位ぐらいを気持ちに切り分け．
(Atoms, Molecules)/ <- AtomicDesignのAtoms, Moleculesとして切り分けした部品ディレクトリ．以下略
index.ts <- 単純にimportするときに楽にするために纏めたファイル．
BaseComponent.tsx <- BaseComponent(後述)
Component.tsx <- Component(後述)
Component.stories.tsx <- ComponentのStoryファイル．
Container.tsx <- Container(後述)
Container.stories.tsx <- ContainerのStoryファイル．
HeaderNav.gql <- まあそういうGraphQLの定義ファイルがある．
pages/
books/
templates/ <- AtomicDesignのTemplate単位ぐらい(?)で切り分け．
BookPage/
(Atoms,Molecules,Organisms)/
index.tsx
BaseComponent(BCom), Component(Com), Container(Con)
今まで上の例だとHeaderNav.tsxに書いていたが、ファイルが長くなりすぎるので名前を与えて適宜切り出した
BCom (Optional)
何も処理が無い最低限の(booleanによる表示の制御やArray.map()などの処理はある)コンポーネントで、単純にスタイリングとかの為に作られている.
おおよそ、こう
export const BaseComponent: React.FC<BaseComponentProps> = ({...props}) => (<div/>)
TailwindCSSでクラス付けでスタイルが当てられているが、将来的にstyled-componentsとかもっと筋の良い方法があったらこの層で置き換える Com
i18n処理など、描画のための処理を注入
BCom = Comの場合はBComを省略してここに書くこともある．
要するに、完全なデザイン層であり…
Con
State処理などの、本質的に描画には関係ないがコンポーネントとして最低限備えていなければならない機能をこの層で実装
適宜Component.test.tsやComponent.stories.tsできたら良いんじゃないかな.と思っている まだ構想なので全然上手く行かない可能性はありますが…
pages/*.tsx
後述のtemplates/に適切なプロパティをサッとバケツリレーするだけでその他の処理はまったくない
getServerSidePropsなどを除いて
ほぼこれだけ
export const Page: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (props) => <BookPage {...props}>
（今更ながらこれBookPageTemplateのほうが名を表してるかも）
templates/
歴史的経緯
一々pages/書き換えるとビルドおもすぎワロタという理由で切り出した
後付でAtomicDesignのtemplatesというレイヤーに対応させた
まあここでしか使われないだろうというような局所的なAtoms,Molecules,Organismsは直下に置くことにした
実際はまあなんか普通に依存しまくっててウケるという感じになっってます(涙)
ほかは上のBCom,Com,Conを念頭に置いて