Nuxt 3 Get Started 日本語化：1. Introduction

このドキュメントは…

• Nuxt3の公式ドキュメントを日本語訳したものです。
• 逐語訳ではなく、意訳を心がけました。
• 学習のために和訳しているので、NuxtやJS、Web技術の知識不足のため誤訳している可能性が高いです。気になる箇所があればぜひご連絡ください。
• 上記理由のため、ぜひコメントも確認してください。

---

はじめに

Nuxtは無料で使える、オープンソースのフレームワークです。Nuxtは型安全で高性能、かつ他の製品と比べ遜色ないほどのWebアプリケーションやWebサイトを作成するための直感的で柔軟な機能を提供します。
必要な設定は全てNuxtのデフォルトとして記述済みです。なので、WebアプリやWebサイトの開発者（あなた）は最初から.vueファイルを使って開発できます。開発中はHMR^[1]を満喫し、リリース後はSSR^[2]機能を搭載した高品質なWebアプリケーションを楽しんでください。
Nuxtはベンダーロックイン^[3]が起きません。あなたが作成したアプリケーションはどんな場所へでもデプロイできます。エッジへのデプロイも問題ありません。

自動化と慣習

Nuxtは「規約」^[4]と「自己主張的な^[5]ディレクトリ構造」を持っています。これにより、開発者は設定ファイルの作成のような繰り返し業務から解放され、Webアプリケーションへの機能の追加に集中できます。もちろん、設定ファイルはデフォルトの挙動を上書きする形で自由に変更できます。

ファイルに基づくルーティング：Nuxtはpages/ディレクトリの構成に基づいてルーティングを定義します。この機能によって開発者はアプリケーションの管理が容易になり、手動のルーティング設定から解放されます。

コード分割：Nuxtは、開発者が書いたコードを自動的に小さなまとまりに分割します。この機能はアプリケーションに初めてアクセスした時のロード時間を短縮します。

すぐに使えるSSR：NuxtにはSSR機能が付属しています。なので、開発者は別途サーバを用意する必要はありません。

自動インポート：Nuxtが指定するディレクトリ内にVueコンポーザブルやVueコンポーネントを作成すれば、手動でインポートなしに使用できます。ツリーシェイキング^[6]や最適なJSバンドルにも対応しています。

データフェッチ用コンポーザブル：NuxtはSSRに互換性のあるデータフェッチ用コンポーザブルを持っています。もちろん他の用途にあったコンポーザブルも用意しています。

設定なしでTypeScriptを記述可能：Nuxtが自動で型を定義してtsconfig.jsonを用意するので、開発者はTypeScriptを学習せずとも「型安全性のある」コードを記述できます。

設定済みのビルドツール：Nuxtでは、Viteがデフォルトで使用されています。そのため、開発環境ではHMRが利用でき、製品をリリースするときには最適な設定項目でビルドができます。

Nuxtは上記のことを（開発者の代わりに）管理し、フロントエンドとバックエンド両方の機能性を担保しています。つまり、開発者は自身の問題ーーWebアプリケーションの開発に注力できます。

サーバサイドレンダリング

NuxtはビルドインのSSR機能が付属しているため、開発者は自身でサーバを用意する必要はありません。また、SSR機能を活用すると、以下の利点を得られます：

初回アクセス時のロードタイムが短縮：Nuxtはブラウザにレンダリング済みのHTMLページを渡すため、画面描画が高速です。そのため、ページの読み込み時間を短縮でき、UXの向上を実現します。特に、低速ネットワークに接続されたデバイスや、マシンパワーが弱いデバイスなどで効果を発揮します。

SEOの向上：CSRなどと比較すると、SSRのページは検索エンジンにより効果的にインデックスされます。CSRではクライアント側でJSを用いたレンダリングを行う必要がありますが、SSRではHTMLコンテンツを瞬時に利用できるためです。

