【Nuxt3】カウントアップを作成しながら開発環境を整える

# はじめに
こんにちは、プログラミングを始めて約3年のエンジニアのkeitaMaxです。

https://qiita.com/keitaMax/items/f6c26c649379f6e68301

上の記事でNext.jsを使って開発環境を整えていったので、今度はNuxt.jsの環境を整えていきたいと思います。

もしやり方が違ったり、もっといいやり方があるというのがあればぜひ教えていただきたいです。

今回はNext.jsを使用した場合と同様に、以下を目標としたいと思います。

1. 自分のローカル環境でNuxt3の環境を作り、ブラウザで初期表示画面を見る。 
2. カウントアップの画面を作成する。 


# 1. 自分のローカル環境でNuxt.jsの環境を作り、ブラウザで初期表示画面を見る 

https://nuxt.com/docs/getting-started/installation

公式サイトを参考に作成します。

### インストール

まず、自分の開発したいフォルダの中で以下のコマンドを実行します。
```
npx nuxi@latest init nuxt-example-app
```
するといくつか質問が来るので、以下のように答えます。
```
PS C:\develop> npx nuxi@latest init nuxt-example-app
Need to install the following packages:
nuxi@3.11.1
Ok to proceed? (y) y

✔ Which package manager would you like to use?
npm
◐ Installing dependencies...                                                                                                                                                                      23:10:14

> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                                                                                                                                                       23:11:42

added 821 packages, and audited 823 packages in 1m

166 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔ Installation completed.                                                                                                                                                                        23:11:42

✔ Initialize git repository?
Yes
ℹ Initializing git repository...                                                                                                                                                                 23:11:50   

Initialized empty Git repository in C:/develop/nuxt-example-app/.git/
                                                                                                                                                                                                  23:11:50  
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-example-app                                                                                                                                                                            23:11:50  
 › Start development server with npm run dev 
```

これでNuxt.jsの開発環境が構築できました。

### ブラウザで初期画面を表示

まず今回作成したNuxt.jsのディレクトリの中に入ります。

```
cd nuxt-example-app
```

次に、以下のコマンドをたたいて実行します。

```
npm run dev
```
すると以下のように実行結果が表示されます。
```
PS C:\develop\nuxt-example-app> npm run dev

> dev
> nuxt dev

Nuxt 3.11.1 with Nitro 2.9.4                                                                                                                                                                      23:14:11
                                                                                                                                                                                                  23:14:12
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Alt + D in the browser (v1.1.0)                                                                                                                                       23:14:13

ℹ Vite server warmed up in 965ms                                                                                                                                                                 23:14:15
ℹ Vite client warmed up in 1623ms                                                                                                                                                                23:14:16
✔ Nuxt Nitro server built in 742 ms 
 ```
 表示されている`http://localhost:3000`にブラウザでアクセスすると、以下のようにNuxt.jsの初期画面が表示されました。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/0c508942-0d68-012d-f54d-6c3041bf2d3f.png)



# 2. カウントアップの画面を作成する

まずは`nuxt-example-app`フォルダ配下にフォルダを新しく作成します。pagesとviews,components,layoutsフォルダを作成します。

https://nuxt.com/docs/getting-started/views

上記公式を参考に作成しました。

### フォルダの作成

フォルダ構成は以下のようになりました。
```
nuxt-example-app/
     ├── components/
     ├── pages/
     └── views/
     └── layouts/
```
pagesはルーティングに使用します。
viewsはpagesからimportして画面表示を主に担当させます。
componentsはviewsで使用するレイアウトの部品を入れておくのに使用します。
layoutsは共通で使用する`header`や`footer`を入れておくのに使用します。

次に、pages配下に新しく`count.vue`ファイルを作成します。
```vue:count.vue
<script setup lang="ts"></script>

<template>
  <div>ここはカウントアップのページです。</div>
</template>
```

次に`app.vue`ファイルを以下のように修正します。

```vue:app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```
`layouts`フォルダ配下に`default.vue`ファイルを作成し、以下のようにします。
```vue:default.vue
<template>
  <div>
    <slot />
  </div>
</template>
```

そして、以下URLにアクセスをすると`ここはカウントアップのページです!`という文字が表示されていると思います。 
```
http://localhost:3000/count
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/f5e99f87-e6a3-688c-14de-d7668efaf6c7.png)


次に、viewsフォルダの配下に`CountView`というフォルダを作成します。その配下に`index.vue`ファイルを作成します。
```vue:index.vue
<script setup lang="ts"></script>

<template>
  <div>ここはカウントアップのページです。CountViewで表示しています。</div>
</template>
```

この`index.vue`を`count.vue`から読み込ませるように修正します。

```react:count.vue
<script setup lang="ts">
import CountView from "@/views/CountView/index.vue";
</script>
<template>
  <CountView />
</template>
```

また、`tsconfig.json`を以下のように修正します。

```json:tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/views/*": ["views/*"]
    }
  }
}
```

そして再度以下URLにアクセスすると、`ここはカウントアップのページです!CountViewを表示しています！`と表示されていると思います。
```
http://localhost:3000/count
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/e6bdbf3a-2540-4288-1f43-1d47be0240cf.png)

### カウントアップ機能の作成

次に実際のカウントアップの機能を作成していきます。
`CountView/index.vue`を以下のように修正しました。

また、新しく`composables`フォルダ新しく一番上に作成し、その配下に`useCount.ts`を作成しました。

https://zenn.dev/coedo/articles/use-state-nuxt3

この記事を参考に作成しました。


```vue:index.vue
<script setup lang="ts">
const { counter, inc, dec } = useCounter();
</script>

<template>
  <div>
    カウンター: {{ counter }}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>
```
```typescript:useCount.ts
import type { Ref } from "vue";
const inc = (counter: Ref<number>) => () => counter.value++;
const dec = (counter: Ref<number>) => () => counter.value--;

export const useCounter = () => {
  const counter = ref(0);
  return {
    counter: readonly(counter),
    inc: inc(counter),
    dec: dec(counter),
  };
};


```
先ほどのURLにアクセスして確認すると以下のように表示され、カウントアップボタンを押すと数字がカウントアップされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/67c531b5-8247-8bff-3e55-5c4f57ca23b9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/c925cf0b-71fc-3926-6574-eda5ebb582a6.png)

# 困っていること

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/c5b512e7-5d7a-4450-f9f3-b7bbe207c135.png)

こんな感じで正しく動いてそうなのに、vsCode上で赤波線が引かれてしまうのが解決できなかったです。

また、以下のような時も赤波線が引かれてしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/78bb9475-0163-38f4-862a-a6e2b922f846.png)

もしこれの治し方を知っている方がいらっしゃいましたら、教えていただけると助かります。

# おわりに
今回作成したカウントアップのアプリを次回以降、Tailwind CSSを使用して装飾したり、Storybookを使用してテストコードを作成する予定です。

また、最終的にはGitにPushしたときに自動テストを回してOKかNGか判定したり、自動デプロイといったCI/CDができる環境を作成していきたいと思っております。

この記事で質問や、間違っているや、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！


# 参考記事

https://zenn.dev/overflow_offers/articles/20220908-schema_first_development_with_nuxt3

https://zenn.dev/coedo/articles/use-state-nuxt3

# 次の記事

https://qiita.com/keitaMax/items/1d57960504b77503a032