Visual Studio CodeでSwagger viewerを導入する方法

当ページのリンクには広告が含まれています。

✓目次

• この記事の対象者
• 導入手順

この記事の対象者

・　Visual Studio Codeを使っている人

・　Swagger EditorをVisual Studio Codeで使いたい人

導入手順

• まずはVisual Studio Codeをインストールしましょう。インストール方法は以下の記事を参照ください。

• Visual Studio Codeを起動し、左側の拡張機能をクリックし、”Swagger viewer”と検索窓に入力して検索しましょう。
• Swagger viewerが表れるので、インストールを実施。

• インストールが完了したら、Visual Studio Codeを再起動しましょう。これでインストール完了です。
• Openapi specのサンプルをVisual Studio Codeに記述しましょう。Visual Studio Code上で新しいファイルを作成します。openapi.yaml等任意のファイル名でOKです。
• 新規作成したyamlファイルに、以下の、Open API Spec v3.0のPetStore.yamlをコピペしてください。

openapi: "3.0.0"
info:
  version: 1.0.0
  title: Swagger Petstore
  license:
    name: MIT
servers:
  - url: http://petstore.swagger.io/v1
paths:
  /pets:
    get:
      summary: List all pets
      operationId: listPets
      tags:
        - pets
      parameters:
        - name: limit
          in: query
          description: How many items to return at one time (max 100)
          required: false
          schema:
            type: integer
            format: int32
      responses:
        '200':
          description: A paged array of pets
          headers:
            x-next:
              description: A link to the next page of responses
              schema:
                type: string
          content:
            application/json:    
              schema:
                $ref: "#/components/schemas/Pets"
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
    post:
      summary: Create a pet
      operationId: createPets
      tags:
        - pets
      responses:
        '201':
          description: Null response
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
  /pets/{petId}:
    get:
      summary: Info for a specific pet
      operationId: showPetById
      tags:
        - pets
      parameters:
        - name: petId
          in: path
          required: true
          description: The id of the pet to retrieve
          schema:
            type: string
      responses:
        '200':
          description: Expected response to a valid request
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Pet"
        default:
          description: unexpected error
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/Error"
components:
  schemas:
    Pet:
      type: object
      required:
        - id
        - name
      properties:
        id:
          type: integer
          format: int64
        name:
          type: string
        tag:
          type: string
    Pets:
      type: array
      items:
        $ref: "#/components/schemas/Pet"
    Error:
      type: object
      required:
        - code
        - message
      properties:
        code:
          type: integer
          format: int32
        message:
          type: string

• 次にSwagger Viewerを起動します。Shift + Alt + Pの3つのキーを押下してください。
  するとVisual Studio Codeの右側に、Swagger UIが表示されます。

Swaggerを使ったREST APIの設計方法について

Swaggerを用いてREST APIの設計書を作成する方法は、以下のUdemy講座を確認ください。30日以内であれば、無料（返金保証付き）です。

【視聴期限無し】UdemyでSwaggerを学ぶ【30日間返金保証付き】

関連書籍

リンク

関連記事

• Dockerを用いてSwagger Editorを動作させる方法もまとめています。

• REST APIを設計する際に気を付けるべき主なポイントを以下の記事にまとめています。