Apricot Web Production
- JavaScript
Nuxt.jsとは
Nuxt.js（ナクスト・ジェイエス）は、Vue.jsをより使いやすくしたフレームワークです。
フロントエンド開発ではすでにVue.jsやReactが使われているのに、Nuxt.jsを使う必要があるのか、疑問に思われるエンジニアの方がいるかもしれません。しかし最近では、Nuxt.jsを使った開発が増えています。
多くのフレームワークの中からNuxt.jsの導入を考えるとき、他のフレームワークとの違いや関係性が分かると検討しやすいかもしれません。Nuxt.jsとはどのようなフレームワークなのか、なぜVue.jsを効果的につかえるのかを詳しく解説します。
1
Nuxt.jsとは？
Nuxt.jsは、Vue.jsがベースになっているJavaScriptフレームワークです。
フレームワークとは、開発に最低限必要な機能が最初から組み込まれている骨組みのことを指し、現在のアプリケーション開発ではフレームワークの知識が必須になっています。
Nuxt.jsは、Vue.jsをより使いやすくする機能を持っているため、開発効率の良さから、最近では多くのサービスの開発で採用されています。
例えば、文章や写真などを投稿して配信できる「note」や「新型コロナウイルス感染症対策サイト」などのサイトです。特に後者のような公的機関のサービスにNuxt.jsが採用されたことは、多くのエンジニアたちの間で話題になりました。実際にサイトへアクセスしてみると、Nuxt.jsの特徴である軽量で高速な動きを確認することができます。
2022年夏にNext.jsの新たなバージョンである「Nuxt3」が正式リリースされると、公式サイトで発表されました。Nuxt3はVue3やTypeScriptに対応するなど、これまでの安定版であったNuxt2よりもさらに使いやすくなっています。
なお、既存のNuxt2のプロジェクトにNuxt3の機能を利用したい場合には「Nuxt Bridge」を利用するという選択肢もあります。Nuxt BridgeはNuxt2と互換性があるので、Nuxt3への段階的なアップグレードが可能です。
2
Nuxt.jsと他のフレームワークとの関係
フロントエンド開発の現場で使われるJavaScriptフレームワークは、Nuxt.jsのほかにもあります。その中で、Nuxt.jsにはどのような特徴があるのでしょうか。Nuxt.jsのベースとなっているVue.jsとの関係や、名前の似ているNext.jsとの違いを解説します。
Vue.jsとの違い
Nuxt.jsのベースとなっているVue.jsは、部分的に導入できるView ライブラリです。Vue.js はサーバー機能を持っていないため、アプリケーション開発をする際にはサーバーライブラリを手動で導入する必要があります。Nuxt.jsはVue.jsが持っていないこれらの機能を有したアプリケーションフレームワークです。
| Nuxt.js | Vue.js | |
| サーバ機能 | ○ | × |
| 利用用途 | アプリケーションフレームワーク | Viewライブラリ |
| 部分導入 | × | ○ |
他にも、Vue.jsでは手動で設定する必要があるルーティングが、Nuxt.jsでは特定のディレクトリにファイルを追加するだけで自動的に設定されたり、アプリケーション全体の状態を管理できるストアを持っていたりします。
また、Vue.jsはクライアント側でレンダリングするSPA（Single Page Application）ですが、Nuxt.jsはサーバー側でレンダリングする SSR（Server Side Rendering）や、ビルド時にすべてのコンテンツを含んだ静的ファイルを生成するSSG（Static Site Genaration）も設定することができます。
Next.jsとの違い
Next.js（ネクスト・ジェイエス）は、ReactがベースになっているJavaScript フレームワークです。Vue.jsが持たない機能をNuxt.jsが最初から備えているように、Next.jsもReactが持たないサーバー機能やストアを使った状態管理、そしてルーティングの自動生成機能などが、最初から組み込まれた状態で開発を始めることができます。
Reactの人気にともなって、Next.jsも多くのサービスで採用されています。2021年9月に発足したデジタル庁のサイトは、当初 Nuxt.jsが採用されているSTUDOというノーコードツールによって作られていましたが、最近ヘッドレスCMS導入のための再構成が行われて、フロントエンドにNext.jsを、バックエンドにDrupalを採用したSSGに変わりました。
開発を担当した企業はNext.jsを採用した理由について、今後採用を検討しているSSRへの切り替えが簡単におこなえることと、Next-Dupalという開発ツールを使った効率の良い開発をおこなえることを挙げています。
3
Nuxt.jsを利用するメリット
Vue.jsよりも効率良く開発がおこなえるNuxt.jsには、どのようなメリットがあるのでしょうか。アプリケーション開発で採用するフレームワークを検討する際に役に立つ、3つのメリットをご紹介します。
チームでのアプリケーション開発に向いている
Nuxt.jsはアプリケーション開発のための環境を比較的簡単に構築することができます。アプリケーション開発に必要なサーバーやルーティングの設定などをVue.jsのように手動でおこなう必要がありません。
また、Nuxt.jsのルールに沿ったファイル構成やコードの書き方をすれば、常にコードの品質を保つことができます。これらのことが開発効率の向上に繋がるため、Nuxt.jsはチーム開発に向いているといえるでしょう。
静的サイトを作れる
PWA に対応できる
Nuxt.jsにはPWA（Progressive Web Apps）に対応させることができる公式モジュールがあります。PWA対応にすると、PC やスマートフォンにインストールして使う、ネイティブアプリのように動作するWeb サイトを作成することができます。ホーム画面にアイコンを追加したり、プッシュ通知の機能を入れたりすることができるようになります。
4
Nuxt.jsの利用には、Node.jsのインストールが必要
通常、JavaScriptはブラウザでしか動かすことができません。JavaScriptをサーバー上で動かせるようにするためには、Node.jsで実行環境を構築する必要があるのです。
Nuxt.jsやNext.jsで開発を始める際には、必ずNode.jsをインストールします。ReactやVue.jsもサーバー側でレンダリングする SSR の場合には、同様の手順を踏むことになります。
Node.jsを使えばJavaScriptでバックエンド開発が可能
Node.jsがJavaScriptをサーバー上で動かせる実行環境だということは、つまり、JavaScriptでバックエンドの開発ができるようになるということです。バックエンド開発で使われる言語といえば、PHP や Ruby、Python などが挙げられますが、JavaScript を知っているフロントエンドエンジニアであれば、Node.jsを利用することでバックエンドも開発できるようになります。
なお、Nuxt.jsなどがフロントエンド向けのNode.jsライブラリ／フレームワークである一方、バックエンド向けとして人気があるNode.jsフレームワークはExpressです。Expressは、備わっている機能が他のフレームワークに比べて少ないのですが、その自由度の高さが評価されてバックエンドエンジニアに好まれているようです。
フロントエンドエンジニアもバックエンド開発がおこなえるようになると、API設計を含めた開発工程の全容を知ることができるので、フロントエンドエンジニアとしての知識がより深まるでしょう。