WordPressとNuxtどっちが良いか？

前回こちらの記事を書きました。

エンジニアとして複業(副業)でWebサイト制作をする場合に現状多く使われているのがWordPressだと思います。
WordPressは学習コストが低く、これからエンジニアを目指す方でも比較的習得しやすいという理由もあり、
多くの企業でWordPressを使ったWebサイト開発が導入されています。

しかしフロントエンドの技術の進歩により
今後Webサイト開発がWordPressからモダンな技術を採用した開発に変わっていく可能性があると思っています。

そこで今回はWordPressを使った開発とNuxt.jsを使った開発にフォーカスして簡単なWebサイトを作る場合のそれぞれのメリデメを比較してみようと思います。

なぜNuxt.jsか？

モダンなフロントエンドの技術の代表としてReact,Vue.js(Nuxt.js),Angularあたりがありますが
個人的にはその中でもVue.jsが1番学習コストが低く、Vue.jsをやるならNuxt.jsを使った開発が比較的習得しやすいと思っているので今後より普及していく可能性があると思っています。
(ここは色々な意見があると思うのであくまで個人的な意見です)
3つの比較については以下まとめているサイト等もあるので興味ある方はご参考にしてください。

また自分自身は複業(副業)としてWordPressでサイト制作をした事もありますし、当サイトもNuxt.js使って作っておりますので
その経験からそれぞれのメリデメをまとめたいと思います。

WordPress

メリット

学習コストが低い

WordPressはエンジニアでなくても比較的学習をはじめやすく、習得しやすいのが大きなメリットだと思っています。
学習すれば簡単なWebサイトであればある程度開発できてしまうので、そこから複業(副業)等でエンジニアとしての仕事をすることは十分可能です。

色々な機能を実装しやすい

WordPressは昔からある技術で世界的にも使われているので
デザイン面、機能面で幅広い実装が可能です。
テーマも無料から有料まで非常に多くありますし、
予約機能だったり EC機能などもプラグインを使って開発できるので
多様なニーズに応じた開発ができます。

デメリット

初期コストがかかる

正直デメリットというほどではりませんが、あとで比較するNuxt.jsを使った場合と比べるとお金がかかってしまう所は相対的にデメリットであると思います。
コストというのは具体的にはサーバ代のことで、WordPress自体はOSSで無料なのでコストはかかりませんが、それを動かすサーバは自前で用意する必要があるため、そこの初期コストはどうしてもかかってしまいます。
とはいえ今の時代レンタルサーバを借りるくらいなら月数百円程度で借りられるのでそこまで大きなデメリットではないかもしれません。

運用が大変

ここでいう運用は主に以下2点です

• サーバの運用
• WordPressの運用(アップデートなど)

レンタルサーバを借りる場合はサーバの運用や必要に応じてスケールさせたり等が必要になってきます。小規模なサイトであればあまり意識することはないかもしれませんが、少なからずその辺を考えるのは多少の煩わしさがあります。
またWordPressの運用も意外とめんどくさく、WordPress自体のアップデートやプラグインのアップデートなど、頻繁に発生するのでその都度対応するのは結構大変です。
かといってアップデートを放置するとセキュリティ的なリスクが伴ったりパフォーマンスが悪化したりする原因にもなるので放置するのもおすすめはできません。
このデメリットは正直WordPressを使う場合に結構よくある部分だと思います。

処理速度、表示速度が遅くなりがち

WordPressはインストールすると数百のファイルが入っており、
WordPressの中身をのぞいてみるとわかりますが
初期のデフォルトのページを表示するだけでもかなり多くのファイルが読み込まれています。
そのせいもあって、サーバサイド側の処理とクライアント側の処理も含めて処理速度、表示速度は遅くなりがちです。
またプラグインを入れれば入れるほど速度はさらに遅くなるのでそこも慎重になる必要があります。
最近ではWordPressのテーマで表示速度を意識したテーマとかもありますが、そういったテーマは非常に限定的なのでなかなか選択しずらかったりします。

開発/本番デプロイがやりにくい

WordPressの開発をする場合はローカルでWordPressが動かせる環境を作り、そこで本番デプロイは必要なファイルをレンタルサーバにアップする、といったやり方が多いのかなと思っています。
(自分の場合はそうやってました。)
それで問題ないと感じる人もいるとは思いますが個人的には非常にやりづらいと思います。
特に一度リリースされたサービスを修正する場合などは本番環境とローカルの環境でデータの差分も発生しやすいですし、そうすると本番と開発環境を同期するのも意外とめんどうだったりします。
また本番へのデプロイも手動でやる場合が多くそこは開発する場合としては非常にやりにくいと感じる場面が多いです。

Nuxt.js

メリット

表示速度が早い

1番大きいメリットの1つはこれかなと思っていますが、特にWordPressで開発した場合と比べると表示速度は圧倒的に早くすることができます。
特にNuxt.jsを使って静的なサイトであればかなり高速なサイトを作成できます。
Nuxt.jsを使うとnuxt generateコマンドで静的ファイルの作成ができ、それとホスティングサービスを掛け合わせることで高速なサイトが作成できます。
またNuxt.jsを使った静的ファイルであればSPA(Single Page Application)サイトで懸念されるSEO対策も可能です。
表示速度が早いのはユーザー的にもメリットがありますし、高速なサイトはSEOの順位も上位になりやすいので非常にメリットが大きいです。

サーバレスで運用が可能

