【初心者やりがち】number型でなんでも受け渡すのはやめとけ #React

TailwindCSSを利用する場合かつデザインシステムを構築するときおおよそTokenとしてfontSizeやspacingなどを定義すると思います。

こんな感じ

export const spacing = {
  4: '0.25rem',
  8: '0.5rem;',
  12: '0.75rem;',
  16: '1rem',
}

ただ、せっかく定義したのに型定義でサボると残念なことになります…。

初心者の私がやらかしたミスを皆さんはしないで！を伝える記事となっています！

tailwind.configを利用して型定義する

結論から言うと、せっかく定義したなら利用して型を縛ろうです！

下記のようなコンポーネントがあったとします。
コードの良し悪しは一旦目をつむってください…。

import { FC } from 'react'

type Props = {
  spacing?: number
}

export const Component: FC<Props> = ({ spacing }) => {
   let spacingClass
   switch(spacing) {
     case 4:
       spacingClass = 'mt-1'
       break;
     case 8:
       spacingClass = 'mt-2'
       break;
     case 12:
       spacingClass = 'mt-3'
       break;
     case 16:
       spacingClass = 'mt-4'
       break;
     default:
       spacingClass = ''
   }
　  return <div className={spacingClass}>component</div>
}

この状態だとspacingのpropsは数字であればなんでも受け取ってしまいます…。

コンポーネントを使う人が特定の数字でないとspacingClassが機能しないことを知らないと使えないBadな状態です…

なのでtailwind.configから定義したspacingのkeyを利用して型をつけます！

import { FC } from 'react'
+ import { spacing } from '../tailwind.config'

+ type Spacing = keyof typeof spacing

type Props = {
-  spacing?: number
+  spacing?: Spacing
}

export const Component: FC<Props> = ({ spacing }) => {
   let spacingClass
   switch(spacing) {
     case 4:
       spacingClass = 'mt-1'
       break;
     case 8:
       spacingClass = 'mt-2'
       break;
     case 12:
       spacingClass = 'mt-3'
       break;
     case 16:
       spacingClass = 'mt-4'
       break;
     default:
       spacingClass = ''
   }
　  return <div className={spacingClass}>component</div>
}

上記のようにすることで呼び出し時に型の推論が効くので利用者がスタイルが当たらない！ってことにはならないと思います！

下記のようにリテラル型で定義することも可能です。

type Props = {
  number: 4 | 8 | 12 | 16
}

やりたいことは実現されますが、急に出てきた4や8などはマジックナンバーと捉えられなくもありません…

なので定義したものを利用することで「なんの数字か？」の説明にもなるためimportしたものを利用するがの良いかと思います！

【number型でなんでも受け渡すのはやめとけ】まとめ

numberやstringなどを単純に指定するだけだと型を縛れているようで実はそうではないことを知りました。

TaiwindCSSであれば自分で定義したものも使えますが、Tailwindが用意してくれたspacingのkeyを利用することも可能です！

より良いコンポーネントを作成できることを願っております！