6歳娘「パパ、HTMLタグがセットなら、コンポーネントもセットにしちゃったら？」

※Reactを使っている前提です。
※タグっていうか要素やね。

# リモートワーク中ワイ

ワイ「さてと、今日もお仕事開始や」
ワイ「Webサイトを作っていくで」
ワイ「ほな、デザインデータを見ながらコーディングしていこか」
ワイ「どれどれ」


#### デザインデータ

![スクリーンショット 2022-06-15 7.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/36ec7f81-e386-166f-51e1-d9f64645d3be.png)


ワイ「↑どうやら、この番号付きリストが」
ワイ「色んなページで登場するみたいやな」
ワイ「ほな、使いまわせるように**コンポーネント化**しておこか」

# コンポーネントを作る

ワイ「HTMLのタグとしては」

```html
<ol>
  <li>
    <p>〇〇する。</p>
  </li>
  <li>
    <p>△△する。</p>
  </li>
  <li>
    <p>□□する。</p>
    <p>その際、■■に注意すること。</p>
  </li>
</ol>
```

ワイ「↑こんな感じのマークアップになりそうや」
ワイ「せやから」
ワイ「`ol`タグにデザインを反映させた`OrderedList`コンポーネントと」
ワイ「`li`タグにデザインを反映させた`ListItem`コンポーネント」
ワイ「この2つのコンポーネントを作成していくで」


#### `OrderedList`コンポーネント

```diff_tsx
const OrderedList: React.FC<OrderedListProps> = ({ children }) => {
  return (
    <ol css={orderedListStyle}>
      {children}
    </ol>
  )
}
```

#### `ListItem`コンポーネント

```diff_tsx
const ListItem: React.FC<ListItemProps> = ({ children }) => {
  return (
    <li css={listItemStyle}>
      <div>{children}</div>
    </li>
  )
}
```

ワイ「よっしゃ、2つのコンポーネントができたで」

# ページ側からコンポーネントを呼び出す

ワイ「ほな、ページ側からコンポーネントさんを呼び出して使っていこか」

```diff_tsx:ページ側
  <h1>見出し</h1>
  <OrderedList>
    <ListItem>
      <p>〇〇する。</p>
    </ListItem>
    <ListItem>
      <p>△△する。</p>
    </ListItem>
    <ListItem>
      <p>□□する。</p>
      <p>その際、■■に注意すること。</p>
    </ListItem>
  </OrderedList>
```

ワイ「↑こうやな」
ワイ「ほなブラウザで表示を確認してみよか」

#### ブラウザ表示

![スクリーンショット 2022-06-15 7.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/36ec7f81-e386-166f-51e1-d9f64645d3be.png)

ワイ「↑よっしゃ、デザイン通りや」

娘「パパ、HTMLタグがセットなら、コンポーネントもセットにしちゃったら？」

ワイ「ん、どういうこと？」

娘「`ol`タグの直下には、必ず`li`タグが来るでしょ？」

ワイ「ああ、せやな」
ワイ「`li`タグは、必ず`ol`タグか`ul`タグの直下で使われるルールやからな」

娘「それなら、`OrderedList`コンポーネントの中で」
娘「自動的に`ListItem`コンポーネントも呼び出してくれれば」
娘「ちょっと便利になるかなって」

ワイ「ふーん」
ワイ「そんなことできるんや」

娘「ちょっと、やって見せるね」
娘「ページ側からコンポーネントを呼び出すときに」

```diff_tsx:ページ側
  <OrderedList>
    <p>〇〇する。</p>
    <p>△△する。</p>
    <p>□□する。</p>
    <p>その際、■■に注意すること。</p>
  </OrderedList>
```

娘「↑こんな感じで、`OrderedList`に」
娘「直接`p`要素たちを渡してあげるの」

ワイ「ふむふむ」
ワイ「ちょっとスッキリしたな」

娘「そして、`OrderedList`コンポーネントの中で」
娘「各要素を`ListItem`コンポーネントで包んであげるの」

```diff_tsx
const OrderedList: React.FC<OrderedListProps> = ({ children }) => {
  return (
    <ol css={orderedListStyle}>
      {React.Children.map(children, child => {
        return (
          <ListItem>{child}</ListItem>
        )
      })}
    </ol>
  )
}
```

娘「↑こうだね」

ワイ「へ〜」
ワイ「`React.Children.map()`っていうメソッドを使うことで」
ワイ「`children`一つ一つに対して処理をしてあげられるんやね」

娘「そうなの」

ワイ「なるほど、ちょっと便利やな」
ワイ「でも、なんかブラウザ表示がおかしいで」

#### ブラウザ表示

![スクリーンショット 2022-06-15 8.04.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/833d5232-0f1f-b337-9561-721cb660092a.png)

ワイ「↑3番目の工程が、2つに分かれてもうたで」

娘「あ、ごめん」

```diff_tsx:ページ側
  <OrderedList>
    <p>〇〇する。</p>
    <p>△△する。</p>
    <p>□□する。</p>
    <p>その際、■■に注意すること。</p>
  </OrderedList>
```

娘「↑これだと、工程が4つになっちゃうね」

```diff_tsx:ページ側
  <OrderedList>
    <p>〇〇する。</p>
    <p>△△する。</p>
    <>
      <p>□□する。</p>
      <p>その際、■■に注意すること。</p>
    </>
  </OrderedList>
```

娘「↑これで大丈夫なはず」

#### ブラウザ表示

![スクリーンショット 2022-06-15 7.30.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/36ec7f81-e386-166f-51e1-d9f64645d3be.png)

ワイ「お、ほんまや」
ワイ「`<></>`で囲んであげると、1つの子要素っていう扱いになるんやな」

娘「そうだね」

ワイ「ありがとうやで、娘ちゃん」
ワイ「勉強になったわ」

# まとめ
- `React.Children.map()`がちょっと便利
- 「HTMLの〇〇要素の直下には、必ず□□要素がくる」みたいな時とか
- 他にも、子要素たちを1つずつ包んであげたい場合とか

**〜おしまい〜**

# 新しい記事もよろしくやで！
- [ご年配のお客様「公開鍵とは何ですじゃ？」](https://qiita.com/Yametaro/items/223d4b3c804e05037578)