Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは

制作
2020-5-14
更新日: 2023-2-10
ogasawara masami

Webサイトを制作するときに、そのサイトの規模が大きくなればなるほど、効率的にコードを書き、それを運用できる方がいいですよね？
そんなときにおすすめなのが、Nuxt.js（ナクストジェイエス）です。
Nuxt.jsによって、学習が比較的簡単で、SPAやPWAなど最新のWebサイトがすぐに設計できます。
この記事では、Nuxt.jsとはなにか、Nuxt.jsを使うメリット、Nuxt.jsに向いているサイトについて解説していきます。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

1 Nuxt.jsってなに？
- 1.1 SSR（サーバサイドレンダリング）とは
- 1.2 SSR以外にも使える2つのモード
2 Nuxt.jsを導入するメリット6選
3 Nuxt.jsに向いているサイトって？
4 SPAってSEO上不利にならないの？
5 Nuxt.jsを始めるには
6 まとめ

Nuxt.jsってなに？

Nuxt.jsは、2017年以降急速に普及しているVue.js（ビュージェイエス）のフレームワークです。
フレームワークとは、コードが使いやすく「型」になったもののことです。

Vue.jsもJavaScriptのクライアントサイドのフレームワークで、Webサイトをリッチにするためのものです。
つまり、JavaScriptのフレームワークの一つがVue.jsで、そのVue.jsのフレームワークがNuxt.jsという関係になります。

Vue.jsについてはこちらの記事をご覧ください。

Vue.jsとは？jQueryとの違いや使用のメリットを紹介

Nuxt.jsはそのVue.jsをさらに効果的に使うためのもので、Vue.jsの欠点でもあったSSR（サーバサイドレンダリング）を行えるフレームワークです。

SSR（サーバサイドレンダリング）とは

SSR（サーバサイドレンダリング）とは、いったいどういうものなのでしょうか？
SSRとは、本来Webブラウザ上で実行されるJavaScriptをサーバ内部で実行してHTMLを生成する仕組みです。
これによって処理スピードを上げることができ、利便性の向上が期待できます。

SSR以外にも使える2つのモード

またNuxt.jsは、SSRを行うUniversalモード以外にも、Single Page Application（シングルページアプリケーション）で処理するSPAモード、静的なページを生成する
Generateモードがあります。
それぞれを詳しく見ていきましょう。

SPAモード

Single Page Application（シングルページアプリケーション）とは、単一のWebページで構成されたWebサイトのことで、ページ遷移のときにWebブラウザのリロードが必要ないので、滞在時間の長いWebサイトでは有効です。

SPAについてはこちらの記事をご覧ください。

SPA(Single Page Application)ってなに？

SPAのデメリットとしては、最初に全てのページを読み込むので初期ロードが遅いという欠点があります。
SSRでは、サーバ側でHTMLを生成するので、そのようなデメリットはありません。
また、SPAはGooglebotに認識されず、SEO上の懸念があると言われています。
しかしこれは後に解説しますが、現在ではほぼ解消されています。

Generateモード

静的なページのみを生成できるのがGenerateモードです。
訪問者によって表示するコンテンツを切り替える必要のない企業のホームページやブログサイトなどでは、Generateモードが採用されたりします。
Generateモードは、SSRなどに比べて比較的軽量で、WordpressなどのCMSのようにデータベースを必要としないので、運用も簡単というメリットがあります。

CMSに関してはこちらの記事をご覧ください。

CMSとは？導入のメリットから選定ポイントまで詳しく解説！

Nuxt.jsを導入するメリット6選

ここまで、Nuxt.jsの3つのモードについて解説しました。
では、Nuxt.jsを導入するメリットはどのようなものがあるでしょうか？
主なメリットは以下の6つです。

学習コストが低い
3つのモードで柔軟にサイトを設計できる
アプリケーション実装に集中できる
ページのURLの生成が簡単
通信速度が速い
PWAのモジュールが用意されている

学習コストが低い

まずは学習コストが低いということです。
Nuxt.js自体の公式サイトも、Nuxt.jsのもとになっているVue.jsの公式サイトも日本語でドキュメントを読むことができます。
一部日本語訳が追いついていないものや、情報が若干古いものもありますが、基本的には日本語で勉強することができます。
これによって、JavaScriptのフレームワークの中でも学習のハードルが比較的低くなっています。

3つのモードで柔軟にサイトを設計できる

また、上記で説明したUniversalモード、SPAモード、Generateモードの3つのモードで柔軟にサイトを設計できることも魅力的。
SSRを行うUniversalモードは他の2つのモードに比べて学習コストが高いという難点があるので、最初はSPAモードかGenerateモードを採用するのがいいかもしれません。

アプリケーション実装に集中できる

Nuxt.jsでは、ホットリローディング機能というものがあらかじめ備わっていて、開発中のコードが開発中の画面（localhost）に同期されます。
つまり、テキストエディタで編集したコードがすぐ画面に反映されるので、開発をスムーズに行うことができます。

ページのURLの生成が簡単

Vue.jsでは、ルーティングというものを設定して、そこでURLを指定する必要がありました。
しかしNuxt.jsでは、pagesというディレクトリのファイル名がそのままURLとなります。
例えば、pagesのなかにaboutus.vueというファイルを作れば、ドメイン名/aboutusというURLでaboutus.vueに記載した内容が表示されます。
もちろん、ユーザーのidごとに表示内容を変えることも可能です。

通信速度が速い

Nuxt.jsの容量は57KB程度と非常に軽量なフレームワークなので、Nuxt.jsの導入によって動作が遅くなるなど、ユーザー負荷がかかることはありません。
加えて、コードの分割などによって通信速度をより高めることができます。

