🫢

【Nuxt】microCMSを使ったCMS開発を試してみた

2023/03/21に公開

Nuxt

はじめに

WordPressを用いたCMS開発は実務でやっていましたが、よく言われる脆弱性や速度の遅さは気になっていました。一方で、ヘッドレスCMSであればフロントエンドとAPIの理解があれば簡単にCMSとして活用できるので良いなぁと思い、microCMSを試してみることにしました。本記事では、Nuxt.jsとmicroCMSを連携させるチュートリアルに取り組んだ感想と注意点を紹介します。

目的としては

ヘッドレスCMS触ってみたい
APIの理解深める
自身のポートフォリオ的なサイト作る
といったことからやってみることにしました。

具体的にはこちらのチュートリアルを参考に進めました。具体的な手順はこちらを参照してください。

気づき

ヘッドレスCMSを使ってみて

microCMSの特徴

microCMSは、APIエンドポイントなどがわかりやすく、手軽にCMSを作成することができました。公式ドキュメントに従って簡単なブログサイトを作成してみましたが、ヘッドレスCMSの良さを体感できたと思います。

まず、microCMSの強みはAPIエンドポイントのわかりやすさであると感じました。microCMSのWebサイト上でエンドポイントを確認し、そのURLを使ってコンテンツを取得することができます。また、リクエストに対して返ってくるレスポンスもJSON形式で返ってくるので、フロントエンド開発者にとっても扱いやすいと思います。
また、microCMSのエディター機能も使いやすかったですね。ドラッグ＆ドロップでコンテンツを作成したり、複数のコンテンツをまとめて編集したりすることができます。コンテンツの追加や編集も直感的で、簡単に行うことができました。シンプルな投稿であれば大抵は対応できそうです。

WordPressとの比較

フロントエンドとバックエンドの分離

まず、ヘッドレスCMSとWordPressの大きな違いは、フロントエンドとバックエンドの分離です。ヘッドレスCMSではフロントエンドを自由にカスタマイズでき、バックエンドはAPIで提供されるため、APIを使って外部のアプリケーションやシステムと連携しやすくなります。一方、WordPressはオールインワン型のCMSであり、フロントエンドとバックエンドが密結合しています💦

この違いにより、ヘッドレスCMSはフロントエンド開発者が自由度の高いUI/UXを実現できます（きっと）。WordPressだとテーマファイルの構成やPHPの仕様によって制限があることもあるのでフロントが自由なのはかなり便利だなぁと感じました。一方、WordPressは、プラグインなどを使って簡単にウェブサイトを構築できるため、初心者でも扱いやすいです。テーマを使えば初心者でもすぐブログが作成できるのはWordPressの良いところですね。

また、ヘッドレスCMSはAPIを使用することが前提であり、コンテンツ配信に強みを持ちます。一方、WordPressは、コンテンツ管理とウェブサイト構築に特化したCMSであるため、両方の機能をバランスよく持っている点が特徴的です。実際WordPressはプラグインなどを使って簡単に会員制にしたり、様々な機能を追加することができます。

セキュリティや運用コスト

さらに、セキュリティ面での違いもあります。WordPressは、大量のプラグインやテーマが存在するため、脆弱性のリスクがあります。WordPressを運用したことがある方はわかるかもしれませんが、本体とプラグインのバージョン管理がかなりのペースであるので脆弱性と運用コストで板挟みになるのがあるあるです😭
一方、ヘッドレスCMSはAPIを使用するため、攻撃のリスクを最小限に抑えることができます。（たぶん）

以上のように、ヘッドレスCMSとWordPressにはそれぞれの特徴があることを体感できました。どちらが優れているということはありませんが、結局は用途に合わせて選択することが重要ですね。

詳しくは公式でも触れられている通りです。
https://blog.microcms.io/vs-wordpress/

公式ドキュメントが怪しい

今回のチュートリアルでもそうですが、タイポがあったり、ページによって異なる記載があるので何箇所か詰まりました...

例えば以下URLのところ...

誤：layout/default.vue→正：layouts/default.vue
Nuxtに慣れてればすぐ気づくかもですが、慣れてないと動かずにハマりそうです💦

一番詰まった、というか動かずに困ったのがmicroCMSのNuxt.js用モジュールが動かなかったこと。
以下ポイントを確認したんですが動きませんでした😭

APIのレスポンス（Curlでは返ってきてる）
nuxt.config.jsの設定
Nuxtやモジュール自体のバージョン

具体的には$microcmsがundefinedでどうしようもなかった感じです笑
結局、Nuxt用のモジュールじゃなくjsのSDKからわざわざ引っ張ることに...

`nuxt-microcms-module`を使わずに`microcms-js-sdk`でAPI取得するコード

async asyncData ({ env }) {
    const client = createClient({
      //.envファイルの環境変数から読み込み
      serviceDomain: env.SERVICE_DOMAIN,
      apiKey: env.API_KEY
    })

    try {
      const [Res] = await Promise.all([
        client.get({ endpoint: 'endpoint-name' })
      ])
      return {
        works: Res.contents
      }
    } catch (error) {
      console.error(error)
      return { works: [] }
    }
  }

自分のやり方が悪いかもですし、めんどくさい！笑
ちゃんと公式のモジュール使える方法をどなたか教えてください...

まとめ

今回は、ヘッドレスCMSであるmicroCMSを使ってみた感想について共有しました。簡単にCMSを作成できることが魅力的ですが、複雑な要件に対応する場合には、まだ課題が残されているように感じました。今後もヘッドレスCMSの動向に注目し、適切なタイミングで活用していきたいです！
（チュートリアルで作成したサイトもデザインちゃんとして公開していきます😅）