Nuxt 3 チュートリアル：簡単ステップでWebサイト構築

By /

はい、承知いたしました。Nuxt 3チュートリアルの詳細な記事を、約5000語で記述します。

Nuxt 3 チュートリアル：簡単ステップでWebサイト構築

Nuxt 3は、Vue.jsをベースにした最新のフルスタックフレームワークであり、開発者エクスペリエンスの向上、パフォーマンスの最適化、そしてスケーラブルなWebアプリケーション構築を容易にすることを目的としています。このチュートリアルでは、Nuxt 3の基本的な概念から、実際にWebサイトを構築するまでの手順をわかりやすく解説します。初心者の方でも、このチュートリアルを通してNuxt 3の魅力を理解し、Web開発スキルを向上させることができるでしょう。

目次

  1. Nuxt 3とは？
    • 1.1. フレームワークの概要と特徴
    • 1.2. Nuxt 2からの変更点と改善点
    • 1.3. Nuxt 3のメリットとデメリット
  2. 開発環境の準備
    • 2.1. Node.jsとnpm (またはyarn, pnpm) のインストール
    • 2.2. Visual Studio Code (またはお好みのエディタ) のセットアップ
    • 2.3. Nuxt CLIのインストール
  3. プロジェクトの作成
    • 3.1. Nuxt CLIを使ったプロジェクトの初期化
    • 3.2. プロジェクトディレクトリの構造
    • 3.3. 開発サーバーの起動
  4. 基本的なルーティング
    • 4.1. pages/ ディレクトリを使ったルーティング
    • 4.2. 動的なルーティングの設定
    • 4.3. リンクの作成 (<NuxtLink>)
  5. コンポーネントの作成
    • 5.1. components/ ディレクトリの活用
    • 5.2. グローバルコンポーネントの登録
    • 5.3. コンポーネント間のデータ共有 (PropsとEmit)
  6. レイアウトの作成
    • 6.1. layouts/ ディレクトリを使ったレイアウト定義
    • 6.2. デフォルトレイアウトの設定
    • 6.3. カスタムレイアウトの適用
  7. データの取得と表示
    • 7.1. asyncData と useFetch の使い方
    • 7.2. APIからのデータ取得
    • 7.3. データの表示と操作
  8. ストア (Pinia) の利用
    • 8.1. Piniaのインストールと設定
    • 8.2. ストアの作成と利用
    • 8.3. ステートの管理と更新
  9. ミドルウェアの利用
    • 9.1. middleware/ ディレクトリを使ったミドルウェア定義
    • 9.2. 認証ミドルウェアの作成
    • 9.3. グローバルミドルウェアと名前付きミドルウェア
  10. プラグインの利用
    • 10.1. plugins/ ディレクトリを使ったプラグイン定義
    • 10.2. Vueインスタンスへの機能追加
    • 10.3. サードパーティライブラリの統合
  11. 設定ファイルの理解 (nuxt.config.ts)
    • 11.1. 基本設定 (app, modules, build, etc.)
    • 11.2. 環境変数の設定
    • 11.3. ビルド設定のカスタマイズ
  12. デプロイメント
    • 12.1. ビルドコマンドの実行
    • 12.2. 静的サイトジェネレーターとしての利用
    • 12.3. サーバーサイドレンダリング (SSR) 環境へのデプロイ
  13. 実践的なサンプルWebサイトの構築
    • 13.1. ブログサイトの作成
    • 13.2. Eコマースサイトの作成 (概要)
  14. Nuxt 3に関する学習リソース
    • 14.1. 公式ドキュメント
    • 14.2. コミュニティリソース (Discord, GitHub, etc.)
    • 14.3. チュートリアルとコース
  15. まとめと今後の展望

1. Nuxt 3とは？

1.1. フレームワークの概要と特徴

