Nuxt.jsを使ってサイトを作成してみた感想と感じたメリット

誰かが「Vue.jsでSPAを作るならNuxt.js使った方がいい。便利すぎてもう戻れない」ってツイートしてたんですが、使ってみて納得しました。

Udemyの講座で学習した範囲ですが、めちゃくちゃ楽でした。

Vue-CLIを使用して色々やっていたのが一気にショートカットされていて、スピーディに開発するなら確かに便利。

ただ、個人的な感想としては、使用するならVue.jsの基本的なお作法を覚えて、Vue-CLIを使用してからの方がいいかと。

あまりに便利なので、細かい仕組みも分からずに何となく扱えてしまいそうです。

今回は学習のためだったので、趣味のサイトを作成してみました。

Nuxt.js×microCMS×Netlifyを使用した、憧れのJAMStackです（笑）

ただ本で学習していた時は全然意味わかりませんでしたが、とりあえず手を動かしながら詰まったところを解決していったらできていた感じです。

間違っているところも足りないところも多々あると思いますが、ひとまず触ってみて気になった箇所をメモ。

使用プラグインや静的ファイル、ビルド時などの細かい設定を一元化

Nuxt.jsに限ったことではないけど、nuxt.config.jsに使用プラグインや静的ファイル、ビルド時などの細かい設定を一元化できるので管理がとてもしやすい。

ただ今までのheadタグ内に気軽に書き込んでいた外部ファイルのcdnだったり、cssやjsの設定もいちいちnuxt.config.jsで書かないといけないのが面倒っちゃ面倒。

でも、これも慣れの問題っぽい。お作法さえ覚えればこちらの方が良さげ。

ルーティング、コンポーネントを自動で読み込みしてくれる。

Vue-CLIではルーティング書いて、コンポーネント作って登録させないといけないのが面倒くさかったんですが、Nuxt.jsでは必要なモジュールがデフォルトでインストールされているので自動で読み込みしてくれます。めちゃくちゃ楽。

Nuxt.jsは「pages」配下にvueファイルを置くだけで勝手にrouterを設定してくれるし、コンポーネントも「Components」配下にvueファイル置くだけでインポートせずに自由に呼び出し可能。

例えば、「pages」配下に「hoge.vue」を置くと、簡単に 「/hoge.html」が表示できる

コンポーネントに関しては、Nuxt.jsのv2.8以降の仕様っぽいので注意は必要ですが、それでもめちゃくちゃ便利。

asyncDataメソッドが便利。

axiosでAPIを使用した際にCORSエラーで使用できなかったものがあって、色々と記事読んで試してみたのだけど全然解消されず3日くらい溶かしてしまった。

けど、Nuxt.jsで用意されているasyncDataメソッドでは問題なくデータの取得ができました。（あの3日はマジ何だったんだ…）どうやらよしなにやってくれるっぽい。

ただ子コンポーネントでは使えないので、その際は親コンポーネントでAPI呼び出して取得してpropsでコンポーネントにデータを渡す必要があるっぽい。

詰まったところ

バージョンによってコンポーネントを自動で読み込んでくれない

上でも書きましたが、コンポーネントの自動読み込みに関してはNuxt.jsのv2.8以降の仕様らしいので、それ以前のバージョンではページで使用するコンポーネントをインポートする、もしくはモジュールをインストールする必要があります。

学習用のサンプルファイルが単元ごとにバージョン違っていたので、気づかず結構詰まりました。

Nuxt.jsに限ったことではないですが、各バージョンごとの使える機能については注意が必要です。

Vue.jsでwindowオブジェクトのリサイズイベントを実行する

createdなどで実行すると、windowオブジェクトがundefinedとなってしまいます。ですので、リサイズイベントの実行はmounted以降にするように気をつけます。

ビルドしたファイルが表示されず無限グルグルする

npm run generateで書き出したファイルが動かないじゃんってなったけど、ライブサーバー立ち上げてアクセスしたら問題なく表示されました。

ここらへんは要調査。

SPA、SSR、SSGの違いと理解

今回学習するまではVue.jsなどで作るものは全部SPAと思っていたんですが（笑）実はそれぞれ SPA、SSR、SSGと違いがあることを知りました。

各タイプの違いをざっくりとしか把握できてないけど、大まかな流れを掴むことが出来たので良かったです。

参考記事まとめ