初めてのディレクトリ設計 コンポーネント設計の前に考えること

https://metaps.connpass.com/event/302330/

Transcript

1. 初めてのディレクトリ設 計 
 
 コンポーネント設計の前に考えること
 三海 純

2. 自己紹介
 • 三海純(ミカイ ジュン) • 現在フリーランスエンジニア ◦ Next.jsの設計とバックエンド実装 • 趣味 ◦ アニメ(BanG Dream!・ぼざろ 等) ◦ ネット麻雀(雀魂)
3. キャリア
 • 2020/06 - 2022/02: 正社員(受託企業) ◦ Vue.js/Nuxt.jsをメイン • 2022/03 - 2023/09: 正社員(自社開発) ◦ バックエンドはPython / Nest.js(Node.js) ◦ フロントエンドはReact.jsとNext.js • 2023/10 - : フリーランス(自社開発) ◦ Next.jsの設計とバックエンド実装を担当
4. • Atomic Design
 
 • Container/Presentational パターン
 
 • featuresの採用
 フロントエンドのディレクトリ設計は 色々あると思います

5. • Atomic Design
 
 • Container/Presentational パターン
 
 • featuresの採用
 今回はこちらではなく・・・

6. 設計の軸となる
 ディレクトリの分け方に ついて紹介

7. 去年にNext.js
 0→1の構築を行った
 のでしくじりを発表
 きっかけ

8. しくじり1
 ひとつのファイルにまと めすぎた

9. 例

10. 呼びやすさを優先した場合
 <Table list={list} />
11. 記述量が少なくて使いやすくて

12. • 特定の箇所で文字色を変えたい
 
 • テーブル内にボタンを設置したい
 
 • テーブル内にアイコンを設置したい
 将来のことを考えると・・・

13. 結果、
 コンポーネント側で大 量のif文が発生

14. 結果、こうなりました

15. こんな感じで定義すればマシになりそう
 <table> f <tbody> g <tr> d {list.map((item) => { d // TODO g })} f </tr> f </tbody> f </table> f
16. しくじり2
 ディレクトリを不要に分 けすぎた

17. とあるUtilsディレクトリ
 ├── schema.ts ├── dateFormat.tsx ├── format.ts ├── interface.ts ├── type.ts ├── util.ts └── helper.ts
19. • dataFormatはformatでよさそう
 
 • typeとinterfaceが被っている
 
 • util/util.tsとは？
 
 • utilとhelperが被っている
 色々ツッコミところがありそう

20. 対策としては
 1ファイルにまとめるのが よさそう

21. どちらも問題が発生しても
 リファクタする時に
 修正するいう考え

22. リファクタはいつ？

24. ご清聴ありがとうござ います！