Nuxt.js超初心者がそれなりのサイトを作ってみての感想

シェアする：

更新日時：2020年8月16日

この記事をおすすめしたい人

  • WordPressしか知らないのにNuxt.jsを始めようとしてる人
  • WordPressからNuxt.jsに乗り換えるメリットとデメリットを知りたい人
  • これまでの記事を読んでいて「お前には絶対無理！」と思っていた人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

えー、ほぼ毎日のように記事書いてたんですが、ピタッと止まってました。

別に飽きたわけでもサボってたわけでもなく、

Nuxt.jsでのサイト作りに没頭してました。

いやいや、お前……

ちょっとずつ作っていく過程で学んだことをここで記事にしていくんちゃうかったんかいっ！！

というのは僕が一番言いたいことでして。

でも書けるようになってくると手が止まらなくなってしまってですね。 それなりの形になるまで没頭してしまっていました。

というわけで今回は、「WordPressでしかサイト作ったことなかったような超初心者がNuxt.jsでそれなりのサイトを作った上での感想」をやっていきたいと思います。

改めて紹介しておきますが、僕はNuxt.jsどころかVue.jsどころかNode.jsどころかjQueryどころかJavaScriptもろくすっぽ書けない状態からスタートしています。

WordPressの上でな！

※ このブログはWordPress製ですが、Nuxt.jsに以降予定です

作ったサイトのご紹介

オレ歯科系列姉妹サイトのオレGAME.comです。

トップページではたいしたことしてませんが、いや、JavaScriptでのハンバーガーメニュー展開すら僕にとっては未知の領域でしたが、最初に動的な要素を取り入れたのがFF11のCGIの移植。 そっからアレやコレやと同レベルのページを作り、一番新しいのではクイズ形式みたいなのも自分でゼロから設計して作ることができました。

正直なところ、プロジェクト開始の頃には1年がかりになるかなと思ってたのでちょっと嬉しいです。

サイトのコンセプト

調べていた感じ、Nuxt.jsで人気のサイト設計は次のようなものでした。

  • Nuxt.jsでサイトの雛形を作る
  • 外部のヘッドレスCMS(APIと呼ぶそうです)にアクセスしてコンテンツを取得
  • Nuxt.jsでコンテンツを出力

Nuxt.jsを調べているとよく出てくるNetlifyやらContentfulやらがそれみたいです。

僕が作ったのは次のような感じです。

  • ヘッドレスCMSは使わずVueファイルに直書き
  • データベースはローカルの開発環境のMySQL
  • 静的HTML出力してエックスサーバにアップロード

トレンドのやり方に習うならコンテンツ部分はヘッドレスCMSから取得、データベースはFireBaseあたりだったのかなと思いますが、学習コストが上がるので出来る範囲でやりました。

動的ルーティングでページ数が400とかになっていたので毎回アップロードするのが面倒になり、そこだけ改善しています。 ソースファイルをサーバにアップロードし、サーバ側でビルドするようにしました。 この辺りはエックスサーバでSSRの経験が活きています。

Nuxt.jsサイトを作ってみて一番感動したこと

このサイトで開発テストを行っていた序盤、1ページのみ作っていろいろと動作確認をしていたので全く気が付いてなかったんですが、上のサイトを見てみてください。

ページの移動がめちゃくちゃ速いんですよ！

これはSPA(Single Page Application)という技術らしくて、移動先のページを先読みし、現在のページとの差分だけをリロードする仕様とかそんな感じみたいです。

インストールオプションで「SSR or SPA」みたいな感じでSSRを選んでいたので、SPAにはならないと思っていたんですが、静的出力してもSPAになるみたいですね。 すごい。

データベースがだいぶ重くPageSpeed Insightsの結果はあまりよくないですが、ユーザ体験的にはめちゃめちゃいいと思います。

ページ移動したのが分からないくらい速いです。

正直これのためだけに脱WordPressする価値はあると思いました。

コンテンツ管理に関してはWordPressの方が絶対いい

僕は今回、ヘッドレスCMSは使わずにVueファイルに直書きしているせいもあると思いますが、コンテンツ管理はしやすいとは言えなかったですね。

WordPressのようにUIがあるわけじゃなく、コマンドラインで操作、ソースファイル単位で操作、なせいで、ページのタイトルやdescription、その他もろもろなど、設定し忘れが起きてそうで怖いです。

素人なりになるべく効率的に管理できるようにはしたつもりなんですが、イマイチですね…。

なのでヘッドレスCMS管理が人気なんだろうなと思います。

一部非公開記事、みたいなことがやりにくい

今回のようにVueファイルに直書きでやっていると「下書き状態」の記事がある状態でデプロイできないんじゃないかな。 できるのかな？

除外ページに設定すればできますが、それは気軽に下書きできなくなるのでめんどいです。

ヘッドレスCMSを使っている場合はおそらく大丈夫だと思います。 記事の公開状態を設定できるようにして、公開状態を指定して取得すればいいんだと思うので。

デプロイがめんどくさい

静的出力の場合、たった1文字変更する場合でも、全ページビルドして静的出力。 そしてそれを全部アップロードして初めて更新できます。

正直これは面倒くさすぎます。

数十ページならいいですが、100越えてくるとやってられないでしょう。

静的出力じゃなくてSSRの場合はその限りじゃないので問題ないと思います。

あと、静的出力でも、トレンドな環境でやっている場合はこの辺を自動化できるみたいなので僕ほど面倒な思いはしないと思います。

次作るならWordPress？Nuxt.js？

正直もうWordPressは選択肢に上がらないです。

閲覧時の快適さが比較にならないからです。

もちろん、現状ではまだ(僕にとって)WordPressではできてNuxt.jsではできないことがありますが、そこをどうにかNuxt.js上で解決してでもNuxt.jsで作る価値があると感じています。

その辺でつまったところもここのサイトで紹介していければなと思います。

今後の展開

とりあえずはオレGAME.comを作る過程で学習した過程を紹介していこうと思います。

しょうもない内容ばかりだと思いますが、僕ほど予備知識がない状態からNuxt.js始める人も少ないと思うので、それなりに需要あるかなと。

その後はWordPressとNuxt.jsを連動させるテストとして、このサイトをNuxt化したいですね。

もうだいたいの設計は見えていて、後は手を動かす状態になっています。

脱WordPressしたくてNuxt.jsに興味ある人はここに一番興味があるんじゃないかと思うのでぜひやってみたいと思います。

以上、WordPressからお届けしました！

Nuxtサイトリリース編の目次

シェアする：
Nuxt-サイトリリース編,Nuxt.js,シリーズ第1話