最終更新日: 2023年08月15日

Vue.js 開発

NuxtはVueをフロントエンドフレームワークとして使用し、コンポーネントの自動インポートやファイルベースのルーティングなどの機能を追加します。Nuxt 3はVueの新しいメジャーリリースであるVue 3を統合しており、Nuxtユーザーに新しいパターンを可能にしています。

Nuxtを使用する際にVueの深い知識は必要ありませんが、vuejs.orgのドキュメントを読み、いくつかの例を試してみることをおすすめします。

Nuxtは常にVueをフロントエンドフレームワークとして使用してきました。以下の理由から、私たちはNuxtをVueの上に構築することを選択しました：

Vueのリアクティビティモデルは、データの変更が自動的にインターフェースの変更をトリガーする仕組みです。
コンポーネントベースのテンプレートは、HTMLをウェブの共通言語として保持しながら、直感的なパターンを可能にし、インターフェースを一貫性のあるままで強力に保つことができます。
小規模なプロジェクトから大規模なウェブアプリケーションまで、Vueはスケールにおいても高いパフォーマンスを維持し、アプリケーションがユーザーに価値を提供し続けることを保証します。

NuxtでのVue

シングルファイルコンポーネント

Vueのシングルファイルコンポーネント（SFC、または*.vueファイル）は、Vueコンポーネントのマークアップ（<template>）、ロジック（<script>）、およびスタイリング（<style>）をカプセル化します。NuxtはSFCに対してゼロ設定の体験を提供し、Hot Module Replacementを利用してシームレスな開発者体験を提供します。

コンポーネントの自動インポート

Nuxtプロジェクトのcomponents/ディレクトリに作成されたすべてのVueコンポーネントは、インポートすることなくプロジェクトで利用できます。もしコンポーネントを使用しない場合は、コードには含まれません。

Vueルーター

ほとんどのアプリケーションは複数のページとそれらの間を移動する方法が必要です。これをルーティングと呼びます。Nuxtでは、pages/ディレクトリと命名規則を使用して、公式のVue Routerライブラリを介してファイルにマッピングされるルートを直接作成します。

事例

app.vueファイルはエントリーポイントであり、ブラウザウィンドウに表示されるページを表します。

コンポーネントの<template>内では、components/ディレクトリに作成した<Welcome>コンポーネントをインポートすることなく使用します。

<template>の内容をカスタムのウェルカムメッセージで置き換えてみてください。右側のブラウザウィンドウは自動的にリロードせずに変更内容を表示します。

Vueに詳しい方は、Vueアプリケーションのインスタンスを作成するmain.jsファイルを探しているかもしれません。Nuxtはこれを自動的に裏側で処理します。

もし以前にNuxt2やVue2を使用したことがある場合は、Vue2とVue3の違い、およびNuxtがこれらの進化をどのように統合しているかについての理解を深めるために読み進めてください。

それ以外の場合は、次の章に進んでNuxtのもう一つの重要な機能である「レンダリングモード」を知ることができます。

Nuxt2 / Vue2 との違い

Nuxt 3はVue 3をベースにしています。新しいメジャーバージョンのVueでは、いくつかの変更が導入されており、Nuxtはこれを活用しています。

より良いパフォーマンス
Composition API
TypeScriptサポート

高速なレンダリング

VueのVirtual DOM（VDOM）は一から書き直され、より優れたレンダリングパフォーマンスを実現しています。さらに、コンパイルされたシングルファイルコンポーネントを使用する際には、Vueコンパイラがビルド時に静的なマークアップと動的なマークアップを分離してさらに最適化することができます。

これにより、初回のレンダリング（コンポーネントの作成）と更新がより高速になり、メモリの使用量も減少します。Nuxt3では、サーバーサイドレンダリングもより高速になります。

より小さなバンドル

Vue3とNuxt3では、バンドルサイズの削減に重点が置かれています。バージョン3では、Vueのほとんどの機能、テンプレートディレクティブや組み込みコンポーネントを含め、tree-shakable（未使用のコードを除外してバンドルサイズを最適化することができる）になっています。使用しない場合、本番のバンドルには含まれません。

このようにして、最小限のVue3アプリケーションは、gzip圧縮後に12KBまで削減されることがあります。

コンポジション API

Vue2では、コンポーネントにデータとロジックを提供する唯一の方法はOptions APIでした。Options APIは、dataやmethodsなどの事前定義されたプロパティを使用して、テンプレートにデータとメソッドを返すことを可能にします。

// Vue2でのOptions APIの記述例
<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            increment(){
                this.count++
            }
        }
    }
</script>

Vue3で導入されたComposition APIはOptions APIの置き換えではありませんが、アプリケーション全体での論理の再利用を可能にし、複雑なコンポーネント内でコードを最適化できるようにした方法なのです。

<script>の定義内でsetupキーワードを使用して、以下のコンポーネントをComposition APIとNuxt3の自動インポートされたReactivity APIを使用して書き直したものです:

<script setup lang="ts">
    const count = ref(0);
    const increment = () => count.value++;
</script>

Nuxt3の目標は、Composition APIを中心に優れた開発者体験を提供することです。

VueとNuxt3の組み込みコンポーザブルから自動的にインポートされるリアクティビティ関数を使用してください。
composables/ディレクトリに自分自身で自動インポートされる再利用可能な関数を書いてください。

TypeScript Support

Vue3とNuxt3の両方はTypeScriptで書かれています。完全に型付けされたコードベースは、ミスを防止しAPIの使用方法をドキュメント化します。しかし、これはアプリケーションをTypeScriptで書く必要があるという意味ではありません。Nuxt3では、ファイルの拡張子を .js から .ts に変更するか、コンポーネント内に<script lang="ts">を追加することで、TypeScriptを選択的に利用することができます。

Info Nuxt3におけるTypeScriptの詳細について読む