2020-09-10

しごと

フロントエンド(React)のディレクトリ構成

Hoge/

Hoge.test.tsx

Hoge.stories.tsx

Hoge.tsx

index.ts

Hogeコンポーネントを書くときにその実装、テスト、ストーリーを1つのフォルダにまとめる

テストやストーリーが別の場所に散ってるのはおかしい。それはもはや「ユニット」ではない

index.tsがexportに専念することでコンポーネントに従属する(が公開されてほしくない)実装が外部で利用されることを防ぐ(もちろん利用している実装をレビューやLintで弾く文化が必要)

こうなっている理由として、JestやStorybookが実装とファイルを共有できない事情がある

Jestはグローバルにexpectをインジェクトしてくるし、StorybookはComponent Story Formatにおいて特定のパターンでコンポーネントをexportすることを要求してくる

君がラスボスなんだ