Nuxt 3は、Vue.jsを基盤とした、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、シングルページアプリケーション（SPA）など、さまざまなレンダリングモードをサポートするフルスタックフレームワークです。 主な特徴は以下の通りです。

  • ファイルベースルーティング: pages/ディレクトリにファイルを配置するだけで、自動的にルーティングが設定されます。
  • コンポーネントの自動インポート: components/ディレクトリに配置したコンポーネントは、自動的にインポートされるため、import文を記述する必要がありません。
  • APIルーティング: server/api/ディレクトリにAPIエンドポイントを簡単に作成できます。
  • Vue 3とComposition API: Vue 3の最新機能を活用し、Composition APIによる柔軟なコンポーネント開発が可能です。
  • Typescriptサポート: 完全にTypescriptで記述されており、Typescriptでの開発を強力にサポートします。
  • モジュールシステム: 豊富なモジュールを利用することで、機能を拡張できます。
  • パフォーマンスの最適化: コード分割、プリフェッチ、遅延ロードなどの技術により、パフォーマンスが最適化されています。
  • SSR/SSG/SPAの柔軟なサポート: 要件に応じてレンダリングモードを柔軟に選択できます。

1.2. Nuxt 2からの変更点と改善点

Nuxt 3は、Nuxt 2から多くの点で進化しています。主な変更点と改善点は以下の通りです。

  • Vue 3へのアップグレード: Vue 3の採用により、パフォーマンスが向上し、Composition APIなどの最新機能を利用できます。
  • Viteによる高速ビルド: Viteの採用により、開発時のホットリロードが大幅に高速化されました。
  • Composition APIの推奨: Composition APIが推奨され、より柔軟で再利用可能なコンポーネント開発が可能になりました。
  • サーバーレス機能の強化: サーバーレス環境へのデプロイが容易になり、よりスケーラブルなアプリケーションを構築できます。
  • 型安全性の向上: Typescriptのサポートが強化され、型安全性と開発効率が向上しました。
  • 新しいモジュールシステム: より柔軟で拡張性の高いモジュールシステムが導入されました。

1.3. Nuxt 3のメリットとデメリット

Nuxt 3は多くのメリットを持つ一方で、いくつかのデメリットも存在します。

メリット:

  • 開発効率の向上: ファイルベースルーティング、コンポーネントの自動インポートなどにより、開発効率が向上します。
  • パフォーマンスの最適化: SSR、SSG、コード分割などにより、パフォーマンスが最適化されます。
  • SEO対策: SSRにより、検索エンジン最適化（SEO）が容易になります。
  • スケーラビリティ: サーバーレス環境へのデプロイが容易であり、スケーラブルなアプリケーションを構築できます。
  • 豊富なエコシステム: 多くのモジュールとプラグインが利用可能であり、機能を拡張できます。
  • Vue.jsとの親和性: Vue.jsをベースとしているため、Vue.js開発者は容易に習得できます。

デメリット:

  • 学習コスト: Nuxt 3の機能を十分に活用するには、ある程度の学習コストが必要です。
  • モジュールの互換性: Nuxt 2のモジュールがそのままNuxt 3で動作するとは限りません。移行には調整が必要になる場合があります。
  • 複雑な設定: 高度なカスタマイズを行う場合、設定が複雑になることがあります。
  • 比較的新しいフレームワーク: まだ新しいフレームワークであるため、情報が少ない場合があります。

2. 開発環境の準備

2.1. Node.jsとnpm (またはyarn, pnpm) のインストール

