Nuxt.js（ナクスト・ジェイエス）は、JavaScriptのフレームワーク「Vue.js」をベースとして開発されたJavaScriptフレームワークで、Vue.jsよりも使い勝手がよくなっています。
フロントエンド開発にはすでにVue.jsやReactが重宝されていますが、最近はNuxt.jsを使うケースも増えています。そんな中で、わざわざNuxt.jsを使う意味があるのかと疑問に思う人もいると思います。
そこで、本記事はNuxt.jsがどのようなフレームなのか、その特長や利用するメリットを知りたいという人に向けてほかのフレームワークとの違いや関係性なども踏まえて解説します。また、Vue.jsを効果的に使えるのかについても併せて紹介するので今後の参考にしてください。
Nuxt.jsとは？
Vue.jsよりアプリ開発がしやすいNuxt.js
Nuxt.js（ナクストジェイエス）は Vue.js をベースとした JavaScript のフレームワークです。Webアプリ開発におけるフロントエンドとバックエンドどちらも構築できます。Vue.js 自体が JavaScript の View (HTMLファイル) のフレームワークですが、Nuxt.js はその Vue.js ファイルを使ってURLのルーティングや API 処理をはじめとするアプリケーション開発に欠かせない機能の実装を想定した仕様になっており、より開発がしやすくなっています。
Vue.jsでは不可能だったサーバサイドレンダリングができる
Vue.js は基本的にクライアントサイドのアプリケーション開発を目的とするフレームワークであるため、サーバサイドでレンダリングを行うサーバサイドレンダリング (以下、SSR) に対応していないという課題がありました。そこで、それを補う形で開発されたのが Nuxt.js で、あらかじめ SSR のアプリケーション開発に必要な設定がセットされているのが特徴です。
軽量高速な動作を武器にさまざまなサービスに採用され始めている
「note」や東京都の「新型コロナ保健医療情報ポータル」の開発に採用され、特に後者のような行政機関のサービスに使われたことでも話題となりました。実際、上記のサイトにアクセスすると、その軽量高速な動作を感じられるでしょう。
新バージョンの登場
2022年11月16日にNuxt.jsの新たなバージョンである「Nuxt3」がリリースされました。Nuxt3はVue3やTypeScriptにも対応するなど、より使いやすくなっています。TypeScriptが標準サポートになったことで名称も「.js」が取れて「Nuxt」となりました。
2023年12月31日でVue 2のサポートが終了するため移行する必要があります。Nuxt2のプロジェクトにNuxt3の機能を追加するということもでき、その場合にはNuxt2と互換性がある「Nuxt Bridge」を利用します。
ほかのフレームワークとの違い・関係性
ここからはNuxt.jsのベースとなっているVue.jsとの関係性や名前の似ているNext.jsとの違いについて説明します。
Vue.jsとの違い
| Nuxt.js | Vue.js | |
| 利用用途 | アプリケーションフレームワーク | Viewフレームワーク |
| SSR機能 | ○ | × |
| 部分導入 | × | ○ |
Nuxt.js のベースになっている Vue.js は、数あるJavaScriptのなかでも特にWebアプリなどのUI構築を得意とする JavaScript フレームワークです。Nuxt.js は SSR機能を有しており、単体でアプリケーションを開発できますが、Vue.js はクライアント側でレンダリングするSPA (Single Page Application) で、SSR機能を持たないため、アプリケーション開発をする際には Express などのサーバライブラリを手動で導入する必要があります。
そのほかにも、Vue.js では手動で設定しなくてはならないルーティングを Nuxt.js ではディレクトリにファイルを追加するだけで自動的に設定できる、アプリケーション全体の状態を管理できるストアを有している、といった違いがあります。
Next.jsとの違い
Nuxt.js と似た名前の Next.js というフレームワークがあります。Next.jsはReactがベースとなっている JavaScriptフレームワークで、こちらもReactにはないサーバ機能やストアでの状態管理、ルーティング自動生成機能などが備わっています。というのも、Nuxt.js はもともと React.js ベースの SSR用フレームワークである Next.js に感化されて開発されました。
両者は React で構築されたアプリをレンダリングする場合に Next.js を用いるのに対し、Next.js を使い、Vue.js で構築されたアプリをレンダリングする場合は Nuxt.js を使うという組み合わせの関係にあります。
Nuxt.jsでできること
フロントエンドのアプリケーション開発に用いられる Nuxt.js の機能はたくさんありますが、主なものを解説します。
複数のレンダリングシステムに対応
Nuxt.jsでは、複数のレンダリングシステムに対応しており、設定ファイルでレンダリング方法を切り替えられます。
CSR（クライアントサイドレンダリング）
CSR とは、ブラウザ側でJavaScriptを実行してHTMLコンテンツを生成するレンダリング方法です。
SSR（サーバサイドレンダリング）
SSR とは、本来 Web ブラウザ上で実行される JavaScript をサーバ内部で実行しれ HTML を生成し、クライアントに返す仕組みです。JavaScript はクライアントサイドで行われるものでしたが、サーバサイドで実行することで、高速な処理が可能になります。これにより、SEO が大幅に改善され、UX の向上につながります。
SSG（静的生成）
SSR とは、HTMLがビルド時に1度だけ生成され、以降は各リクエストに対して再利用していく仕組みです。生成されたHTMLを返すのでパフォーマンスは高いです。
ルーティング
ルーティングとは、クライアントから受けたリクエスト内容とサーバでの処理を関連させる動作のことで、Nuxtjs ではファイルを保存するだけでそのファイル名に対応するルーティングを自動で簡単に設定できるようになっており、ファイルの更新も必要ありません。
環境構築が簡単
Nuxt.jsは、時間をかけずに簡単に環境構築を行えます。
ViteやWebpack、esbuildなどのビルドツールがサポートされているため、カスタマイズすることができます。Nuxt3ではビルドツールのなかでも高速といわれるViteが採用されておりより高速な動作が実現できます。
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 の公式ドキュメントもその一つです。
Nuxt.jsで実装されたWebサイト
ここからは、実際にNuxt.jsを用いて作られたWebサービスを紹介します。
Nuxt.jsの始め方
Node.jsのインストーラのダウンロード
Node.jsの公式サイトにアクセスし、推奨版（LTS）のインストーラをダウンロードしましょう。2023年8月時点では「18.17.1 」というバージョンですが、その時点でのものをダウンロードする形で問題ありません。最新版は、確かに最新の機能が使えますが、その反面動作が安定しない場合があるため推奨版の利用がおすすめです。
Node.jsのインストール
インストーラのダウンロードができたら起動させて指示に従ってインストールしましょう。
インストールの確認
インストールが完了したらコマンドを実行するアプリを起動し、Node.jsおよびnpmが使えるようになってるか確認します。
WindowsOSの場合：「PowerShell」または「コマンドプロンプト」
macOSの場合：「ターミナル」アプリ
次のコマンドを実行します。
node -v
npm -v実行結果にインストールしたバージョンが表示されたら使用できる状態になっています。表示されない場合はOSを再起動して再度試しましょう。
Nuxt.jsのインストール
Nuxt.jsは、次のコマンドを実行するだけで実行可能です。Nuxt2までは対話形式で初期設定をしていく必要がありましたが、Nuxt3ではそれがなくなり、より少ない工程で済みます。
npx nuxi@latest init test-nuxt実行後、プロジェクトの作成が完了し、作業ディレクトリ内に「test-nuxt」ディレクトリが生成されます。
Nuxt.jsの実行
準備が整たら次はNuxt.jsを実行しましょう。必要なパッケージをインストールし、作成したプロジェクトのディレクトリに移動し、次のコマンドを実行します。
npm installパッケージのインストールが完了したら、次のコマンドを実行します。
npm run devターミナルの表示画面が切り替わり、開発用のサーバが立ち上がります。
表示されているURLにブラウザでアクセスしてNuxt.jsの初期画面が表示されていれば成功です。
