🙆‍♀️

NestJSでSwaggerを使う

2023/12/01に公開

TypeScript

Overview

最近、新しい技術が好きな人たちに、NestJSが流行っているようで、私も時々使っているのですが、Swaggerという技術を使って、REST APIと通信をするのも流行っているようで、試してみました。

NestJSの環境構築の手順
https://docs.nestjs.com/

チュートリアル

summary

そもそもSwaggerとは何か?
APIの設計を簡単にするために作られたツールらしい😫

https://swagger.io/

試しに構築してみた

main.tsに設定を追加する

import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';

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();

新しいmoduleの作成を行う。

postsというディレクトリを作成してその中に、雛形のファイルを自動生成する。

nest generate module posts

Controllerを作成する。

nest generate controller posts

serviceという別のモジュールを作成して、Textはそこに配置する。APIのデータと思われる。

nest generate service posts

posts.interface.ts
インターフェイスを定義する。データの型を定義して、exportする。

インターフェイス

import { ApiProperty } from '@nestjs/swagger';

export class PostType {
  id: string;
  content: string;
  author: string;
  created_at: string;

  @ApiProperty()
  title: string;

  @ApiProperty()
  description: string;
}

posts.module.ts
こちらは、コマンドを打つと自動生成される

モジュール

import { Module } from '@nestjs/common';
import { PostsController } from './posts.controller';
import { PostsService } from './posts.service';

@Module({
  controllers: [PostsController],
  providers: [PostsService],
})
export class PostsModule {}

posts.controller.ts
APIを操作するコントローラーを作成する

コントローラー

import { Body, Controller, Get, Post } from '@nestjs/common';
import { PostsService } from './posts.service';
import { PostType } from './posts.interface';
import { ApiBody } from '@nestjs/swagger';

@Controller('posts')
export class PostsController {
  constructor(private readonly postsService: PostsService) {}

  @Get()
  findAll() {
    return this.postsService.findAll();
  }

  @Post()
  @ApiBody({ type: PostType })
  create(@Body() post: PostType): void {
    this.postsService.create(post);
  }
}

posts.service.ts
ダミーの配列と、データを入れるメソッドを作成する

サービス

import { Injectable } from '@nestjs/common';
import { PostType } from './posts.interface';

// 全てのブログメッセージを返す
@Injectable()
export class PostsService {
  // このクラス内でのみアクセス可能なプロパティ
  private readonly posts: PostType[] = [];

  findAll() {
    return this.posts;
  }

  create(post: PostType) {
    this.posts.push(post);
  }
}

Swaggerを使ってみた

thoughts

Swaggerの環境構築をしたが、POSTができない???
なんでかなと思ったら、@ApiBody({ type: PostType })の設定が追加されておりませんでした💦
ドキュメントだけだとわかりづらいです💦

こちらが完成品のソースコード

Overview

summary

試しに構築してみた

thoughts

Discussion