Nuxt 3を開発するには、Node.jsが必要です。Node.jsの公式サイト(https://nodejs.org/)から最新のLTS（Long Term Support）バージョンをダウンロードしてインストールしてください。Node.jsをインストールすると、npm（Node Package Manager）も同時にインストールされます。

npm以外にも、yarnやpnpmといったパッケージマネージャーを利用できます。これらのパッケージマネージャーは、npmよりも高速で効率的な依存関係管理を提供します。

  • yarn: npm install -g yarn
  • pnpm: npm install -g pnpm

2.2. Visual Studio Code (またはお好みのエディタ) のセットアップ

コードエディタは、開発効率を向上させるために不可欠です。Visual Studio Code (VS Code) は、豊富な拡張機能と使いやすさから、多くの開発者に支持されています。VS Codeの公式サイト(https://code.visualstudio.com/)からダウンロードしてインストールしてください。

VS Codeには、Vue.jsの開発をサポートする拡張機能が多数存在します。例えば、Veturは、Vue.jsの構文ハイライト、コード補完、リンティング、フォーマットなどの機能を提供します。

2.3. Nuxt CLIのインストール

Nuxt CLIは、Nuxt 3プロジェクトの作成や管理を容易にするためのコマンドラインツールです。以下のコマンドを実行して、Nuxt CLIをグローバルにインストールしてください。

bash
npm install -g nuxi

または、yarnを使用する場合：

bash
yarn global add nuxi

pnpmを使用する場合：

bash
pnpm add -g nuxi

3. プロジェクトの作成

3.1. Nuxt CLIを使ったプロジェクトの初期化

Nuxt CLIを使って、新しいNuxt 3プロジェクトを初期化します。以下のコマンドを実行してください。

bash
nuxi init my-nuxt-app

my-nuxt-appはプロジェクト名です。任意の名前を設定できます。

コマンドを実行すると、プロジェクトの初期設定に関する質問が表示されます。必要に応じて回答してください。

3.2. プロジェクトディレクトリの構造

プロジェクトが初期化されると、以下のようなディレクトリ構造が生成されます。

my-nuxt-app/
├── .nuxt/ # Nuxtが生成する一時ファイル
├── components/ # Vueコンポーネントを配置するディレクトリ
├── composables/ # Composition APIのcomposable関数を配置するディレクトリ
├── layouts/ # レイアウトファイルを配置するディレクトリ
├── middleware/ # ミドルウェアファイルを配置するディレクトリ
├── pages/ # ページファイルを配置するディレクトリ (ルーティング)
├── plugins/ # プラグインファイルを配置するディレクトリ
├── public/ # 静的ファイルを配置するディレクトリ
├── server/ # サーバーサイドのコードを配置するディレクトリ (APIなど)
├── app.vue # メインのVueアプリケーション
├── nuxt.config.ts # Nuxtの設定ファイル
├── package.json # プロジェクトの依存関係とスクリプト
└── tsconfig.json # Typescriptの設定ファイル

3.3. 開発サーバーの起動

プロジェクトディレクトリに移動し、以下のコマンドを実行して開発サーバーを起動します。

bash
cd my-nuxt-app
npm run dev

または、yarnを使用する場合：

bash
yarn dev

pnpmを使用する場合：

bash
pnpm dev

開発サーバーが起動すると、ブラウザでhttp://localhost:3000にアクセスできるようになります。

4. 基本的なルーティング

4.1. pages/ ディレクトリを使ったルーティング

Nuxt 3では、pages/ディレクトリにファイルを配置するだけで、自動的にルーティングが設定されます。例えば、pages/index.vueを作成すると、/にアクセスできるようになります。

pages/about.vueを作成すると、/aboutにアクセスできるようになります。

“`vue
// pages/about.vue

“`

4.2. 動的なルーティングの設定

動的なルーティングを設定するには、ファイル名を[パラメータ名].vueのようにします。例えば、pages/users/[id].vueを作成すると、/users/123のように、/users/の後に任意のIDを指定してアクセスできるようになります。

“`vue
// pages/users/[id].vue

“`

useRoute()は、現在のルート情報を取得するためのComposable関数です。route.paramsには、URLパラメータが含まれています。

4.3. リンクの作成 (<NuxtLink>)

ページ間のリンクを作成するには、<NuxtLink>コンポーネントを使用します。<NuxtLink>は、クライアントサイドでのナビゲーションを提供し、ページ全体のリロードを回避することで、よりスムーズなユーザーエクスペリエンスを実現します。

“`vue

“`

5. コンポーネントの作成

5.1. components/ ディレクトリの活用

Vueコンポーネントは、components/ディレクトリに配置します。Nuxt 3では、components/ディレクトリに配置されたコンポーネントは、自動的にインポートされるため、import文を記述する必要がありません。

例えば、components/MyComponent.vueを作成すると、すべてのページやコンポーネントで<MyComponent>として利用できるようになります。

“`vue
// components/MyComponent.vue

“`

5.2. グローバルコンポーネントの登録

components/ディレクトリに配置されたコンポーネントは、デフォルトでグローバルコンポーネントとして登録されます。これは、すべてのページとコンポーネントで<MyComponent>のように直接利用できることを意味します。

5.3. コンポーネント間のデータ共有 (PropsとEmit)

コンポーネント間でデータを共有するには、PropsとEmitを使用します。

  • Props: 親コンポーネントから子コンポーネントへデータを渡すために使用します。
  • Emit: 子コンポーネントから親コンポーネントへイベントを発行するために使用します。

“`vue
// components/ChildComponent.vue

“`

“`vue
// pages/index.vue

“`

6. レイアウトの作成

6.1. layouts/ ディレクトリを使ったレイアウト定義

レイアウトは、Webサイトの共通の構造（ヘッダー、フッター、サイドバーなど）を定義するために使用されます。layouts/ディレクトリにレイアウトファイルを配置します。

“`vue
// layouts/default.vue

“`

<slot />は、ページの内容が表示される場所です。

6.2. デフォルトレイアウトの設定

layouts/default.vueは、デフォルトのレイアウトとして自動的に適用されます。

6.3. カスタムレイアウトの適用

カスタムレイアウトを適用するには、definePageMetaを使用して、layoutオプションを指定します。

“`vue
// pages/about.vue

“`

7. データの取得と表示

7.1. asyncData と useFetch の使い方

Nuxt 3では、asyncDataとuseFetchを使用してデータを取得します。

  • asyncData: ページコンポーネントでのみ使用できます。サーバーサイドでデータを取得し、ページをレンダリングする前にデータを準備します。
  • useFetch: ページコンポーネントとコンポーネントで使用できます。クライアントサイドまたはサーバーサイドでデータを取得できます。

“`vue
// pages/index.vue

“`

7.2. APIからのデータ取得

上記の例では、useFetchを使用して、https://jsonplaceholder.typicode.com/postsからデータを取得しています。

7.3. データの表示と操作

取得したデータは、テンプレート内で自由に表示および操作できます。

8. ストア (Pinia) の利用

8.1. Piniaのインストールと設定

Piniaは、Vue.jsのためのステート管理ライブラリです。Nuxt 3でPiniaを使用するには、まずPiniaをインストールする必要があります。

bash
npm install @pinia/nuxt @pinia/core

または、yarnを使用する場合：

bash
yarn add @pinia/nuxt @pinia/core

pnpmを使用する場合：

bash
pnpm add @pinia/nuxt @pinia/core

次に、nuxt.config.tsにPiniaモジュールを追加します。

typescript
export default defineNuxtConfig({
modules: [
'@pinia/nuxt',
],
});

8.2. ストアの作成と利用

ストアは、stores/ディレクトリに作成します。ストアファイルは、defineStore関数を使って定義します。

“`typescript
// stores/counter.ts
import { defineStore } from ‘pinia’;

export const useCounterStore = defineStore(‘counter’, {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count–;
},
},
getters: {
doubleCount: (state) => state.count * 2,
},
});
“`

8.3. ステートの管理と更新

ストアは、useCounterStore()のようにComposable関数として利用できます。ステート、アクション、ゲッターにアクセスして、ステートの管理と更新を行います。

“`vue

“`

9. ミドルウェアの利用

9.1. middleware/ ディレクトリを使ったミドルウェア定義

ミドルウェアは、ルートにアクセスする前に実行される関数です。認証、アクセス制御、ログ記録などの処理に使用できます。middleware/ディレクトリにミドルウェアファイルを配置します。

“`typescript
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
const isLoggedIn = false; // 例：認証状態のチェック

if (!isLoggedIn && to.path !== ‘/login’) {
return navigateTo(‘/login’);
}
});
“`

9.2. 認証ミドルウェアの作成

上記の例は、認証ミドルウェアの基本的な例です。ユーザーがログインしていない場合、/loginページにリダイレクトします。

9.3. グローバルミドルウェアと名前付きミドルウェア

  • グローバルミドルウェア: すべてのルートに適用されるミドルウェアです。ファイル名をmiddleware/global.tsのようにglobalプレフィックスを付けて定義します。
  • 名前付きミドルウェア: 特定のルートにのみ適用されるミドルウェアです。definePageMetaを使用して、middlewareオプションを指定します。

“`vue
// pages/profile.vue

“`

10. プラグインの利用

10.1. plugins/ ディレクトリを使ったプラグイン定義

プラグインは、Vueインスタンスに機能を追加するために使用されます。plugins/ディレクトリにプラグインファイルを配置します。

typescript
// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.provide('my-plugin', {
message: 'Hello from my plugin!',
});
});

