Nuxt.jsとWordPress

はいこんにちは。
山キノコロリ Web事業部の山田です。
Webキノコロリとでも呼んでいただければと思います。

さて、このサイトはNuxt.jsとWordPressを組み合わせて作りました。
今回はちょっとその話をしようと思います。

僕はフリーランスで主にフロントエンドのエンジニアをやってるんですが、ほとんどがWordPressでのサイト構築案件です。
差別化を考えてそろそろ別のスキルも学んでみたいと思って目をつけたのが「Nuxt.js」です。

Nuxt.jsとは何か

まず、Nuxt.jsって何よ？って話ですが、
Nuxt.jsは、Vue.jsをベースにしたフレームワークで、モダンなウェブアプリケーションの開発を効率的に行えるもの、とのことです。
サーバーサイドレンダリングや静的サイト生成など、多様なレンダリングオプションを提供しており、SEO対策にも有効。

Nuxt.jsの競合

Nuxt.jsの主な競合には、ReactベースのNext.jsや、AngularベースのUniversalがあるそうです。
これらも、同様にウェブアプリケーションの開発を強化するフレームワークです。

Nuxt.jsの良い点・悪い点

「Nuxt.jsの利点は、Vue.jsの使いやすさと拡張性、そしてサーバーサイドレンダリングによるパフォーマンスの向上」とのことです。
一方、Vue.jsに慣れていない開発者にとっては、学習曲線がやや急であることが短所とされています。
ちなみに僕はVue.jsも初めてだったので、わりとチンプンカンプンでしたが、なんとか形にできました。

WordPressとは何か

次に、ご存じの方がほとんどかと思いますが、一応WordPressについても触れていきます。
WordPressは、世界で最も広く利用されているコンテンツ管理システム（CMS）です。
ユーザーフレンドリーなインターフェイスと、強力なカスタマイズ性が特徴で、多種多様なウェブサイトの構築に活用されています。
エンジニアじゃなくてもある程度使えるし、エンジニアにとってもカスタマイズしまくれる、とても融通のきくCMSという印象です。

ヘッドレスCMSとしてのWordPress

今回はこのWordPressをヘッドレスCMSとして使用しました。
WordPressをヘッドレスCMSとして使用する場合は、従来のフロントエンド表示機能を使わずに、REST APIを通じてコンテンツのみを提供、そのコンテンツをNuxt.jsなどのフロントエンド側から利用するという流れになります。

ヘッドレスCMSの競合

ヘッドレスCMSには、microCMSやContentful、Prismic、Strapiなど、専用に設計されたシステムがあります。
ちなみに日本ではmicroCMSがメジャーなようです。
WordPressは本来フロントエンドも兼ねたCMSなので、その点が大きく異なります。

ヘッドレスCMSとしてのWordPressの良い点・悪い点

その中でなぜWordPressを選んだかというと、一点目は「無料」だから。（microCMSには無料プランもあるが、規模によっては有料プランへのアップグレードが必要になりコストがかかる）
さらに、プラグインがたくさんあることや、メジャーなCMSのため情報が多いことも要因となりました。
しかし、今回のような場合、ヘッドレスCMS専用のCMSに比べると扱いにくいようです。

とりあえず、今回はこんな感じです。
次はもうちょっと突っ込んだ話をしていきたいと思います。

最後まで読んでいただいてありがとうございました！