NuxtJSはVue.jsと同様にバージョン2→3になった際に大幅な変更が加えられました。
使いやすくなった反面、リリース当初は付随するライブラリがバージョン3に追いついておらず、まだ実務で使用するのは難しいと言われていました。
しかし、現在は周辺のライブラリを充実しており、実務でも充分に使いやすい環境が整ってきています。

今回のブログでNuxtJS 3を選定したのも、NuxtJS関連のモジュールが非常に充実してきており、試しに使ってみたかったのが主な理由です。

Nuxtモジュール

NuxtJSにはモジュール機能が備わっており、NuxtJS用に作成されたモジュールを簡単に導入することができます。

モジュールはNuxtJS公式のModulesページにカテゴリ別にまとめられています。

今回のブログ作成の肝となっているNuxt Contentといった機能を追加するモジュールやTailwindCSSやGoogle Fontsといったツールの導入を支援するモジュール、Simple-RobotsやGtagといったサイトの設定を簡単にできるモジュールなどがあります。

2023/08/23現在で150以上のモジュールがあります。
よく使用されるライブラリや汎用的な機能は既にモジュール化されている場合があるので、実装の前に検索しておくのがオススメです。

Nuxt Contentについて

Nuxt Contentは公式ページによると以下のように説明されています。

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.

重要なポイントをまとめると以下のようになります。

Nuxt Contentとは

NuxtJS用のコンテンツ作成のためのモジュール
Markdown/YML/CSV/JSON形式で記載できるCMS
MDC記法によりマークダウン内でVueコンポーネントが使用可能
APIを利用して記事一覧の取得や検索も可能

例えば、この記事のソースコードを確認してみると、マークダウンで記載しているためHTMLタグがありません。

マークダウンで記載した内容はNuxt Contentの機能によりHTMLに変換されます。

また、HTMLタグに変換される際にどのようなHTMLタグやCSSで出力するかは、components/content内のコンポーネントを変更することで自由に修正することができます。

例えば見出し1（# 見出し1）であれば以下のようにカスタマイズしています。

マークダウン形式により記事のライティングのしやすさを維持しつつ、NuxtJSやVue.jsの機能を活用することで柔軟にカスタマイズをすることが可能になっています。

CSSフレームワーク

CSSフレームワークはユーティリティファーストのTailwindCSSを使用しています。

また、TailwindCSSのプラグインとしてdaisyUIを使用しています。

daisyUI

daisyUIはJSに依存しないCSSオンリーのライブラリで、主要なUIコンポーネントをクラスを付けるだけで実装することができます。

例えば、TailwindCSSでボタンを実装するためには以下のようなクラスを付ける必要があります。

daisyUIでは2つのクラスを付けるだけで簡単に実装することができます。

その他のライブラリ

VueUseはVue.js用のユーティリティコレクションです。

iconifyは有名なアイコンセットを横断的に検索して簡単に表示できるライブラリです。
使用できるアイコンは150,000を超えており、どのようなアイコンも全て呼び出せるので便利です。

インフラ

デプロイ先はVercelにしました。

最初はAWS Amplify Hostingにホスティングしていました。

しかし、NuxtJSのオプションでSSRをオフにするとGoogle Search Consoleがsitemap.xmlを認識しないというトラブルが発生しました。
原因を調べてはみたのですが、解決策がはっきりしなかったため、SSRモードで動かせるようにNode環境にデプロイしました。

既に他のプロジェクトでもVercelは使っており、設定の手間がほぼなくデプロイできるのも魅力です。

WordPressと比べたときのNuxtJSでブログを作成するメリット・デメリット

実際にNuxtJSでブログを作成してみて感じた点をまとめていきます。

ブログ作成と言えばまだWordPressを使用することが多いため、特にWordPressと比較したメリット・デメリットを書いていきます。

NuxtJSでブログを作成するメリット

NuxtJSとVue.jsの機能を活用できる

NuxtJSを使用する一番のメリットはやはりNuxtJSやVue.jsの機能を最大限活用できることです。

ページ共通で使用するコンポーネントを作成したい場合、WordPressだけだとあまり複雑なことができません。
一方でVue.jsは、ユーザーインターフェイス構築のためのフレームワークなだけ合って、HTML・CSS・JSが組み合わさったコンポーネントを自由に組み立てることができます。

また、NuxtJSの機能としてはレンダリングモードを柔軟に選ぶことができたり、必要に応じてモジュールを追加することができたり、便利な機能が多く揃っています。

NuxtJS・Vue.jsについて学習する手間はありますが、既に慣れている方であればNuxtJSでブログを作成する際の機能をフル活用することができます。