10.2. Vueインスタンスへの機能追加

上記の例では、nuxtApp.vueApp.provideを使用して、Vueインスタンスにmy-pluginを提供しています。

10.3. サードパーティライブラリの統合

プラグインを使って、サードパーティライブラリをNuxt 3に統合することもできます。

11. 設定ファイルの理解 (nuxt.config.ts)

11.1. 基本設定 (app, modules, build, etc.)

nuxt.config.tsは、Nuxt 3プロジェクトの設定ファイルです。defineNuxtConfig関数を使って設定を定義します。

  • app: アプリケーション全体の設定（title, meta, headなど）
  • modules: 使用するモジュール
  • build: ビルド設定
  • vite: Viteの設定
  • runtimeConfig: ランタイム設定（APIキーなど）

11.2. 環境変数の設定

環境変数は、runtimeConfigを使って設定します。

typescript
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: 'secret-key', // サーバーサイドでのみ利用可能
public: {
apiBase: '/api' // クライアントサイドとサーバーサイドで利用可能
}
}
});

11.3. ビルド設定のカスタマイズ

Viteの設定をカスタマイズするには、viteオプションを使用します。

12. デプロイメント

12.1. ビルドコマンドの実行

本番環境にデプロイする前に、以下のコマンドを実行してプロジェクトをビルドします。

