JavaScript

Nuxt.jsとは?Nuxt.jsを採用する前に知っておきたいこと

Vue.jsについて調べていたら、Nuxt.jsに出会いました。Nuxt.jsって何ですか?

Nuxt.jsはVue.jsをベースとしたフレームワークです。

Vue.js自体がJavaScriptのフレームワークだと思いますが、Nuxt.jsはそのVue.jsのフレームワークってことですか?

そのとおりです。Nuxt.jsはVue.jsの課題であったサーバーサイドレンダリング(以下、SSR)をフレームワーク化したものです。※正確にはモードを切り替えることで、SSRではなく、従来のシングルページアプリケーション(以下、SPA)としてデプロイすることも可能です。

SSRとは

Vue.jsの場合、ブラウザでDOMを生成しますが、そうではなく、サーバ上で生成したHTMLをクライアントに返す仕組みをサーバーサイドレンダリングといいます。

SSRの何がいいの?ブラウザでDOMを生成すればいいと思うのですが……

人間にとっては「ブラウザで生成されたDOM」と「サーバーでレンダリングされたDOM」は同じような画面に見えます。しかし、コンピューターにとってはそうではありません。ブラウザでソースコードを表示するとよくわかります。

以下、ブラウザの「ページのソースを表示」で表示したソースコードです。上の画面も下の画面も元は同じソースコードですが、上はNuxt.jsのspaモードでコンパイルした画面で、下はNuxt.jsのuniversalモードでコンパイルした画面です。

▼Nuxt.jsのspaモードでコンパイルした画面

▼Nuxt.jsのuniversalモードでコンパイルした画面

なるほど……、具体的にSSRによって得られるメリットって何ですか?

  • 検索エンジンのクローラが完全に描画されたページを直接解析するため、SEO が向上する
  • SPAはJavaScriptのダウンロード〜DOM生成を待つ必要がありますが、SSRの場合は描画されたページをレスポンスするため素早く表示することができる

つまり、SPAの弱点であったSEOや初回アクセス時の表示速度が、SSRによって改善されます。

Nuxt.jsって良さそうですね。

そうですね。しかし、SSRは従来のSPAと比較して「学習コストの増加」「運用コストの増加」を考慮する必要があります。

なるほど……、なんだか大変そう。私の場合は、Nuxt.jsを使って静的なSPAのWebサイトを作りたかったのですが、そういう要件にはNuxt.jsは向いてなさそうですね。

そんなことはありません。Nuxt.jsはモードを切り替えることで下記表のとおり3つのデプロイ方法を選択することができます。(下記表はNuxt.jsビギナーズガイドから抜粋させていただきました)

名称 モード 学習コスト 運用コスト
Universal SSR 高い 高い
Generate SPA 低い 低い
SPA SPA 非常に低い 低い

要件が、静的なSPAのWebサイトということですので、その場合はGenerateモードが最適です。SPAの特徴の一つであるスムーズなページ遷移を実装しつつ、SEOも考慮したWebサイトが作れます。

おおっ!Nuxt.jsに興味が湧いてきました!

Nuxt.jsで実装されたWebサイトってどんなものがありますか?

こんなサイトがNuxt.jsを導入しています。STUDIOはページ遷移が気持ちよく、SSRによるSEO対策もバッチリですね。noteはフロントエンドをAngular.jsからNuxt.jsに移行したことが有名で、こちらにも記事があります。

いいですね!

Nuxt.jsを覚えたくなってきました。おすすめの勉強方法はありますか?

JavaScriptを何も知らない状態でNuxt.jsに入門することはおすすめしません。時間はかかりますが以下の手順で覚えていくのがおすすめです。

  1. JavaScriptの基礎を学ぶ
  2. Vue.jsを学ぶ
  3. Nuxt.jsを学ぶ

理由としては、①②の前提知識がないとNuxt.jsを理解することが難しいからです。基礎は大事ですね。ポジティブに捉えると①②の知識がしっかりしていればNuxt.jsを覚えるのはそこまで大変ではないと思います。大変なこともありますが、諦めずにコツコツやっていきましょう(・ω・)v

さいごに、上記①②③を学ぶのに最適な書籍をご紹介します。

①JavaScriptの基礎を学ぶならこちら

確かな力が身につくJavaScript「超」入門」で大まかにJavaScriptについて知って、「JavaScript本格入門改訂新版」で細部を学習していく方法がおすすめです。

Vue.jsを学ぶならこちら

基礎から学ぶVue.js」とVue.js公式サイトだけでもかなり力がつくと思いますが、「Vue.js入門」も詳細に分かりやすく解説してくれているのでおすすめです。

Nuxt.jsを学ぶならこちら

2019/7/20時点ではNuxt.jsに特化した日本語書籍は「Nuxt.jsビギナーズガイド」のみです。書籍後半ではブログを作りながらNuxt.jsを学ぶことができます。

筆者
筆者
いかがでしたでしょうか。Nuxt.jsの疑問が少しでも解消されたなら幸いです。今後はNuxt.jsの記事も公開していきたいと思っていますので、ひきつづきよろしくお願いいたします。