【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！

Nuxt.jsとは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。2017年以降、爆発的に普及しています。今回は、Nuxt.jsのメリットや利用シーンについてお伝えします。

公開日：2019年9月20日

INDEX

Nuxt.jsとは？
Nuxt.jsでできること
Nuxt.jsのメリット【選ばれる理由】
Nuxt.jsを利用すべきなのはどんなサイト？

Nuxt.jsとは？

Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークで、「ナクスト」と読みます。React.jsベースのサーバーサイドレンダリング(以下SSR)用フレームワークであるNext.jsに触発されて作られました。

UIなどフロントエンド向けのフレームワークであるVue.jsに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。

Nuxt.jsは、ホテル予約サイト「一休」や作品配信サイト「note」などにも利用されており、2017年以降、Vue.jsの躍進と共に爆発的に普及しました。

Vue.jsについて知りたい方は、「【Vue.js入門】特徴や他のフレームワークとの比較などを紹介！」で詳しくお伝えしていますので、ぜひご覧ください。

＼文字より動画で学びたいあなたへ／

Udemyで講座を探す＞

Nuxt.jsでできること

では、Nuxt.jsで何ができるのでしょうか？例えば、次のようなことができます。

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

SSR（サーバーサイドレンダリング）とは、「JavaScriptをサーバー内部で実行してHTMLを生成し、クライアントに返す仕組み」です。JavaScriptは本来Webブラウザ上で実行されるものでしたが、サーバー側で実行することにより、処理を早められます。

処理は下図の流れで行われます。

ルーティング

ルーティングとは「クライアントからのリクエスト内容と、サーバー処理を関連付ける動作」です。Nuxt.jsは、ルーティングが簡単に設定できるようになっています。どのように簡単になっているかは後述します。

head要素の管理

metaタグの管理を、JavaScriptのオブジェクトベースで記載できます。設定ファイルに記載してフォーマット化しておけば、全てのページに反映されるため安心です。

拡張性が高い構造

Nuxt.jsではnpmパッケージが利用可能です。すでにリリースされているオープンソースだけでなく、独自にパッケージを開発して運用することもできます。Nuxt.js公式モジュールも複数公開されています。

サーバーサイドレンダリング(SSR)とシングルページアプリケーション(SPA)

ここで、SSRと比較されやすいSPA（シングルページアプリケーション）との関係についてみていきましょう。

SPAは、ページ遷移をすることなく、同一のページ内でコンテンツのみを切り替えるアプリケーションのことです。SPAでは、ユーザーがページに対して行ったクリックなどのアクションに応じて、ページが必要とする分のデータのみをサーバーに要求し、処理します。そうすることで、初期表示より後のサーバーとの通信を最低限に抑えることができます。

現在は一般的に使用されているSPAですが、単体では次のような欠点があります。