---
title: "Nuxtを始めよう"
description: "Nuxt 3を使って新しいWebプロジェクトを始めるための基本的な手順を紹介します。このガイドでは、プロジェクトの設定から構築までを簡潔に説明します。"
canonical_url: "https://nuxtation.vercel.app/blog/nuxt-start"
---
# Nuxtを始めよう

> Nuxt 3を使って新しいWebプロジェクトを始めるための基本的な手順を紹介します。このガイドでは、プロジェクトの設定から構築までを簡潔に説明します。

## イントロダクション

Nuxtは、ユニバーサル（SSR）アプリ、シングルページアプリ（SPA）、静的生成アプリ（SSG）として開発・デプロイ可能なVueアプリを作成するための上位のNode.jsウェブ開発フレームワークです。パフォーマンスと生産性に優れたフルスタックのウェブアプリやウェブサイトを安心して作成できます。

Nuxt を使ってアプリを作成する前に、Nuxtプロジェクトのインストール方法とNuxtのディレクトリ構造を理解する必要があります。[Nuxtオフィシャルサイト](https://nuxt.com/)で詳細を確認できます。

## Nuxtプロジェクトの作成

1. Node.js のバージョンを互換性のあるバージョン（^18.0.0）にアップグレードしてください。<br />

Node.jsの管理方法は環境や好みに応じて異なります。<br />

以下のコマンドでNode.jsのインストールされたバージョンを確認します。```bash
node -v # 出力例: v18.18.2"
```
2. Nuxtプロジェクトの初期化<br />

Nuxtプロジェクトを作成するには、以下のコマンドを実行します(作成するアプリ名を`nuxt-app`としています)。```bash
nuxi@latest init nuxt-app"
```

<br />

このコマンドは、Nuxtアプリケーションのボイラープレートを作成し、次の手順を指示します。```bash [インストールプロセスの一例]
✔ Which package manager would you like to use?
  ○ npm
  ● pnpm ← お好みのものを選択してください
  ○ yarn
  ○ bun
◐ Installing dependencies...
Packages: +675
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 740, reused 675, downloaded 0, added 675, done
node_modules/.pnpm/esbuild@0.19.9/node_modules/esbuild:
   Running postinstall script, done in 379ms

> nuxt-app@ postinstall /<install directory>/nuxt-app
> nuxt prepare

✔ Types generated in .nuxt

devDependencies:
+ @nuxt/devtools 1.0.6
+ nuxt 3.8.2
+ vue 3.3.12
+ vue-router 4.2.5

Done in 1m 10.5s
✔ Installation completed.

✔ Initialize git repository?
● Yes / ○ No　←これもお好みで
ℹ Initializing git repository...

Initialized empty Git repository in /<install directory>/nuxt-app/.git/
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-app
 › Start development server with pnpm run dev
```
3. 依存関係のインストール<br />

プロジェクトディレクトリに移動し、依存関係をインストールします。

```bash
cd nuxt-app
```

```bash
pnpm install
```

1. 開発サーバの起動<br />

最後に、以下のコマンドで開発サーバを起動します。```bash
pnpm dev
```

<br />

これにより、以下のような出力が表示され、ブラウザで  **http://localhost:3000** にアクセスすることで、作成したNuxtアプリケーションを見ることができます。```bash
> nuxt-app@ dev /<install directory>/nuxt-app
  > nuxt dev

  Nuxt 3.8.2 with Nitro 2.8.1

    ➜ Local:    http://localhost:3000/
    ➜ Network:  use --host to expose

    ➜ DevTools: press Shift + Option + D in the browser (v1.0.6)


  ℹ Vite server warmed up in 2838ms
  ℹ Vite client warmed up in 3357ms
  ✔ Nitro built in 1180 ms
```
2. まとめ<br />

この記事では、Nuxt を使って新しいプロジェクトを始める基本的な手順を紹介しました。これらのステップに従って、Nuxtベースのプロジェクトを簡単に開始できます。

## Nuxtのプロジェクト構造を理解する

Nuxtプロジェクトと通常のVueプロジェクトは、以下のように異なる構造を持っています。

```bash [Nuxtプロジェクト構造]
├── package.json
├── tsconfig.json
├── nuxt.config.ts
├── app.vue
├── README.md
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
└── node_modules
    └── ...
```

Nuxtプロジェクトには `/src/` ディレクトリがないことがおわかりいただけると思います。Vite(Vue)プロジェクトの  `/src/` ディレクトリにあるものはすべてNuxtプロジェクトのルートディレクトリに移動されます。Nuxi CLIとViteで作成したスタータープロジェクトの違いを確認することができます。

```bash [Vueプロジェクト構造]
├── package.json
├── vite.config.js
├── index.html
├── node_modules
│ └── ...
├── public
│ └── favicon.ico
└── src
    ├── App.vue
    ├── main.js
    ├── components
    │ └── HelloWorld.vue
    └── assets
        └── logo.png
```

つまり、Nuxi CLIでは `/src/` ディレクトリが省略されているのです。しかし、Viteプロジェクトと同じように、Nuxtプロジェクトでの基本構造から、プロジェクトのルートディレクトリに、Viteプロジェクトとほぼ同じ以下のディレクトリを配置して、アプリを構築・成長させることができます。

```bash [Nuxtプロジェクトディレクトリ]
├── components
├── composables
├── assets
├── public
├── layouts
├── pages
├── plugins
├── store
├── server
├── middleware
└── modules
```

Nuxtプロジェクトでは、`/routes/` ディレクトリと `router.js` ファイルが不要になったことに注意してください。Nuxt は自動的に [Vue Router](https://router.vuejs.org/) を統合し、 `/pages/` ディレクトリに作成した `.vue` ファイルを基に、アプリのすべてのルートを生成します。つまり、プロジェクトの依存関係として `package.json` ファイルに手動で Vue Router をインストールする必要がないことも意味します。この作業はNuxtが自動的に行ってくれます。

### `nuxt.config.ts` ファイル

Nuxtの設定は、nuxt.config.tsファイルで行われます。このファイルでは、Nuxtの動作をカスタマイズすることができます。

```ts [nuxt.config.ts]
export default defineNuxtConfig({
})
```

### `server`ディレクトリ

`/server/`ディレクトリは、APIエンドポイントやサーバーミドルウェアなど、Nuxtアプリのサーバーサイドロジックを作成するために使用されます。ここに含まれるファイルは、Nuxtによって自動的にロードされ、プロジェクトのAPIエンドポイントを作成します。ただし、外部かつリモートのAPIを使用する場合は、このディレクトリを気にする必要はありません。このディレクトリについて詳しく知りたい方は、[https://nuxt.com/docs/guide/directory-structure/server](https://nuxt.com/docs/guide/directory-structure/server)をご覧ください。

### `.gitignore` ファイル

`.gitignore`ファイルには、Gitリポジトリに含めないファイルやディレクトリを指定します。このファイルで git が無視するファイルやフォルダのデフォルトの一覧は次のとおりです。

```bash [.gitignore]
# Nuxt dev/build outputs
.output
.data
.nuxt
.nitro
.cache
dist

# Node dependencies
node_modules

# Logs
logs
*.log

# Misc
.DS_Store
.fleet
.idea

# Local env files
.env
.env.*
!.env.example
```

### `.nuxt` と `.output` ディレクトリ

`.nuxt`ディレクトリは、**開発モード**でVueアプリを生成するために使用されます。`.output`ディレクトリは、ビルド時に生成されるファイルを含みます。

## まとめ

この記事では、Nuxt を使ったプロジェクトの開始方法と基本的なプロジェクト構造について解説しました。これらの基本を理解することで、Nuxtを使用した開発がよりスムーズになります。

SSRやSSGのVueアプリを作成する場合、Nuxtは素晴らしい選択肢です。SPAモードを選んでも、Nuxtのフルパワーはユニバーサルモードまたはサーバーサイドレンダリング(SSR)にあります。しかし、クライアントサイドのみで実行されるSPAを開発したい場合は、バニラVueの使用を検討するのが良いでしょう。SEOの懸念がある場合は、Nuxtを選択する説得力のある理由があります。


## Sitemap

See the full [sitemap](https://nuxtation.vercel.app/sitemap.md) for all pages.