bash
npm run build

または、yarnを使用する場合：

bash
yarn build

pnpmを使用する場合：

bash
pnpm build

12.2. 静的サイトジェネレーターとしての利用

Nuxt 3は、静的サイトジェネレーターとしても利用できます。npm run generateコマンドを実行して、静的なHTMLファイルを生成します。

12.3. サーバーサイドレンダリング (SSR) 環境へのデプロイ

SSR環境にデプロイするには、Node.jsサーバーが必要です。サーバーを起動して、Nuxt 3アプリケーションをホストします。

13. 実践的なサンプルWebサイトの構築

13.1. ブログサイトの作成

このチュートリアルで学んだ知識を使って、簡単なブログサイトを作成してみましょう。

  • ページ: 記事一覧ページ、記事詳細ページ
  • コンポーネント: 記事コンポーネント
  • データ: JSONファイルまたはAPIから記事データを取得
  • ストア: 記事データの管理

13.2. Eコマースサイトの作成 (概要)

Eコマースサイトは、より複雑なWebサイトですが、Nuxt 3を使って構築できます。

  • ページ: 商品一覧ページ、商品詳細ページ、カートページ、チェックアウトページ
  • コンポーネント: 商品コンポーネント、カートコンポーネント
  • データ: APIから商品データ、カートデータを取得
  • ストア: 商品データ、カートデータの管理
  • ミドルウェア: 認証ミドルウェア

14. Nuxt 3に関する学習リソース

14.1. 公式ドキュメント

Nuxt 3の公式ドキュメントは、最も信頼できる情報源です。

14.2. コミュニティリソース (Discord, GitHub, etc.)

Nuxt 3のコミュニティは活発であり、質問や情報交換を行うことができます。

14.3. チュートリアルとコース

オンラインには、Nuxt 3に関する多くのチュートリアルとコースが存在します。

15. まとめと今後の展望

Nuxt 3は、Vue.jsをベースとした強力なフルスタックフレームワークであり、開発効率の向上、パフォーマンスの最適化、スケーラブルなWebアプリケーション構築を容易にします。このチュートリアルを通して、Nuxt 3の基本的な概念と使い方を理解できたかと思います。

Nuxt 3は、今後も進化し続けるでしょう。最新情報を常に把握し、積極的に活用することで、Web開発スキルを向上させることができます。

このチュートリアルが、Nuxt 3を使ったWebサイト構築の役に立つことを願っています。頑張ってください！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール