まったく同じスタイルのButtonコンポーネントとLinkコンポーネントをつくりたい！

ある日のできごと

Figma「今日はこんな感じのコンポーネント作ってね」

Figma「ただし、戻るボタンはaタグで、次へボタンはbuttonタグで作ってね」
こみい「ふむ」

「まずButtonコンポーネントをつくって」

src/components/Button.tsx

import React from "react"

type Props = React.ComponentProps<"button">

export const Button = ({ children, ...props }: Props) => {
  return <button {...props} className="inline-block border-2 border-black py-2 px-4">{children}</button>
}

「同じ要領でLinkButtonコンポーネントをつくる」

src/components/LinkButton.tsx

import React from "react"
import Link from "next/link"

type Props = {
  href: string
} & React.AnchorHTMLAttributes<HTMLAnchorElement>

export const LinkButton = ({ href, children, ...props }: Props) => {
  return <Link href={href} {...props} className="inline-block border-2 border-black py-2 px-4">{children}</Link>
}

「そしてページコンポーネントで呼び出す！」

src/pages/index.tsx

import { Button } from "@/src/components/Button"
import { LinkButton } from "@/src/components/LinkButton"

export default function Home() {
  return (
    <div>
      <Button>アクション！</Button>
      <LinkButton href="#">リンク！</LinkButton>
    </div>
  )
}

こみい「できました」
Figma「いいね」

数時間後

Figma「ちょっとデザイン変更してこんな感じで強めにお願い」
こみい「（なんか微妙だけど）わかりました」

「まずButtonコンポーネントをなおして」

src/components/Button.tsx

import React from "react"

type Props = React.ComponentProps<"button">

export const Button = ({ children, ...props }: Props) => {
+  return <button {...props} className="inline-block rounded-full bg-black text-white border-2 border-black py-2 px-4">{children}</button>
-  return <button {...props} className="inline-block border-2 border-black py-2 px-4">{children}</button>
}

「同じ要領でLinkButtonコンポーネントも修正」

src/components/LinkButton.tsx

import React from "react"
import Link from "next/link"

type Props = {
  href: string
} & React.AnchorHTMLAttributes<HTMLAnchorElement>

export const LinkButton = ({ href, children, ...props }: Props) => {
+  return <Link href={href} {...props} className="inline-block rounded-full bg-black text-white border-2 border-black py-2 px-4">{children}</Link>
-  return <Link href={href} {...props} className="inline-block border-2 border-black py-2 px-4">{children}</Link>
}

こみい「できました」
Figma「いいね」

さらに数時間後

Figma「やっぱりさっきの強すぎたからこんな感じで」
こみい「」

毎回2箇所修正するの微妙だな？

こみい「スタイル用のコンポーネントをつくってスタイルはそっちで管理するってのはどうだろ？」

「まずはスタイル管理用のコンポーネントをつくって」

src/components/ButtonStyle.tsx

import React from "react"

type Props = {
  children: React.ReactNode
}

export const ButtonStyle = ({ children }: Props) => {
  return <span className="underline">{children}</span>
}

「buttonタグの中にdivタグは入れられないのでspanタグで囲む」

「あとは各コンポーネント内で呼び出す」

src/components/Button.tsx

import React from "react"
+ import { ButtonStyle } from "./ButtonStyle"

type Props = React.ComponentProps<"button">

export const Button = ({ children, ...props }: Props) => {
+  return (
    <button {...props}>
      <ButtonStyle>{children}</ButtonStyle>
    </button>
  )
-  return <button {...props} className="inline-block rounded-full bg-black text-white border-2 border-black py-2 px-4">{children}</button>
}

src/components/LinkButton.tsx

import React from "react"
import Link from "next/link"
+ import { ButtonStyle } from "./ButtonStyle"

type Props = {
  href: string
} & React.AnchorHTMLAttributes<HTMLAnchorElement>

export const LinkButton = ({ href, children, ...props }: Props) => {
+  return (
    <Link href={href} {...props} className="inline-block">
      <ButtonStyle>{children}</ButtonStyle>
    </Link>
  )
-  return <Link href={href} {...props} className="inline-block rounded-full bg-black text-white border-2 border-black py-2 px-4">{children}</Link>
}

こみい「できた！これで修正が入っても変更するのは1箇所で大丈夫そう」

数日後

Figma「やっぱり、ボタンとリンクは別のデザインのほうがわかりやすいからこんな感じに変更で！」

こみい「」

まとめ

• Tailwind CSSを使う場合は、スタイルのみのコンポーネントをつくるという案もある
• その場合のディレクトリ構成はどうするのがいいのかは考え中
• 「こんな案もあるよー！」っていうのあったら教えてください！