フロントエンドのカタチ

以下の記事のパクリ

対象

React

Preact

Next.js

Vue.js

Nuxt.js

ねらい

責務を分ける

責務と債務って似てるね

シンプルにする

構成

table:structure

/

|- components/ コンポーネントを置く

| |

| |- {Name}/ コンポーネントの名前で切る

| |- index.tsx export と合成をする所、ここの export を他のコンポーネントなどから参照する

| |- {Name}.tsx {Name}Layout で見た目を、{Name} で Layout にロジックなどを肉づけした物を export する

| |- {Name}.test.tsx テストを書くならここに

| |- {Name}.stories.tsx Storybook を使うならここに切り出す

| |- {Name}.module.css 必要があれば {Name}.tsx の CSS を Module CSS として切り出す

| |- {Name]Layout.tsx 必要があれば {Name}.tsx の {Name}Layout を切り出す

|- pages/ ページを置く

| |- {Page}.tsx components 以下にあるコンポーネントを駆使してページを作る

気を付ける点

フレームワークやライブラリの都合以外では default export をしない

他のコンポーネントやページはコンポーネントの index.tsx が export してる物だけを参照する

悩んでる点

Layout という名前が気に食わない