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

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

自己紹介  • 三海純(ミカイジュン) • 現在フリーランスエンジニア ◦ Next.jsの設計とバックエンド実装 • 趣味
◦ アニメ(BanG Dream!・ぼざろ等) ◦ ネット麻雀(雀魂)

キャリア  • 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の設計とバックエンド実装を担当

• Atomic Design    • Container/Presentational パターン    • featuresの採用 
フロントエンドのディレクトリ設計は色々あると思います 

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

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

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

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

例 

呼びやすさを優先した場合  <Table list={list} />

記述量が少なくて使いやすくて 

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

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

結果、こうなりました 

こんな感じで定義すればマシになりそう  <table> f <tbody> g <tr> d {list.map((item) => {
d // TODO g })} f </tr> f </tbody> f </table> f

しくじり2  ディレクトリを不要に分けすぎた 

とあるUtilsディレクトリ  ├── schema.ts ├── dateFormat.tsx ├── format.ts ├── interface.ts ├──
type.ts ├── util.ts └── helper.ts

• dataFormatはformatでよさそう    • typeとinterfaceが被っている    • util/util.tsとは？    •
utilとhelperが被っている  色々ツッコミところがありそう 

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

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

リファクタはいつ？ 

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

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

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

ミカイ

More Decks by ミカイ

Featured

Transcript