【自作ブログ #5】Component分割 - スマレジエンジニアyushiのブログ

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回は、Component分割を行います。

Component分割とは

Reactのチュートリアルには下記のような記述があります。

React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。

ja.legacy.reactjs.org

この文章やチュートリアルの内容から分かるように、Reactではコンポーネント単位に分割しながら実装を進めていきます。

記事詳細画面のComponent分割

今回は、記事詳細ページから、記事内容の部分をコンポーネントとして切り出してみます。

(ArticleComponent.tsx)

import dayjs from '@/lib/dayjs'

type Props = {
  content: string
  date: dayjs.Dayjs
  title: string
}

const ArticleContent = ({ content, title, date }: Props) => {
  return (
    <article>
      <small>{date.format('YYYY-MM-DD')}</small>
      <h1>{title}</h1>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </article>
  )
}

export default ArticleContent

記事の内容やメタ情報（タイトルや作成日）は、親コンポーネントから渡すようにします。
本コーポネントはあくまで表示を司るようにするためです。

これを記事画面に埋め込みます。

([slug].tsx)

     <>
-      <small>{dayjs(date).format('YYYY-MM-DD')}</small>
-      <h1>{title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: content }} />
+      <ArticleContent content={content} date={dayjs(date)} title={title} />
     </>
  )