NestJSでOpenAPIを導入する手順

:::note alert
npmはインストールされている前提になります
エディター（VSCode）はインストールされている前提になります
:::

# 1. プロジェクトを作成する
npmがインストールされている前提です。
ターミナルで以下のコマンドを実行すれば、新しいNestプロジェクトを作成できます。

```:ターミナル
$ npm i -g @nestjs/cli
$ nest new <好きなプロジェクト名をここで入力する>
```

どのパッケージが良いか聞かれるので、好みのパッケージを選択してEnterを押します。
```:ターミナル
? Which package manager would you ❤️  to use? (Use arrow keys)
❯ npm 
  yarn 
  pnpm 
```

```:ターミナル
CREATE openapi/.eslintrc.js (663 bytes)
CREATE openapi/.prettierrc (51 bytes)
CREATE openapi/README.md (3340 bytes)
CREATE openapi/nest-cli.json (171 bytes)
CREATE openapi/package.json (1946 bytes)
CREATE openapi/tsconfig.build.json (97 bytes)
CREATE openapi/tsconfig.json (546 bytes)
CREATE openapi/src/app.controller.ts (274 bytes)
CREATE openapi/src/app.module.ts (249 bytes)
CREATE openapi/src/app.service.ts (142 bytes)
CREATE openapi/src/main.ts (208 bytes)
CREATE openapi/src/app.controller.spec.ts (617 bytes)
CREATE openapi/test/jest-e2e.json (183 bytes)
CREATE openapi/test/app.e2e-spec.ts (630 bytes)

✔ Installation in progress... ☕

🚀  Successfully created project openapi
👉  Get started with the following commands:

$ cd openapi
$ npm run start

                                         
                          Thanks for installing Nest 🙏
                 Please consider donating to our open collective
                        to help us maintain this package.
                                         
                                         
               🍷  Donate: https://opencollective.com/nest
```

作成したプロジェクトに移動しましょう。
```:ターミナル
cd <作成したプロジェクトがあるディレクトリのパスを入力>
```

以下コマンドでVSCodeを開きます。

```：ターミナル
code .
```

# 2. OpenAPI（Swagger）パッケージを導入する


プロジェクトまで移動したら、ターミナルで以下コマンドを入力してください。
```:ターミナル
npm install --save @nestjs/swagger
```
VSCode上で「command + P」を押下後、「main.ts」と入力して対象画面を選択します。
以下ファイルに「＋」のコードを追記します。

```diff_JavaScript:main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
+ import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

+ const config = new DocumentBuilder()
+   .setTitle('Cats example')
+   .setDescription('The cats API description')
+   .setVersion('1.0')
+   .addTag('cats')
+   .build();
+ const document = SwaggerModule.createDocument(app, config);
+ SwaggerModule.setup('api', app, document);
  
  await app.listen(3000);
}
bootstrap();
```

NestJSを起動します。

```:ターミナル
npm run start
```

```
> openapi@0.0.1 start
> nest start

[Nest] 42623  - 2024/05/12 22:21:50     LOG [NestFactory] Starting Nest application...
[Nest] 42623  - 2024/05/12 22:21:50     LOG [InstanceLoader] AppModule dependencies initialized +13ms
[Nest] 42623  - 2024/05/12 22:21:50     LOG [RoutesResolver] AppController {/}: +23ms
[Nest] 42623  - 2024/05/12 22:21:50     LOG [RouterExplorer] Mapped {/, GET} route +4ms
[Nest] 42623  - 2024/05/12 22:21:50     LOG [NestApplication] Nest application successfully started +4ms
```
以下をクリックします。

http://localhost:3000/api

OpenAPI（Swagger）が表示されます。

![スクリーンショット 2024-05-12 22.26.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/a3f5ce94-4f6d-c0ec-0281-e6a346dd1c04.png)

# 3. おまけ

OpenAPI（Swagger）コードの書き方は以下サイトで確認できます。

https://editor.swagger.io/

こんな感じです。

![スクリーンショット 2024-05-12 22.37.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744730/3e9ea42c-b505-e607-4d78-eeb3b58639fc.png)

NestJS内での書き方の詳細については以下公式ドキュメントを参照してください。

https://docs.nestjs.com/openapi/types-and-parameters

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