【React/Next.js】「propsはコンポーネントの設計書」とは？propsの渡し方

今日は現場の相互レビューで指摘された「propsはコンポーネントの設計書」という言葉について調べて、propsの渡し方について考えていこうと思う。

実際に指摘を受けたコード

index.tsx

type Pict = {
export type PictCardProps = {
  pictNo?: string
  filename?: string
}

const picts: Pict[] = [
 {
  pictNo: 1,
  filename: "test1.png",
 },
 {
  pictNo: 2,
  filename: "test2.png",
 },
 {
  pictNo: 3,
  filename: "test3.png",
 },

{picts.map((pict) => (
  <PictCard
    pictNo={pict.pictNo}
    filename={pict.filename}
  />
))}

上記のコードはPictCardコンポーネントにpropsを渡している。
渡すpropsの型は　string｜unedefined なので
これを受け取ろうとすると

PictCard.tsx

type PictCardProps = {
  pictNo?: string
  filename?: string
}

export const PictCard = ({
  pictNo,
  filename,
}: PictCardProps) => {

  return (
      <div>
        <div>
          <div>
            <Image
              id={pictNo ?? ""}
              src={filename ?? ""}
              alt={pictNo ?? ""}
            />
          </div>
          <div>
            <h3>{filename }</h3>
            <p>pictcardです</p>
          </div>
        </div>
      </div>

上記のようにstring｜unedefinedをそのまま受け取り、受け取り側で使う場合
毎回　hogehoge ?? "" をつけることになる。

propsは渡す側で整えておく

今回指摘された内容は要するにpropsは渡す側で整えておくということだろう。
確かに受け取り側で使うたびにundefinedの場合を演算子で書くのはかなり不便な気もする。
受け取り先でもオプショナルで処理が変わる場合は別だけど。

では具体的にさっきのコードをどう書けばいいかっていうと

index.tsx

type Pict = {
export type PictCardProps = {
  pictNo?: string
  filename?: string
}

const picts: Pict[] = [
 {
  pictNo: 1,
  filename: "test1.png",
 },
 {
  pictNo: 2,
  filename: "test2.png",
 },
 {
  pictNo: 3,
  filename: "test3.png",
 },

{picts.map((pict) => (
  <PictCard
    // ここですでにundefinedの場合の渡す内容を書いておく
    pictNo={pict.pictNo　?? ""}
    filename={pict.filename ?? ""}
  />
))}

PictCard.tsx

type PictCardProps = {
　// undefinedの場合の内容は定義してあるのでオプショナルを消す
  pictNo: string
  filename: string
}

export const PictCard = ({
  pictNo,
  filename,
}: PictCardProps) => {

  return (
      <div>
        <div>
          <div>
            <Image
              //　そのまま使える
              pictNo={pictNo}
              src={filename}
              alt={pictNo}
            />
          </div>
          <div>
            <h3>{filename }</h3>
            <p>pictcardです</p>
          </div>
        </div>
      </div>

こう書くことでコードの可読性も上がる。
コンポーネントの受け取りPropsの型を見ることで、
このコンポーネントでは文字列だけで使われているのか、undefinedの場合に他の処理を返すようにしているのか等一目瞭然ということから
「propsはコンポーネントの設計書」という記事があったのだろう。

あとがき

フロントエンドエンジニアとして現場に配属されて３ヶ月。
こういう指摘がある時に、個人開発が全然役に立たないことを実感する。
チーム開発である以上、コードの可読性はとても重要だし可読性を考えて実装するのは未経験ではなかなか出来ないことなので
未経験は門前払いされるのかな、と思ったり。
SESあるあるの「経験３年」という肩書きを背負っているので、こういう時にボロが出るし
きっと「３年でこれってなかなかポンコツ」と思われているに違いない。笑
それでも未経験の自分を拾ってくれた自社には感謝しかないけれど。

この記事が新人さんや未経験の目に止まって、初心者脱却の１つになれば幸いです😭