目次
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サイトってどんなものがありますか？
- STUDIO ( https://studio.design/ja )
- note ( https://note.mu/ )
- 一休.comのレストランのスマートフォン検索ページ ( https://jp.vuejs.org/index.html )
こんなサイトがNuxt.jsを導入しています。STUDIOはページ遷移が気持ちよく、SSRによるSEO対策もバッチリですね。noteはフロントエンドをAngular.jsからNuxt.jsに移行したことが有名で、こちらにも記事があります。
いいですね！
Nuxt.jsを覚えたくなってきました。おすすめの勉強方法はありますか？
JavaScriptを何も知らない状態でNuxt.jsに入門することはおすすめしません。時間はかかりますが以下の手順で覚えていくのがおすすめです。
- JavaScriptの基礎を学ぶ
- Vue.jsを学ぶ
- 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を学ぶことができます。
