JAMStack作成の軌跡Part4

## はじめに

- [前回](https://qiita.com/krkettle57/items/f224b47ae4050249808b)でTailwindCSSの導入を行った
- 今まではサイトの目的が曖昧だったが、今回は下記を行いテックブログ としての体裁を整えていく
  - Contentfulとの連携
  - ブログコンポーネント の作成
  - TailwindCSS Typographyの導入
  - 動的ページの作成
- 完成形は[こちら](https://github.com/krkettle57/gatsby-sample/tree/blog-part4.1)

## Contentfulとの連携

- [Contentful](https://www.contentful.com/)はヘッドレスCMSの一種であり、コンテンツを表示するフロント部分は持たない(ヘッドレスの由来)
- コンテンツの作成やモデル管理はContentfulのWebコンソース上から行うことが可能で、コンテンツはAPI経由で取得できるためJAMStackの要素として利用されることが多い模様
- 具体的な連携手順は[Gatsby入門](https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c/viewer/e560eaef8705d8f4a3bc)を参照
- 作成したモデルは以下の通り

![contentful-model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2046285/aba2fd2a-368c-5242-b473-c33e65640c51.png)



## ブログコンポーネント の作成

- 色やフォントはそれほど拘らず最小限の配色だけ決めた
- いきなりソースコードを書こうとしても全体像がわからないため、ワイヤーフレームだけ書くことにした

### 配色の決定

- 色やフォントはこだわるほどのセンスはないため決め手となる色だけ決めた
  - 色はtailwindcssにデフォルトで用意されている色を選択した
  - 参考: [color-palette-reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)
- 色のカスタマイズも出来るがデフォルトカラーは濃淡も用意されているため使い勝手が良かった
  - 参考: [customizing-colors](https://tailwindcss.com/docs/customizing-colors)
  - (base1, base2はいい名前が思いつかなかった)

| 項目                     | 色            |
| ------------------------ | ------------- |
| テーマカラー(primay)     | teal[400]     |
| アクセントカラー(accent) | rose[400]     |
| 文字色(base1)            | blueGray[800] |
| 背景色(base2)            | coolGray[100] |

### ワイヤーフレームの作成

- 手軽に作成できるGoogleスライドを利用して作成した

- 各ページの構成

  ![page-layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2046285/87285d3c-b6c2-6030-fbdd-8cb78d8d0533.png)


- トップページのコンポーネント 

  ![toppage-component.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2046285/d609abd5-94ba-a79b-6123-40c1652b2a06.png)

## TailwindCSS Typographyの導入

- 今回はContentful経由で取得したHTMLをそのまま表示するため、取得したHTMLのタグごとにtailwindcssを適用するのが面倒
- そのためプラグインの[tailwindcss-typography](https://github.com/tailwindlabs/tailwindcss-typography)を用いることで、プラグインを指定したブロックない全てのタグにスタイリングを適用する

```tsx
const Layout: React.VFC<LayoutProps> = ({ children }) => {
  const data = useStaticQuery<GatsbyTypes.LayoutQuery>(graphql`
    query Layout {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <Header siteTitle={data?.site?.siteMetadata?.title || "Title"} />
      <div className="container mx-auto px-16 py-8 max-w-screen-lg prose bg-white"> #
        <main>{children}</main>
      </div>
      <Footer />
    </>
  );
};

```

- この例ではLayoutコンポーネント化のh1タグやpタグにスタイリングが適用される

### Typographyのカスタマイズ

- tailwind.config.jsでカスタマイズが可能
- h2タグを下図のようにカスタマイズしたかったのでいくつかのタグで設定した

![h2tag.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2046285/01d45c53-8203-d693-19a6-20dcec94963e.png)


```js
typography: {
  DEFAULT: {
    css: {
      img: {
        margin: "0",
      },
      h1: {
        padding: "0.25rem 0rem",
        margin: "0.25rem 0rem",
        fontWeight: "600",
      },
      h2: {
        padding: "0.25rem 0.5rem",
        color: colors.blueGray["800"],
        background: "transparent",
        borderLeft: `solid 8px ${colors.teal[400]}`,
      },
      p: {
        margin: "0.25rem 0rem",
      },
      a: {
        textDecoration: "none",
      },
    },
  },
},
```

- 気になる点としては「Typographyを適用したブロックでは、**Typographyのスタイリングを上書きすることが出来ない**」ということ
  - 例えばpタグの`margin`はtailwind.config.jsで`0.25rem 0rem`と指定しているが、これをpタグ内で`className=m-0`としても`0.25rem 0rem`のまま替わらない
  - これは[公式のIssues](https://github.com/tailwindlabs/tailwindcss-typography/issues/32)でもどうにかならない？と言われている(執筆時はOpen)

## 動的ページの作成

- 動的ページの作成に関しても[Gatsby入門の記事](https://zenn.dev/tomokiya/books/4b13342f6d878b93e06c/viewer/df93cae957a4f3503a75)を参考にさせていただいた
- また、以下の記事を参考にgatsby-node.jsのTypeScript化を試みたが、Contentfulからデータが取得出来なかったり型が正しく定義出来なかったりとつまづく点が多かったため、今回は断念し今後の課題とした。
  - [GatsbyJS + TypeScript でゼロから作るサーバーレスブログ](https://blog.livewing.net/create-gatsby-blog)
  - [Gatsby.jsのTypeScript化 2020](https://zenn.dev/ryo_kawamata/articles/gatsby-ts-2020)

## 残っている課題

- これで最低限ブログとしての体裁を保つまでにはなった。
- 一方で以下のような課題が残っている
  - ブログとして
     - ブログのタグ付与
     - アイキャッチ画像の表示
  - 開発環境として
     - gatsby-node.jsのTypeScript化
     - ブログのデプロイ
     - componentsの分割(Atomic Designなど)
- 今後はこのような課題にも挑戦していきたい