-READE ME-

始めに

Nuxtは、Vue.jsを使用したタイプセーフ（型安全 / 型の違いによってエラーが起こることを防ぐ仕組みのこと）で高パフォーマンスかつ本番向けのフルスタックウェブアプリケーションやウェブサイトを作成できる拡張可能な無料のオープンソースフレームワークです。

開発中にHMR（Hot Module Replacement / ページ全体を更新しなくても、実行時にブラウザ内のモジュールを自動的に更新することで開発者体験を向上させる仕組み）を楽しみながら、デフォルトでサーバーサイドレンダリングを使用して、本番環境で高性能なアプリケーションを作成することができます。また、初めから.vueファイルを作成し始めることができます。

Nuxtにはベンダーロックイン（プログラムを構成する中核部分に特定のシステムを組込むことで、他社製品への切り替えが困難になること）がないため、アプリケーションをどこにでもデプロイ（実行ファイルを実際のWebサーバー上に配置して、利用できる状態にすること）することができます。Edgeにもデプロイすることができます。

自動化とルール（規約）

Nuxtは、ルールと主観的なディレクトリ構造を使用して、繰り返しタスクを自動化することで、機能の開発に集中できるようにしています。設定ファイル（nuxt.config.ts）ではデフォルトの動作をカスタマイズしたり上書きしたりすることもできます。

• ファイルのルーティング

  pages/ディレクトリの構造に基づいてルートを定義します。これにより、アプリケーションの整理が容易になり、手動でのルート設定が不要になります。

• コード分割

  Nuxtは自動的にコードを小さな塊に分割（細分化）します。これにより、アプリケーションの初回読み込み時間を短縮することができます。

• ボックスからのサーバーサイドレンダリング

  Nuxtにはサーバーサイドレンダリング機能があるため、別途サーバーを設定する必要はありません。

• 自動インポート

  ツリーシェイキング（実行されないコードを削除すること）と最適化されたJSバンドルの恩恵を受けているため、Vueのコンポーザブルやコンポーネントをインポート不要で使用することができます。

• データの取得ユーティリティ

  Nuxtは、SSRに対応したデータの取得や異なるストラテジーを扱うためのコンポーザブルを提供しています。

• ゼロ設定のTypeScriptサポート

  自動生成された型とtsconfig.jsonにより、TypeScriptを学ぶ必要がなく、型安全なコードを利用できます。

• 設定済みのビルドツール

  デフォルトではViteを使用しており、開発中のホットモジュールリプレースメント（HMR）をサポートし、本番環境でのコードのバンドルにはベストプラクティス（最良の標準機能）が組み込まれています。

Nuxtはこれらを管理し、フロントエンドとバックエンドの機能を提供するため、重要なことに集中できるようにします。それは、ウェブアプリケーションの作成です。

サーバーサイドレンダリング（SSR）

Nuxtはデフォルトで組み込みのサーバーサイドレンダリング（SSR）機能を持ち、独自にサーバーを設定する必要はありません。これにより、ウェブアプリケーションには多くの利点があります。

• 初期ページの読み込み時間の短縮

  Nuxtは、完全にレンダリングされたHTMLページをブラウザに送信し、即座に表示されます。これにより、遅いネットワークやデバイスでも、認識されるページの読み込み時間が短くなり、ユーザーエクスペリエンス（UX）が向上します。

• SEOの向上

  サーバーサイドレンダリング（SSR）ページでは、HTMLコンテンツが即座に利用可能であるため、検索エンジンがより効果的にインデックス化できます。これにより、クライアントサイドでコンテンツをレンダリングするJavaScriptが必要なくなります。

• 低パワーデバイスでのパフォーマンス向上

  クライアント側でダウンロードおよび実行する必要のあるJavaScriptの量を削減するため、処理が重いJavaScriptアプリケーションに苦労する可能性のある低パワーデバイスでもメリットがあります。

• アクセシビリティの向上

  初回のページ読み込み時にコンテンツが即座に利用可能となるため、スクリーンリーダーやその他の支援技術を使用するユーザーのアクセシビリティが向上します

• キャッシュの簡易化

  ページはサーバーサイドでキャッシュされるため、コンテンツを生成してクライアントに送信する時間を短縮することで、さらにパフォーマンスが向上します。

サーバーサイドレンダリングは、全体的にはより速く効率的なユーザーエクスペリエンスを提供し、検索エンジン最適化やアクセシビリティを向上させることができます。

Nuxtは柔軟なフレームワークであり、nuxt generateを使用してアプリケーション全体を静的ホスティングに静的にレンダリングしたり、 ssr:falseオプションでSSRをグローバルに無効化したり、routeRulesオプションを設定することでハイブリッドレンダリングを活用したりすることができます。

Infoレンダリングモードを読む。

サーバーエンジン

NuxtのサーバーエンジンNitroは、新しいフルスタックの機能を解放します。

開発時には、Nuxtのサーバーコードとコンテキストの分離にはRollup（JSのモジューハンドラー）とNode.jsワーカーが使用されます。また、server/middleware/からサーバーAPIおよびミドルウェアが生成されます。

本番環境では、Nitroはアプリとサーバーを1つのユニバーサルなserver/api/内のファイルやoutput/ディレクトリに構築（ビルド）します。この出力されたファイルは軽量であり、ノードモジュール（ポリフィルを除く）から最小化されて削除されています。また、これらはJavaScriptをサポートするシステムで展開できます。例えば、Node.js、Serverless、Workers、Edge-sideレンダリング、または静的な環境などです。

Infoサーバーエンジンを読む。

展開される環境

NuxtアプリケーションはNodeサーバーやDenoサーバー上で展開することができます。また、静的環境でホストするためにプリレンダリングされることもあります。さらに、サーバーレス環境やエッジプロバイダーに展開することも可能です。

Infoデプロイを読む。

モジュラー

モジュールシステムにより、Nuxtをカスタムの機能やサードパーティのサービスとの統合で拡張することができます。

Infoモジュールを読む。

アーキテクチャ

Nuxtはさまざまなコアパッケージから構成されています。

• コアエンジン: nuxt
• バンドル: @nuxt/vite-builder and @nuxt/webpack-builder
• コマンドライン: nuxi
• サーバーエンジン: nitro
• 開発キット: @nuxt/kit
• Nuxt 2 Bridge: @nuxt/bridge

各種パッケージの説明を一度目を通しておくことをお勧めします。それにより、Nuxtの機能と各パッケージの範囲についてより理解を深めることができるでしょう。

Nuxtって何?

Nuxtは、Vue.jsプロジェクトをバックボーンに開発され、プロジェクトをより迅速にかつ手軽に構築するためのアーキテクチャーを提供します。より柔軟性を保ちながらプロジェクトを構築することができます。

Nuxtは強力なモジュールとエンジンで、より拡張性があり、RESTやGraphQLエンドポイント、お気に入りのCMS、CSSフレームワークなどとの連携を容易にします。また、PWAやAMPのサポートも、Nuxtプロジェクトからわずかなモジュールの追加で利用することができます。

準備はできましたか？

さぁ、インストールセクションに進んでください。