基本概念 / Learch

Nuxt.js 3の基本概念

Nuxt.js 3を理解するためには、その基本概念を把握することが重要です。このセクションでは、ディレクトリ構造、ページとルーティング、データフェッチングの3つの核心概念について詳しく解説し、<script setup>構文を使用した具体例を通じて説明します。

ディレクトリ構造

Nuxt.jsプロジェクトのディレクトリ構造は、開発の効率性と柔軟性を高めるように設計されています。以下はその主要なディレクトリと役割です：

pages/: アプリケーションのビューとルートがこのディレクトリに格納されます。Nuxt.jsはこのディレクトリ内のVueファイルを自動的に読み取り、アプリケーションのルーティングを構築します。
components/: 再利用可能なVueコンポーネントをこのディレクトリに保存します。Nuxt.js 3では、このディレクトリ内のコンポーネントは自動的にグローバルにインポートされるため、インポートなしでどのページや他のコンポーネントからも使用できます。
assets/: 静的ファイル（スタイルシート、画像、フォントなど）をこのディレクトリに置きます。これらのファイルはビルド時にWebpackを通して処理されます。
static/: 静的ファイルをこのディレクトリに置きますが、assets/ディレクトリとは異なり、ファイルはビルド時に変更されません。例えば、static/favicon.icoは/favicon.icoとしてサーブされます。

ページとルーティング

Nuxt.jsでは、pages/ディレクトリ内のファイル構造を基に自動でルーティングを生成します。例えば、pages/about.vueファイルは自動的に/aboutルートにマッピングされます。

具体例: Aboutページの作成

pages/about.vueを作成し、<script setup>構文を使用してコンポーネントを定義します。

<template>
  <div>
    <h1>About Us</h1>
    <p>This is the about page of our Nuxt.js 3 application.</p>
  </div>
</template>

<script setup>
// ここでスクリプトロジックを追加しますが、この例では特に必要ないです。
</script>

<style scoped>
/* スタイルをここに追加 */
h1 {
  color: #333;
}
</style>

データフェッチング

Nuxt.js 3では、ページコンポーネントがサーバー側でレンダリングされる際、またはクライアント側でナビゲートする際にデータをフェッチするための2つの主要な方法があります: asyncDataとuseFetch。

具体例: ニュース記事のフェッチ

pages/news.vueページを作成し、ニュース記事をフェッチして表示する例を示します。

<template>
  <div>
    <h1>Latest News</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useFetch } from 'nuxt/app'

const { data: articles } = useFetch('/api/news')

// 'articles' はサーバーからフェッチしたニュース記事のリストを反映します。
</script>

Nuxt概要

Nuxt応用