Upgrade to Pro — share decks privately, control downloads, hide ads and more …

背伸びしないコンポーネントの始め方

yuki
October 03, 2023

 背伸びしないコンポーネントの始め方

yuki

October 03, 2023
Tweet

More Decks by yuki

Other Decks in Technology

Transcript

  1. 自己紹介 Yuki Matsumoto @yuneco i 株式会社ICSのフロントエンドエンジニh i お絵描きしたりちょっとしたゲーム作った# i お仕事ではVueとかReactとかも書きます

    株式会社ICSってどんな会社? i 演出やインタラクションの得意なWeb制作の会社でi i TypeScript + Vue / Reactでアプリ寄りの開発もやりまi i で技術記事書いてます https://ics.media/
  2. Web制作寄りのコンポーネントあるある Web制作ではデザインカンプが設計の拠り所 ①まず、画面ごとにページコンポーネントを作る TopPage / AboutPage / ContactPage ... Card

    / Modal / Button / Header ... ※ 静的な比率の高いWebサイトの場合コンポーネント設計よりも
 CSS設計が中心になりますが、今回CSSの話は割愛します ②末端のパーツから共通コンポーネントを見つける
  3. Atomic Designは夢の設計手法か? D Atomic Designはこの混沌に秩序を与えてくれそうな「気がする# D 現実はそんなに甘くない propsが20個ある 神atom 結局中間が難しい

    「これはMかOか?」みたいな辛い議論 https://atomicdesign.bradfrost.com/chapter-2/ 分割・整理されないまま
 肥大化するページ
  4. ÇÅ 大きすぎない & 誰でもわかる・数えられる。コストも手間もかからな0 & 長いコードは大体誰でも読みたくないし、触りたくない & Reactなら1ファイル100行くらいまで。150超えてきたら危s & Vueの場合は構造上もう少し(+2,3割)大きめになる傾X

    & コンポーネントにはテンプレート(JSX, <template>)やスタイルも含めY & コンポーネント内の関数ひとつひとつも20行くらいまでにしたい 行数は絶対ではないが、目安としてはとても優秀 目安は?
  5. 2. 名前でやっていることがわかる )' 一つのことだけうまくやる … Area, Layout, View → 本当にエリアやレイアウトだけ`

    … Manager, Controller → 実際これ何やってるの` … (Fooコンポーネントに対する)useFooフック → ロジック部分切り出しただけ? 抽象度の高い「ふんわりワード」が出てきたら疑う 入出力(引数・props・戻り値)が増えてきたら疑う 正しい名前にリネームできないならコンポーネントに機能を足してはいけない