何事も、概念を理解しなければ理解・応用はできないと考えていますので、まずは私が理解している概念からお話しします。

 

Nuxt.jsとは何者か

よくある説明

Vue.jsをベースとした、JavaScriptを使用して開発するWebアプリケーション用のフレームワークが、Nuxt.jsです。

 

私が説明するとしたら…

Vue.jsは、ブラウザ上で動作するJavaScriptで利用可能なレンダリングフレームワークです。
このVue.jsを利用して、サーバー側でHTML、CSS、JavaScriptを動的に生成し、ブラウザに返してくれるWebアプリケーション用のフレームワークがNuxt.jsです。

 

 

そもそもVue.jsって？

Vue.jsは、ブラウザ上のJavaScriptで動作するWebページのレンダリングを行うフレームワークです。
フレームワークと言うと難しそうですが、噛み砕いて言えば、決められた記述ルールがあり、そのルールに則って記述することです。

例えば、通常は100行記述しなくてはいけなかったところを、フレームワークを利用することで50行くらいの記述で同等のことができるようになります。
記述量が減るので、開発の労力が減るというメリットがあります。
ただ、記述量は減りますが、独特のルールを覚えなくてはいけないので、習得には労力がかかります。
そして、フレームワークが陳腐化すると、ルールを覚えるために使った労力が無駄になるリスクが発生します。

Vue.jsは、HTML出力も含め、全てをブラウザ上のJavaScriptでレンダリングするため、Webサーバーがなくても、オンライン環境がなくても利用可能です。
ただし、どこかのサーバー上のデータベースに登録されている情報など、サーバー上のリソースを利用したい場合は、別途Web APIを用意し、リソースのやり取りを行う必要があります。

 

 

Nuxt.jsとVue.jsの差は何？

Nuxt.jsは、Vue.jsをサーバー上で実行し、WebページのHTMLなどを生成するようにしたものです。

Vue.jsとNuxt.jsの違いというのは、実行するのが [ブラウザ上] なのか、 [サーバー上] なのかという、実行場所の違いです。

文字だけでは伝わりづらいと思いますので、次項で動作イメージをフロー図で表してみました。

 

Vue.jsの動作イメージ

まず、Vue.jsを利用したWebページが動作するまでの処理のフロー図を以下に示します。

フロー図１

Webサーバーは、サーバー内に保存されているファイルの読み込みとその応答のみを担当します。
実際にダウンロードしたデータに基づき、HTMLの構築、レンダリング等の処理はブラウザ上で行われます。

 

Nuxt.jsの動作イメージ

次に、Nuxt.jsの場合はどうなのか、同様にフロー図で以下に示します。

フロー図２

ここで、Node.jsが登場します。
Node.jsは、JavaScriptの実行環境です。詳しくはこちらで解説していますので、お時間があればご参照ください。

フロー図１とフロー図２を比較すると、Nuxt.jsの方がVue.jsに比べ、登場要素と手順が多く複雑であることが分かります。

 

Vue.jsだけでいいのでは？

一見、Nuxt.jsはサーバーが必須だし動作が複雑なので、Vue.jsだけを使った方が良いように感じるかもしれません。

しかし、Nuxt.jsにはVue.jsのみで利用するのに比べ、次のようなメリットがあります。

 

Nuxt.jsを利用するメリット

メリット1：SEO的に有利

最初に、ブラウザに応答されるHTML構造（Vue.jsはフロー図１の②、Nuxt.jsはフロー図２の④）を比較してください。
Vue.jsはほぼ空であるのに対し、Nuxt.jsはすでに　HTML内に情報が含まれています。
クローラーがアクセスしてきた場合、Vue.jsで作られたページは何も記述されていないブランクページと判断され、無視される恐れがあります。

メリット2：クライアントの処理能力に依存しない

Vue.jsはクライアントのブラウザ上で動作するため、Webページ表示にかかる時間がクライアントPCの処理能力によっては安定しません。
Nuxt.jsはサーバー上でHTML等を生成するため、クライアントPCの処理能力への依存度が下がります。
結果、Webページ表示にかかる時間が安定します。

メリット3：Web APIの実装が必須ではない

Nuxt.jsはサーバー上で動作するため、直接サーバー上のリソースにアクセスすることが可能です。
そのため、データを表示するだけであれば、Web APIの実装は不要です。
Web APIを経由してアクセスする必要がないため、fetch時のオーバーヘッドを削減でき、ページの応答速度の向上が期待できます。

メリット4：TypeScriptが使える

Nuxt.jsはすべてTypeScriptで実装することができます。
TypeScriptは、JavaScriptに比べ、型定義ができるなど、保守性・生産性・機能拡張性で有利です。
最近では、ブラウザ上でもTypeScriptが使えるようにしようという動きがありますが、まだまだ過渡期です。

メリット5：Web APIを実装する場合に別環境が不要

Nuxt.jsでは、サーバー側の処理も実装が可能なので、フロントエンドとバックエンドをひとつの環境で開発でき、複数の実行環境は必要ありません。

 

 

まとめ

Nuxt.jsは、Vue.jsのアドバンテージを活用し、ウィークポイントを補うためのフレームワークと言えるでしょう。

 

 

次回

Nuxt.jsには、[Next.js] という強力なライバルが存在しています。
グローバル的に見ると、Next.jsのほうが優勢になってきています。

今をときめくデジタル庁のサイトも、Nuxt.jsからNext.jsに変わったようなので、
次回は、

【Nuxt.js】で開発しても、そのサイト時代遅れだぞ！（Next.js編）

で、Next.jsについてお話ししたいと思います（予定）。どうぞお楽しみに！

 

最新のWebシステム開発は、CNS R&D (cnsrd.jp)へご相談ください。

セキュリティ要件が厳しいWebシステム案件も経験豊富です。

 

（開発者M）