Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初めてのディレクトリ設計 コンポーネント設計の前に考えること
Search
ミカイ
January 22, 2024
0
150
初めてのディレクトリ設計 コンポーネント設計の前に考えること
https://metaps.connpass.com/event/302330/
ミカイ
January 22, 2024
Tweet
Share
More Decks by ミカイ
See All by ミカイ
今からフロントエンドを0から勉強するならSvelteもありかも
junmikai
0
36
tsoaはいいぞ!APIドキュメントを自動生成!
junmikai
0
22
生成AI活用はHOWが大事な理由
junmikai
0
120
2025年の抱負: フリーランスから 正社員に戻るので 組織に貢献します!
junmikai
0
77
Chakra UI v3にバージョンアップしてほぼ別物になった件
junmikai
0
490
LTのテーマ決めは「多数派」を意識しよう ~ LT年40回登壇した件~
junmikai
0
5
成長するには「重要 VS 緊急」を意識しよう
junmikai
0
10
LTのテーマ決めは「多数派」を意識しよう ~ LT年40回登壇した件~
junmikai
0
16
目標は「めいそう」が大事。漢字はどう書く?
junmikai
2
30
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Agile that works and the tools we love
rasmusluckow
329
21k
Building an army of robots
kneath
306
45k
A better future with KSS
kneath
238
17k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Fireside Chat
paigeccino
37
3.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
184
16k
Documentation Writing (for coders)
carmenintech
72
4.9k
Transcript
初めてのディレクトリ設 計 コンポーネント設計の前に考えること 三海 純
自己紹介 • 三海純(ミカイ ジュン) • 現在フリーランスエンジニア ◦ 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
None
• dataFormatはformatでよさそう • typeとinterfaceが被っている • util/util.tsとは? •
utilとhelperが被っている 色々ツッコミところがありそう
対策としては 1ファイルにまとめるのが よさそう
どちらも問題が発生しても リファクタする時に 修正するいう考え
リファクタはいつ?
None
ご清聴ありがとうござ います!