Nuxt.jsとは
Nuxt.js は Vue.js をベースとした JavaScript のフレームワークで、読み方は「ナクストジェイエス」です。Vue.js 自体が JavaScript の View (HTMLファイル) のフレームワークですが、Nuxt.js はその Vue.js ファイルを使ってURLのルーティングや API 処理をはじめとするアプリケーション開発に欠かせない機能の実装を想定したアプリケーションフレームワークです。
Vue.js は基本的にクライアントサイドのアプリケーション開発を目的とするフレームワークであるため、サーバサイドでレンダリングを行うサーバサイドレンダリング (以下、SSR) に対応していないという課題がありました。そこで、それを補う形で開発されたのが Nuxt.js で、あらかじめ SSR のアプリケーション開発に必要な設定がセットされているのが特徴です。
ほかのフレームワークとの違い
Vue.jsとの違い
| Nuxt.js | Vue.js | |
| 利用用途 | アプリケーションフレームワーク | Viewフレームワーク |
| SSR機能 | ○ | × |
| 部分導入 | × | ○ |
Nuxt.js のベースになっている Vue.js は、JavaScript の View ライブラリです。Nuxt.js は SSR機能を有していますが、Vue.js はクライアント側でレンダリングするSPA (Single Page Application) で、SSR機能を持たないため、アプリケーション開発をする際には Express などのサーバライブラリを手動で導入する必要があります。
そのほかにも、Vue.js では手動で設定しなくてはならないルーティングを Nuxt.js ではディレクトリにファイルを追加するだけで自動的に設定できる、アプリケーション全体の状態を管理できるストアを有している、といった違いがあります。
Next.jsとの違い
Nuxt.js と似た名前の Next.js というフレームワークがあります。そちらも SSR を可能にする JavaScriptフレームワークです。Nuxt.js はもともと React.js ベースの SSR用フレームワークである Next.js に感化されて開発されました。
両者は React で構築されたアプリをレンダリングする場合に Next.js を用いるのに対し、Next.js を使い、Vue.js で構築されたアプリをレンダリングする場合は Nuxt.js を使うという組み合わせの関係にあります。
Nuxt.jsでできること
フロントエンドのアプリケーション開発に用いられる Nuxt.js の機能はたくさんありますが、主なものを解説します。
SSR
SSR とは、本来 Web ブラウザ上で実行される JavaScript をサーバ内部で実行しれ HTML を生成し、クライアントに返す仕組みです。JavaScript はクライアントサイドで行われるものでしたが、サーバサイドで実行することで、高速な処理が可能になります。これにより、SEO が大幅に改善され、UX の向上につながります。
ルーティング
ルーティングとは、クライアントから受けたリクエスト内容とサーバでの処理を関連させる動作のことで、Nuxtjs ではファイルを保存するだけでそのファイル名に対応するルーティングを自動で簡単に設定できるようになっており、ファイルの更新も必要ありません。
head要素の管理
meta タグの管理を JavaScript のオブジェクトベースで記入できるので設定ファイルでフォーマット化しておけば、全てのページに反映されます。
拡張性が高い構造
Nuxt.js では npm パッケージも利用できるため、すでにリリースされているオープンソースのものだけでなく、独自のパッケージを開発して運用することも可能です。Nuxt.js は公式のモジュールも複数公開されています。
ストア
Nuxt.js はアプリケーション全体で1つのストアという状態管理のコンポーネントを有しているため、ページの遷移やユーザの入力によって画面に表示される内容が変わる場合でもアプリケーションの状態を保持することができます。
SSR以外にも使える2つのモード
SPAモード
SPA は、ページ遷移をせずに同じページ内でコンテンツを切り替えるアプリケーションを指します。SPA は、ユーザが行ったアクションに対して、必要な分だけデータをサーバに要求して処理を行います。これにより初期表示後のサーバとの通信を最小限に抑えることができます。ページ遷移の際にブラウザのリロードを必要としないため、滞在時間の長い Webページには有効ですが初期表示の読み込みが遅いという欠点があります。
ここで、SSR と比較されることの多い SPA (シングルページアプリケーション) との関係について解説します。
現在は広く使用されている SPA ですが、SPA 単体では SEO に悪影響が出る可能性があります。ビューのレンダリング前にフレームワークとアプリケーションコードを読み込む必要があるため、初期表示の遅いサイトの場合は SPA を完全にレンダリングできないためSEOに悪影響が出る可能性があるのです。一方、SSR ではサーバサイドでHTMLを生成するので SPA の「初期表示が遅い」という欠点も解消でき、SEO への影響も抑えられます。SSR の実装には多少の手間がかかりますが、試す価値はあるでしょう。
Generateモード
Nuxt.js には、SSR を行う Universalモードと前項で紹介したSPAで処理する SPAモードのほかに静的なページを生成する Generateモードもあります。
Generateモードは静的なページのみを生成でき、SSR に比べて軽量で運用も簡単です。
誰がそのページを訪れても同じコンテンツを表示する企業のホームページやブログサイトなどによく使われます。
3つのデプロイ方法を選択可能
| 名称 | モード | 学習コスト |
| Universal | SSR | 高い |
| SPA | SPA | 非常に低い |
| Generate | SPA | 低い |
Nuxt.jsのメリット
学習コストが低い
Nuxt.js は Vue.js を学習した人ならすぐ始められるでしょう。また、日本語ドキュメントが充実してといる点でも Nuxt.js の導入難易度は低いです。
静的サイトを作れる
Nuxt.js の SSGモードを利用すれば単一コマンドで簡単に HTML ファイルを生成できるため、静的サイトを簡単に構築できます。
アプリケーション実装に集中できる環境
Nuxt.js には、テキストエディタで編集したコードが自動的に画面に反映されるので、開発をスムーズに行うことができ、実装に集中しやすいです。
通信速度が速い
Nuxt.js の容量は約 57KBと非常に軽量であるため、Nuxt.js の導入で動作が遅くなるといったユーザに負荷がかかることはありません。
また、コードの分割などによって通信速度をさらに高めることもできます。
PWAへの対応が簡単
PWA (Progressive Web Apps) とは、Webブラウザで利用する Webアプリケーションのことで、スマホアプリのような高い操作性が特徴です。
Nuxt.js には公式で PWA モジュールが用意されているので、PWA 対応ができ、スマートフォンやパソコンにインストールして使うアプリのように動作する Web ページを作成できます。
Nuxt.jsのデメリット
Nuxt.jsの記法に依存してしまう
Nuxt.js の記述ルールに従って実装する必要があるため、勉強しなくてはありません。一通り覚えるには骨が折れる作業でしょう。
Nuxt.jsのプロダクト開発状況に依存してしまう
Nuxt.js が対応していないといった場合は使用できません。アプリケーション開発者は使用しているライブラリのアップデートは常に気にしておかなければいけません。
Nuxt.jsに向いているサイト
SSRでページの表示速度を改善したいサイト
ユーザごとに表示内容を変えるWebページには、SSR を使う必要があります。
その場合に Nuxt.js が適しています。
ブログサイトなど静的なページ
静的ページのみで構成された Webページにも向いています。
Nuxt.js では、静的なコンテンツを単一のコマンドで表示させることができます。
Nuxt.js の公式ドキュメントもその一つです。
