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
84
初めてのディレクトリ設計 コンポーネント設計の前に考えること
https://metaps.connpass.com/event/302330/
ミカイ
January 22, 2024
Tweet
Share
More Decks by ミカイ
See All by ミカイ
雑談はファンタジーである
junmikai
0
2
未来のキャリアは「ヘアサロン」現象
junmikai
0
2
コメントアウトするべきでは「ない」こと
junmikai
0
5
もくもく会怖くないよ〜
junmikai
0
7
結局ドメインって何ですか?
junmikai
0
41
フリーランス怖くないですか?
junmikai
0
13
課題解決との向き合い方
junmikai
0
19
ドキュメント読めという見解
junmikai
0
4
学習迷子にならないために
junmikai
0
5
Featured
See All Featured
Code Review Best Practice
trishagee
55
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Facilitating Awesome Meetings
lara
42
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Music & Morning Musume
bryan
41
5.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Teambox: Starting and Learning
jrom
128
8.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Web Components: a chance to create the future
zenorocha
305
41k
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
ご清聴ありがとうござ います!