フロントエンド設計の所感 １年目

Transcript

1. フロントエンド設計の所感 １年⽬ 投稿者：俊希 今井
2. いまいまい 2001 / 23歳 ゆめみ 24卒 フロントエンドエンジニア（チームリーダー） リクルーター‧技育PJ担当
3. 今⽇のお話 フロントエンドでの設計のお話 多分⾔語化しなくてもみんなやってる気がする
4. 分類のための分類に気をつける 分類のための分類とは？ シヺハヺボヺクチテで考えてみる！ これをビルヱテウヱデ設計でもやってみよう 分類のための分類シヺハヺ なんかよく⾒るやつ！ 便利そうだね e t l e t l e t l fi h fi h fi h e e e t r t r t r ォリヺ作りたいな〜 どうやってシヺハヺを回ろう… 野菜に⾁にォリヺラヺに調味料… e t l e t l e t l fi h fi h fi h e e e t r t r t r キセめんどくね！？！ ォリヺのための陳列にしたら助かるよね o t o t o t a o a o a o n n n e e e u y u y o o u y o t r t r t r
5. ケルクヺサュヱ（Co-location） 同様のビゟアラをヅァリキテヨに固めたハソヺヱのこと Package by Featureみたいなもの Toastを作ってみよう 通知とかで右下にヒケヱって出てくるやつ 分類のための分類Toast src/ ├ components/ │ ├ Toast.tsx │ └ (その他いろいろの Component) ├ providers/ │ ├ ToastProvider.tsx │ └ (その他いろいろの Provider) ├ contexts/ │ ├ toastContext.ts │ └ (その他いろいろの Context) └ hooks/ ├ useToast.ts └ (その他いろいろの Hook) 危ないこと いわゆる偶発的凝集 これは関⼼の分散になってしまう（関⼼の分離ではない） 分類のための分類は、再利⽤の強制⼒を持ってしまう！ また、Layered Architecture（技術駆動ハチクヺザヱギ）を⾒よう⾒まねでやろうとするとこうなってしまいがちなので注意 ケルクヺサュヱToast src/ ├ components/ ... 汎⽤的なコンポーネント ├ consts/ ... 中央管理したい定数群 ├ hooks/ ... 汎⽤的なカスタムフック ├ features/ │ ├ users/ ... ユーザー関連の機能 │ └ posts/ ... 投稿関連の機能 └ utils/ ├ auth/ ... ページや操作の許可‧不許可 └ toast/ ... トースト関連 ├ Toast.tsx ├ toastContext.tsx ├ ToastProvider.tsx └ useToast.ts Toastは⼿続き的な呼び出しになることが多いのutilsに置いてるよ 良いこと ケヺデヹデミアヱの両⽅で⽤途を限定することができる ケヱホヺニヱテを⼩さく切っても⾒つかりやすさが損なわれない ちょっと待って！ const/とかhooks/あるじゃん Ɗ これは作っていいの？ Ɗ A. どのFeature / 関⼼にも属さないもの、中央管理したいものは分けていいよ！
6. ⼩さく作りたい時に - 薄く作ることを考える ムザャヺラは⼩さく作りたい ⾏数ヹ複雑度を減らしたい ⽤途を限定させたい ⾒づらさはケルクヺサュヱで解決できる 問題：propsのノクヂヨリヺ useContext！？ちょっと待って！？ useContextはある⽂脈を⼀定領域で共通化する時に使いたい a a a a B t s a B t s a B t s b t > b t > b t > b t > b t > b t > o o o l o l y s y s o o o l o l t e t e o o l y s o o l t e 仕様を満たすためにPropsが雪だるま式に増えていく type PageButtonsProps = { hogeButtonSubmit: boolean; fugaButtonSubmit: boolean; handleHogeButtonSubmit: boolean; handleFugaButtonSubmit: boolean; ...(disabled, state, ...) } あれ？これ俺普段からやってたわ Ž キセヅォLPとかでも意識できるか考えよう！ いつの間にかキセヅォ依存ヨリヺになってしまう！ Compositionで薄くする a a a a B t s a B t s a B t s b t > b t > b t > b t > b t > b t > i l i l i l <PageButtons hogeButton={( <button type="button" onClick={handleHogeButtonSubmit}> textA </button> )} fugaButton={( <button type="button" onClick={handleOK}> OK </button> )} /> children PropsでももちろんOK <PageButtons> <button type="button" onClick={handleHogeButtonSubmit}> textA </button> <button type="button" onClick={handleOK}> OK </button> </PageButtons>
7. Tips: ServerComponentsとComposition e e o e e o e e o e e o e e o e e o l n o l n o l n o e e o e e o e e o e e o e e o e e o l n o l n o l n o <ClientComponent> <ServerComponent /> // <- OK. </ClientComponent> こういう別ディレクティブのものをChildrenにすることを"donut" patternっていうらしい 例えば - ブログ p p p a e a e e e a e e h e h e r r h e r 弱点 Compositionだとprops渡せないよね そういうどうしてもな時にuseContextを使おう p p p o e o e o e r i r r i r r i r o P v e o P v e o P v e o I m o I m o I m o o t n o o t n i i o e o e o o t n i o e "use cache" 実は"use cache"ディレクティブでも同じことができる export default async function Page() { const uncachedData = await getData() return ( <CacheComponent> <DynamicComponent data={uncachedData} /> </CacheComponent> ) } async function CacheComponent({ children }: { children: ReactNode }) { 'use cache' const cachedData = await fetch('/api/cached-data') return ( <div> <PrerenderedComponent data={cachedData} /> {children} </div> ) } a a a a e m a e m a e m y m C p y m C p y m C p r e e d m r e e d m r e e d m t i t i e e n e e n t i e e n P P o e o e P o e S S H e H e S H e
8. おわりやで 近代フロントエンドむずすぎ！