PWAモジュールが用意されている

さらに、PWAへの対応が簡単なことも大きなメリットの一つです。
PWAとはProgressive Web Appsの略称で、Webブラウザを通して利用するWebアプリケーションであるにもかかわらず、スマートフォンアプリのような機能、例えばプッシュ通知などが実装されているサイトです。

PWAについてはこちらの記事をご覧ください。

スマートフォンアプリの代わりになる！？グーグルが進めるPWA(Progressive Web Apps)とは

Nuxt.jsでは専用のモジュール（特定の機能を持った部品）をインストールすることで、簡単にPWAを実装できます。

ここまでNuxt.jsのメリット6選をご紹介しました。
ではNuxt.jsは、どんなサイトに適しているのでしょうか？

Nuxt.jsに向いているサイトって？

Nuxt.jsに向いているのは、

SSRでページの表示速度を改善したいサイト
SPAやPWAを導入したいとき
ブログサイトなど静的ページを実装する場合

などです。

SSRでページの表示速度を改善したいサイト

ユーザーによって表示する内容を変えるようなメディアサイトなどは、SSRが必要です。
そのような場合において、Nuxt.jsは適しているといえるでしょう。
実際、多くのメディアサイトやSNSサイトなどではNuxt.jsが採用されるケースが目立ちます。

SPAやPWAを導入したいとき

Nuxt.jsではモードを切り替えることで簡単にSPAに対応したページを作ることができます。
さらに、PWAの対応もモジュールをインストールすることですぐに実現することができます。

SPAやPWAについてはこちらの記事をご覧ください。

SPA(Single Page Application)ってなに？

スマートフォンアプリの代わりになる！？グーグルが進めるPWA(Progressive Web Apps)とは

ブログサイトなど静的ページを実装する場合

また、静的ページのみでサイトを制作するときもNuxt.jsはおすすめです。
Nuxt.jsでは、静的なコンテンツをコマンド一つで表示させることができるので、ブログサイトなどでも使われています。
例えば、Nuxt.jsの公式ドキュメントもそのようにして作られています。
さらに、お問い合わせなど一部サーバとの通信が必要な部分に関しては、Node.jsなどによって処理するよう設定することもできます。

Node.jsについてはこちらの記事をご覧ください。

JavaScriptをサーバサイドで動かせる！Node.jsの魅力とは？

SPAってSEO上不利にならないの？

Nuxt.jsの3つのモードのところで解説したように、SPAで制作されたWebサイトはHTMLではなく、JavaScriptでコンテンツを描画しているため、Googlebotに正しく認識されずSEOの観点で問題が生じるのではないかという懸念の声がしばしば聞かれます。
しかし、現在のGooglebotには、Chrome 74相当のレンダリングが搭載されており、最新のJavaScript技術に対応しています。
ですので、SPAで制作されたWebサイトが何らかSEO上で不利になるということは考えられないでしょう。
このアップデートはGoogle I/O 2019にて発表され、アメリカ版Googleウェブマスター向け公式ブログでも告知されています。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

Nuxt.jsを始めるには

ここまで、Nuxt.jsとはなにか、Nuxt.js導入のメリット、向いているサイトについてご紹介しました。
ここからは、Nuxt.jsを始めるにはどうすればいいかを見ていきましょう。

npx create-nuxt-appを使おう

Nuxt.jsを始めるには、ディレクトリを作成し、package.jsonを作成します。
そしてpackage.jsonに設定を記述して、nuxtをインストールします。
…しかしこれはかなり面倒ですよね。
そこで、Nuxt.js公式のコマンドで、npx create-nuxt-appというものが用意されています。
npx create-nuxt-app 好きなプロジェクト名
と入力することで、簡単にNuxt.jsでの開発をスタートできる環境が整います。

必要な設定を追加しよう

npx create-nuxt-app 好きなプロジェクト名と入力すると、

作者名
パッケージマネージャー
UIフレームワーク
サーバーフレームワーク
追加するモジュール
コードのチェックツール
動作テストのフレームワーク
Nuxt.jsのモード

を選ぶよう指示が出ます。
これらはあとからでも編集、追加できます。
この画面ではNuxt.jsのモードSSRを行うUniversalモードか、SPAモードしか選べません。
Generateモードは、後ほどnuxt.config.jsのmodeをgenerateにする必要があります。

components、pages、layoutsを実装しよう

プロジェクトが立ち上がったら、

components
pages
layouts

を編集してみましょう。

components

components配下には、Webサイトの小さな単位を作っていきます。
これらを合わせてpagesで読み込みます。

pages

pages配下のファイル名は、そのままWebサイトのURLとなります。
例えば、pages配下にcontact.vueというファイルを作成すると、ドメイン名/contactというURLが生成され、contact.vueの内容が読み込まれます。

layouts

layoutsは全てのpagesで読み込まれるコンポーネントのことです。
例えば、共通のヘッダーやフッターなどはlayoutsの中に作成したファイルの中に読み込みます。
pagesの方で特に設定しなければ、layouts配下のdefault.vueで設定した内容が反映されます。

まとめ

Nuxt.jsはVue.jsの弱点だったSSR（サーバサイドレンダリング）に対応したVue.jsのフレームワークです。
また、URL生成、SPAやPWAへも対応しており、小規模なサイトから大規模なサイトまで利用できるものです。
この機会にぜひ、Nuxt.jsを学習したり、導入してみてください。
当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。

>>サイトリニューアルをご検討されている方へ｜RFPサンプルを無料配布中

広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

サービス資料はこちら無料相談はこちら