npmで管理されたライブラリを使用できる

使用しているモジュールの一覧を見ていただいても分かる通り、このブログを作成にするにあたり多くのnpmライブラリを使用しました。

CSSフレームワークは様々なライブラリが存在しており、何を使いたいかは個人によって異なります。
使い慣れているフレームワーク、新規で使ってみたいフレームワーク等、好きなライブラリを気軽に導入できるのは嬉しい点です。

他にも、上記で記載したVueUseやiconifyを使えが、汎用的な機能をやUIを完結に記載できるのも便利です。

VSCodeで記事を作成できる

VSCode

VSCodeには様々な拡張機能があります。

例えば、Code Spell Checkerはスペルチェックをしてくれる拡張機能で、辞書にない単語の場合はアンダーラインを引いてくれます。

他にもmarkdownlintを使えば、「見出しの数字が飛んでいないか？」「不要な改行が入っていないか？」といったマークダウンの文法のミスを見つけやすくできます。

拡張機能によるチェックはプログラミングの際に役に場面が多かったですが、ブログのライティングの際もスペルや文法へ意識を取られることなく記事の内容を考えることに集中できるため、文章を書くときも便利だと感じました。

WordPressもVSCodeで記事を作成することもできます。
しかし、WordPressの元々のエディタはグラフィカルに記事を作成できるというメリットがあるため、わざわざ時間をかけてVSCodeに移行するメリットは少ないと感じました。

マークダウンで記事を書きたい場合はNuxtJS、GUI上で記事を書きたい場合はWordPressが良いです。

NuxtJSでブログを作成するデメリット

デプロイ作業がGitベースになる

Nuxt ContentはFile-based CMSを謳っている通り、ブログ記事はファイルで管理することになります。
よって記事を反映するにはステージング環境用のブランチにコミット→プルリクエストを出して本番環境用のブランチにマージという流れになります。

Gitに慣れている人がライティングする分には問題ないですが、複数人で運用する際にGitを使ったことがない人にGitの使い方を教えるコストがかかります。

一方でWordPressであればブラウザ上でライティングから公開作業まで行えるため、Gitの知識不要で利用することができます。
（Gitを利用せずにWordPressを使用することがいいかという問題もありますが）

後々になってライティングを担当する人が増える可能性がある場合はWordPressで構築しておいた方がいいかもしれません。

ブログ用機能の自作が必要

NuxtJSではnpmを使用することができるものの、ブログに特化した機能はWordPressに比べて弱いと感じました。

例えば、記事内の目次を作成しようとすると「Nuxt ContentのAPIを調べる→目次用のコンポーネントを作成する→コンポーネントの機能やデザインを考える」といった工程が必要となり、実装にかなり時間がかかってしまいました。
一方でWordPressであればTable of Contents Plusのようなプラグインを導入すれば、少しの設定で目次を簡単に実装することができます。

他にもSNS共有ボタン・人気記事ランキング・Sitemapの作成、などブログを運用するために必要な機能は多いのですが、WordPressではプラグインを導入すれば簡単に解決できることが多いです。

NuxtJSでしっかりとしたブログを作成するためには、自前で機能を実装できるための時間と知識が必要だと感じました。

コメント機能

WordPressにはデフォルトで閲覧者がコメントできる機能が備わっています。

WordPressのコメント機能

一方でNuxtJSでコメント機能を実装するには、DB設計・APIの設計・UIの設計等をする必要があり、かなりの労力です。
APIはバックエンドが必要となるため、Nodeが動作する環境でデプロイするか、他の言語で開発する必要があります。

正直、コメント機能が必須なブログを作成するのであればWordPressを選択してしまった方が圧倒的に楽です。

まとめ

今回はNuxtJSでブログを作成してみた際の技術スタックとメリット等をまとめてみました。

NuxtJSでのブログ作成はWordPressでのブログ作成とは、ライティング方法から記事の公開方法まであらゆる点が異なります。

どちらの方法もメリット・デメリットがあるため、どちらの方がうまく運用できるか考えながら選択するのがよさそうです。

この記事をSNSで共有する

オススメ記事

このブログを運営している人

Webシステムエンジニア / DTMer

あっしゅからー

フリーランスでWebシステムエンジニアをやっています。

趣味ではDTMをしていて、オリジナル曲をニコニコ動画やYouTubeに投稿しています。

NuxtJSを使ってブログを作ってみた【Nuxt Content/TailwindCSS/daisyUI】

目次

関連記事

オススメ記事

このブログを運営している人

目次