静的ファイルであればNuxt.jsと他のホスティングサービスを掛け合わせることで自前でサーバを用意することなく本番にサイトを公開することができます。
当サイトはホスティングサービスにNetlifyを使っていますが
デプロイも簡単で、自前でサーバを用意する必要もないため非常に高速に本番にリリースすることができます。
サーバを自分で用意する必要がないため、サーバ自体の運用やメンテナンス等も一切不要なので非常に気軽です。

初期コストゼロでスタートできる

先ほどのサーバレスの構成と関連していますが、
WordPressでサーバを用意する場合と違ってサーバ代もかからないのは大きなメリットです。
なのでこう言ったサーバレスの構成もモダンな開発環境の1つなので今後もっと普及していくと思います。
Netlify以外の他のホスティングサービスであるGitHub PagesやFirebase Hostingなどもそうですが、
基本的には一定のリクエスト数までであれば無料の範囲内で対応可能で、特に小規模の開発であれば全く問題ないレベルだと思います。
必要に応じて有料プランにもできるためミニマムでスタートして、その後スケールできる点も大きなメリットです。

開発/本番デプロイがやりやすい

こちらもサーバレスでホスティングサービスと連動する場合ですが、本番デプロイはgitへのコミットで完了する場合がほとんどです。なので本番のデプロイはWordPressよりも簡単にすることができる場合が多いです。
開発環境も特にMacでローカルで非常に簡単に動かせますし、
もちろんWindowsの場合はDockerを使った開発とかもでもありだと思うので、
そう言った環境で開発環境を準備しやすい、開発しやすいというもメリットかなと思います。

デメリット

WordPressに比べると学習コストはかかる

学習コストに関してはWordPressと比較した場合はある程度高くなってしまいます。なのでこれからエンジニアを目指している方であればちょっと最初は難しかもしれません。ただ冒頭お話したモダンなフロントエンドの技術であるReact,Vue.js(Nuxt.js),Angularの3つの中であればVue.js(Nuxt.js)が1番学習しやすいと思うので
WordPressを学習した次のステップとして学んで見るのはありだと思います。

デザイン面で苦労する

デザインスキルが低い場合ですが、デザインは基本的には全てフルスクラッチで作る必要があるため苦労する場合が多いと思います。
WordPressであればテーマが非常に多いのでテーマを選択して多少カスタマイズすればデザインスキルが低いエンジニアでもある程度のものが作れると思いますが、Nuxt.jsの場合はそう言ったテーマのようなものが少ないのがデメリットだと思います。
自分自身もデザインスキルが低いので、当サイトをNuxt.jsを使って開発した際に1番時間がかかって苦労したのがデザイン面です。
とはいえNuxt.jsでもVuetifyやBulma,BootstrapなどのUIフレーム枠などはあるので完全にゼロベースで作る必要もないですが、それでもある程度のUIのサイトを作る場合は工夫が必要だと思います。

リリース後のサイト更新の運用がエンジニア依存になりやすい

WordPressであれば例えばちょっとした文言修正や、記事の投稿などは管理画面を使って割と簡単にできるので、一度エンジニアが開発すれば後の運用は非エンジニアの方にも任せやすいです。
一方でNuxt.jsを使った場合はサイトの更新や記事の更新を完全に非エンジニアに任せるには少しハードルが高い印象です。
例えば文言修正であってもNuxt.jsが使える環境がないと厳しいですし、それを非エンジニアに求めるのもなかなか厳しいです。
また当サイトのように例えばContentfulを使って記事投稿機能を使った場合ですが、ContentfulはWordPressのような管理画面も持っているため投稿などは非エンジニアにお任せすることもできなくはないですが、Contentfulが全て英語になっているため少しハードルは高めかなと思います。

高機能な実装をしようとするとハードルが上がる

当サイトのように基本は静的サイトで、機能として記事投稿機能があればよいくらいのものであれば比較的スピーディーに実装ができますが、そこから踏み込んで例えば予約機能だったりEC機能だったりを実装するとなるとハードルは結構上がる印象です。
静的サイトであればサーバレスの構成にしやすいですが、
予約機能やEC機能等のデータを扱う場合はバックエンドの構成をどうするかから検討する必要がありWordPressを使う場合に比べてより高度な知識が必要になると思います。

まとめ

WordPressとNuxt.jsのメリデメを簡単にまとめます。

-	メリット	デメリット
WordPress	・学習コストが低い ・色々な機能を実装しやすい	・初期コストがかかる ・運用が大変 ・処理速度、表示速度が遅くなりがち ・開発環境、本番デプロイがやりにくい
Nuxt.js	・表示速度が早い ・サーバレスで運用が可能 ・初期コストゼロでスタートできる ・開発/本番デプロイがやりやすい	・WordPressに比べると学習コストはかかる ・デザイン面で苦労する ・リリース後のサイト更新の運用がエンジニア依存になりやすい ・高機能な実装をしようとするとハードルが上がる

Nuxt.jsを使う大きなメリットとしてはWordPressと比べた時に表示速度を早くしやすいという部分が大きなと思います。
静的サイトのような簡単なものであれば表示速度の観点でWordPressで作るよりも圧倒的にNuxt.jsを使った方がいいかなというのが個人的な印象です。
とはいえ、まだまだWordPressもメリットはあるのですぐになくなるような技術でもないとは思いますが、
今後複業で簡単なWebサイト開発をする場合はNuxt.jsも検討してみるといいかもしれません。