Nuxt3の開発環境を作り冒頭の部分を取り上げる

# はじめに
こんにちは！
最近実務でVue.jsを使う機会が増えてきたので実際に自分で環境を作りたいなと思ったので作っていきます。
今回はNuxt3を使っていきます。
情報量が膨大なためいくつかに分けて解説できればと思います。

[公式ドキュメント](https://nuxt.com/)を参考に記載をしています。

## Nuxtとは...
Nuxtは、Vue.jsを使用して、直感的で拡張可能なフルスタックのWebアプリケーションやWebサイトを作成するためのフリーでオープンソースのフレームワークです。
Vue.jsと違い UI だけではなく SSR(サーバサイドレンダリング)を含めたレンダリング機能や Meta タグ、ルーティング、エラーハンドリングなど本格的なアプリケーションの構築に必須となるさまざまな機能を事前に組み込むことでアプリケーション開発を効率的に行うことができます。

## 環境構築
早速環境を作っていきます。

※node.jsのバージョンは`16.10.0 以上`を推奨しているため推奨バージョン以上でお願いします。

```sh:ターミナル
# nodeインストール
$ nodenv install 16.10.0

# nodeバージョン確認
$ node -v
16.10.0

# フォルダ作成
$ npx nuxi init <プロジェクト名>

$ cd <プロジェクト名>

# 必要な依存関係をインストール
$ yarn install

# 起動
$ yarn dev
```

これで[localhost:3000](http://localhost:3000/)にアクセスできますね。
![スクリーンショット 2023-07-17 23.18.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/067f3198-a63c-6401-a8ec-4094cae613a2.png)


環境構築は以上になります。

## ディレクトリ構成について
Nuxt3 ではプロジェクト作成時に`.node_modules`以外のディレクトリは存在しませんがそれぞれ異なる役割を持っているディレクトリを追加していくことでアプリケーションを構築していきます。
ディレクトリ名は Nuxt3 の中で事前に決められておりコンポーネントを利用する場合は`components`ディレクトリを作成します。
`components`ディレクトリの下にコンポーネントファイルを保存することで Auto Imports 機能により import 文を利用しなくても自動でコンポーネントの import が行われます。
そのためディレクトリ名や作成したディレクトリがどのような役割を持っているのかをディレクトリ毎に理解しておく必要があります。

この記事では`pages`, `layouts`, `components`について解説していきます。

### pagesディレクトリ
ページ構成を作っていきます。

rootディレクトリに`pages`というディレクトリを作成します。
作成したpagesの中に`index.vue`ファイルを作成します。

ディレクトリ構成は下記になります。
```sh:プロジェクト名
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages ←新規作成
    └── index.vue ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
```

`index.vue`は仮で下記のように書きます。
```vue:index.vue
<template>
    <h1>Hello World</h1>
</template>
```

その後rootディレクトリの`app.vue`を修正します。

`pages/index.vue`ファイルを作成しただけでブラウザ上の表示が変わるわけではなりません。

`pages/index.vue`ファイルの内容を表示させるためには`app.vue`ファイルに`NuxtPage`コンポーネントを追加する必要があります。
`NuxtPage`タグを追加すると`NextPage`タグを追加した箇所に`pages/index.vue`ファイルのコンテンツが表示されます。


```vue:app.vue
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

↓

<template>
  <div>
    <NuxtPage />
  </div>
</template>
```

これで`app.vue`から`pages`の`index.vue`コンポーネントが入ってきます。
ページを追加したい場合に`pages`ディレクトリを利用します。Nuxtではファイルベースルーティングを採用しているので`pages`ディレクトリの中にファイルを作成することで自動でルーティングが設定されます。

下記で新規ページを追加したいと思います。
パスは作成したファイル名になります。
例として下記のように作成した場合は...
```sh:プロジェクト名
.
├── pages
    └── sports.vue ←新規作成
・
```
`pages/sports.vue`というファイルを作成した場合はパスが`/sports`になります。
中身はIndex.vueと同様にします。

```vue:sports.vue
<template>
  <div>
    Sports
  </div>
</template>
```

### Layoutsディレクトリ
`index.vue`や、他作成したファイルのページ間を移動できるナビゲーションを追加したい場合にどちらのファイルにも同じ内容を追加することは非効率です。
そのためレイアウトファイルを作成することでページで共通する内容を1つのファイルに記述することができ、レイアウトファイルを共有するすべてのページに適用することができます。

レイアウトを利用したい場合には layouts ディレクトリを作成して default.vue ファイルを作成してください。


ディレクトリ構成は下記になります。
```sh:プロジェクト名
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages
├── layouts ←新規作成
    └── default.vue ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
```

`default.vue`に`<slot />`は必須です。

```vue:default.vue
<template>
  <div>
    <nav>ナビゲーションバー</nav>
    <slot />
  </div>
</template>
```

`layouts`フォルダに`default.vue`ファイルを作成してだけでは何も変化はありません。
`app.vue`ファイルに`NuxtLayout`タグを追加し`NuxtPage`タグをラップします。
```vue:app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```
`app.vue`ファイルに`NuxtLayout`タグを追加することで自動で`layouts`ディレクトリに存在する`default.vue`ファイルの内容が適用されます。

### componentsディレクトリ
再利用可能なコンポーネントファイルを保存するために`components`ディレクトリを作成します。
その場合`プロジェクト`直下に`components`ディレクトリを作成して、その中に各コンポーネントを作成しましょう。

ディレクトリ構成は下記になります。
```sh:プロジェクト名
.
├── .nuxt
├── node_modules
├── public
├── server
├── pages
├── layouts
├── components ←新規作成
├── .gitignore
├── .npmrc
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
└── tsconfig.json
```

作成した`components`ディレクトリに`Navbar.vue`ファイルを作成します。`Navbar.vue`ファイルは`default.vue`ファイルでナビテーションバーを設定するために利用します。
(`pages/sports.vue`も作成して表示をします。)

```vue:Navbar.vue
<template>
  <nav>
    <a href="/">Home</a>
    <br>
    <a href="/sports">Sports</a>
  </nav>
</template>
```

作成した`Navbar`コンポーネントを`layouts`の`default.vue`ファイルに追加します。Vue.js では別ファイルに記述したコンポーネントを利用する場合には import を行う必要があります。Nuxt 3 では components ディレクトリに保存したコンポーネントファイルは自動で import されるため import 処理を行う必要がありません。

```vue:default.vue
<template>
  <div>
    <Navbar />
    <slot />
  </div>
</template>
```

これで上部にリンクが設定されます。

![スクリーンショット 2023-07-17 18.32.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2607495/b201faed-4473-1148-cd71-5ebeaf26c4d4.png)



## 最後に
駆け足で冒頭の部分を説明してしまいました。
今回のはNuxt3のごく一部になります。
今後記事にしていきますので続きとしてみていただけると嬉しいです。

またNuxt3を使ってみてとても楽しいです。
Nuxt3で何かプロジェクトを作れないかなと、日々考えています。

そして是非弊社で一緒に働きたい、という方を募集しております。
下記URLから応募できますので少しでも興味を持っていただけたら応募してください。


https://sportsbull.jp/about/#recruit