Gatsbyで制作したブログのCMSをmicroCMSからContentfulへ変更した

結論

Gatsbyで制作した個人ブログのHeadlessCMSをmicroCMSからContentfulへ変更した。
Markdown → HTMLの変換部分が判断の基準になっている。

なんのことか

個人ブログを作成したことの報告記事を以前書いた。
その時点ではmicroCMSだったが、実装上の不都合からcontentfulへ変更を検討し始めた。

そもそもmicroCMSを選んだ理由

• HeadlessCMSの経験は、Strapiというセルフホスティング型のものしかなかった
• Contentfulも当初選択肢にあったが、microCMSを勧める記事も一定数あった
• 国産サービスで日本語情報・日本語サポートが充実している
• Gatsbyでブログを制作する際のデファクトスタンダードであるgatsby-transformer-remarkを使わなくても、Marked.jsを使えばMarkdown → HTMLの変換は実装できた

Contentfulに変更したいと思った理由

• Gatsbyでブログを制作する際のデファクトスタンダードであるgatsby-transformer-remarkがContentfulには対応しているが、microCMSには対応していない
  • gatsby-transformer-remarkとgatsby-source-contentfulを組み合わせるとGraphQLでbody（Markdownの本文）を取得する際、子要素にchildMarkdownRemarkが追加され、そのさらに子要素でhtmlが取得できる
    • 取得したhtmlはMarkdownから自動的にHTMLに変換されたもの
  • microCMSだと出来ない
  • gatsby-transformer-remarkと併用できると、gatsby-transformer-remarkに対応した多くの拡張プラグインを利用することが出来る
    • Marked.jsだと完全に自力で実装する必要がある
• Contentfulもイケてる雰囲気あるし使ってみたい

参考：GraphQLでの取得方法の違い

microCMS & gatsby-transformer-remark（microCMS単独と同じ）

{
  microcmsArticle {
    body # Markdownがそのまま取得できる
  }
}

Contentful & gatsby-transformer-remark

{
  contentfulArticle {
    body {
      body # Markdownがそのまま取得できる
      childMarkdownRemark {
        html # MarkdownがHTMLに変換された状態で取得できる
      }
    }
  }
}

変更してみた結果

実装観点で思ったこと

• やはりgatsby-transformer-remarkおよび関連プラグインを使えるのは影響が大きい
• gatsby-transformer-remarkだとプラグインを追加は楽だけど、Markdownから変換される際のHTMLを細かくカスタマイズするのはMarked.jsとそんなにコスト変わらなそう
  • rehypeReactを使うとかなり柔軟にカスタマイズできるようなので、gatsby-transformer-remarkにするなら併用することになる
• rehypeReactで再実装しても良かったけど、今の所そこまでコストやメリット変わらなそうなので、様子見でも良さそうだと思った
  • CMSはContentfulに変えたけど本来の目的であるgatsby-transformer-remarkには変えなかったので、目的見失ってる感もある
  • 目的通りに考えると、microCMSのままでも何も問題なかった…
  • 今後gatsby-transformer-remark & rehypeReactに比較的容易に乗り換えれるという状態に出来たのは普通に価値があったと思うので、やった意味はあったはず

CMS観点で思ったこと

• 日本語には対応していないけど、ContentfulのCMSとしての精錬度がめっちゃ高いことが分かった
  • UIがわかりやすくキレイ
  • 入力系の機能、導線がめっちゃ使いやすい
    • オートセーブ
    • ファイルアップロード方法が多様
    • 記事を入力しながら参照している別コンテンツ（カテゴリやタグなど）を新規追加して反映できる
      • microCMSも出来るけど…
        • 先に保存しとかないと入力中の記事消えちゃう
        • UIや導線が微妙に使いにくい
• 純粋に出来ることが多い
• 全体的にモダンでええ感じや…

まとめ

だいぶ紆余曲折したけど、Contentfulに乗り換えて良かった。
ただmicroCMSも用途が合えば全然有り。
gatsby-transformer-remarkはrehypeReactを使いたくなるか、使いたい関連プラグインが見つかれば乗り換えるかもなーという感じ。