マシンパワーの弱いデバイスでも快適：SSRはクライアント側で実行されるJavaScriptの量を削減できます。このおかげで、マシンパワーが弱いデバイスでも快適にWebアプリケーションを利用できます。

高いアクセシビリティ：初回アクセス時でも、スクリーンリーダや他の支援技術を利用するユーザもSSRのコンテンツに瞬時にアクセスできます。

より気軽にキャッシュできる：SSRのページはサーバサイドで容易にキャッシュできます。キャッシュすることでクライアントへのレスポンスにかかる時間を短縮できます。

まとめると、SSRはより高速で、より効率的なUXを実現できます。加えて、SEOやアクセシビリティも向上できます。

もちろん、Nuxtは多機能なフレームワークなので、nuxt generateで静的コンテンツとしてビルドしたり^[7]、設定ファイルでssr: falseとしてSSRを無効化したり^[8]できます。加えて、routeRulesオプションを変更することでハイブリッドレンダリングも実現できます。

サーバエンジン

Nuxtのサーバエンジンである「Nitro」は、フロントエンドとバックエンド両方に関係する新しい機能を有しています。
開発環境においては、Nitroはサーバ用のコードを、他のコードと分離させながら実行するためにRollup.jsとNode.jsを使用しています。開発者はサーバAPI用のコードを/api/フォルダで、ミドルウェア用のコードを/middleware/フォルダに置いておけば、NitroはサーバAPIを用意いたします。
Webアプリケーションをビルドする際、Nitroはフロントエンド部分もバックエンド部分もすべて.outputディレクトリにまとめて出力します。これらのファイルは最小化され、Node.jsのモジュールも取り除かれた状態で出力されるため、とても軽量です。開発者はこの出力ファイルをどんなシステム上にもデプロイできます。

すぐにリリースできる

Nuxtで作成されたアプリケーションはNodeサーバやDenoサーバへデプロイできます。加えて、静的ホスティングサービス用にプリレンダリングすることも可能ですし、サーバレスやエッジにもデプロイできます。

モジュラー

モジュールシステムを活用することで、Nuxtの機能拡張や、サードパーティ製のサービスとの統合が可能です。

アーキテクチャ

Nuxtは以下パッケージで構成されています：

• コアエンジン：Nuxt
• バンドラ：@nuxt/vite-builder、および@nuxt/webpack-builder
• CLI：nuxi
• サーバエンジン：Nitro
• 開発ツール：@nuxt/kit
• Nuxt 2 Bridge: @nuxt/bridge

それぞれのパッケージの機能や、それぞれのパッケージが持つ役割を理解するためにも、ぜひとも解説をお読みください。

脚注

1. ホットモジュールリプレイスメント：(https://webpack.js.org/concepts/hot-module-replacement/)

2. サーバサイドレンダリング：(https://ja.vuejs.org/guide/scaling-up/ssr.html)

3. ベンダーロックイン：(https://ja.wikipedia.org/wiki/ベンダーロックイン)

4. ここでの「規約」は、「CoC（convention over configuration、設定より規約）」というパラダイムを指すだろう。開発者の決定すべきことを減らす目的で、フレームワークの設定項目にデフォルトを設定しておく考え方のこと。(https://ja.wikipedia.org/wiki/設定より規約)

5. ここでの「自己主張的」とは、「フレームワークが最適な方法を用意してくれている」という意味。言い換えると「してほしい動きをフレームワークにしてもらうように開発者が頑張ってコードを書くのではなく、開発者がフレームワークができることを把握してコードを書く」様を指して「自己主張的なフレームワーク」という。(https://softwareengineering.stackexchange.com/questions/12182/what-does-opinionated-software-really-mean)

6. ツリーシェイキング：(https://webpack.js.org/guides/tree-shaking/)

7. SSGのこと。静的サイトジェネレータ：(https://www.cloudflare.com/ja-jp/learning/performance/static-site-generator/)

8. CSRまたはSPAのこと。シングルページアプリケーション：(https://developer.mozilla.org/ja/docs/Glossary/SPA)