Next.jsの勉強会 vol.1 コンポーネント化

同じHTML構造が2回出てきたら、コンポーネント化のサイン

同じ部分 → コンポーネントにする
違う部分 → props で渡す

##コンポーネント化する

<article>が2つ出てきたので、ServiceCardコンポーネントを作ってみる。

<article className="mt-8 border border-zinc-200 bg-white p-6 shadow-sm">
   <h3 className="text-xl font-semibold">コーポレートサイト制作</h3>
   <p className="mt-4 leading-7 text-zinc-600">
   	会社の強みや問い合わせ導線を整理して、信頼感のあるWebサイトに仕上げます。
   </p>
</article>
 
<article className="mt-8 border border-zinc-200 bg-white p-6 shadow-sm">
   <h3 className="text-xl font-semibold">コーポレートサイト制作</h3>
   <p className="mt-4 leading-7 text-zinc-600">
   	会社の強みや問い合わせ導線を整理して、信頼感のあるWebサイトに仕上げます。
   </p>
</article>

下記のように書き換えて使うようにしたい。

 
<ServiceCard
  title="コーポレートサイト制作"
  description="会社の強みや問い合わせ導線を整理して、信頼感のあるWebサイトに仕上げます。"
/>
 
<ServiceCard
  title="LP制作"
  description="広告やキャンペーンの目的に合わせて、申し込みにつながるページを作ります。"
/>

propsを渡してコンポーネント化する。

function ServiceCard({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  return (
    <article className="mt-8 border border-zinc-200 bg-white p-6 shadow-sm">
      <h3 className="text-xl font-semibold">{title}</h3>
      <p className="mt-4 leading-7 text-zinc-600">{description}</p>
    </article>
  );
}

型に名前をつける

型を抜け出して、名前をつけることができる。

type ServiceCardProps = {
  title: string;
  description: string;
};
 
function ServiceCard({
  title,
  description,
}: ServiceCardProps) {
  return (
    <article className="mt-8 border border-zinc-200 bg-white p-6 shadow-sm">
      <h3 className="text-xl font-semibold">{title}</h3>
      <p className="mt-4 leading-7 text-zinc-600">{description}</p>
    </article>
  );
}

複数のデータを配列にする

下記はservices は ServiceCardProps(型) の配列ですの意味。

const services: ServiceCardProps[] = [
  {
    title: "コーポレートサイト制作",
    description:
      "会社の強みや問い合わせ導線を整理して、信頼感のあるWebサイトに仕上げます。",
    price: "80万円から",
  },
  {
    title: "LP制作",
    description:
      "広告やキャンペーンの目的に合わせて、申し込みにつながるページを作ります。",
    price: "35万円から",
  },
];

複数データからmapでJSX表示

mapを使うと、配列から複数のServiceCardを作ることができる。それぞれのデータを識別するためにkeyが必要。

{services.map((service) => (
  <ServiceCard
	key={service.title}
	title={service.title}
	description={service.description}
	price={service.price}
  />
))}

下記のような省略記法もある。key以外は {...service}としてまとめてpropsに渡すことも可能。

{services.map((service) => (
  <ServiceCard
	key={service.title}
	{...service}
  />
))}