Ajvのスキーマ作成ツール「JSON to Ajv Schema Converter」

Ajvとは

Ajv (Another JSON Validator)はJavaScriptで使われるJSON Schemaバリデーションを行うためのライブラリです。

以下のようにスキーマ(Schema)を作成して、GETやPOSTのJSONをvalidate関数でバリデーションを行います。

import { describe, it, expect } from 'vitest'
import axios from 'axios'
import Ajv from 'ajv'

const ajv = new Ajv()
const productSchema = {
  type: 'object',
  properties: {
    id: {
      type: 'integer'
    },
    title: {
      type: 'string'
    }
  },
  required: [
    'id',
    'title'
  ],
  additionalProperties: false
}

describe('Products API', () => {
  it('productsのid, titleのテスト', async () => {
    const res = await axios.get('https://dummyjson.com/products/1?&select=id,title')
    const validate = ajv.compile(productSchema)
    const valid = validate(res.data)
    if (!valid) console.log(validate.errors)
    expect(valid).toBe(true)
  })
})

import { describe, it, expect } from 'vitest'
import axios from 'axios'
import Ajv from 'ajv'

const ajv = new Ajv()
const productSchema = {
  type: 'object',
  properties: {
    id: {
      type: 'integer'
    },
    title: {
      type: 'string'
    }
  },
  required: [
    'id',
    'title'
  ],
  additionalProperties: false
}

describe('Products API', () => {
  it('productsのid, titleのテスト', async () => {
    const res = await axios.get('https://dummyjson.com/products/1?&select=id,title')
    const validate = ajv.compile(productSchema)
    const valid = validate(res.data)
    if (!valid) console.log(validate.errors)
    expect(valid).toBe(true)
  })
})

スキーマのルールを手作業で1つずつ作成するのは時間がかかります。

しかし、JSON to AJV Schema Converterを使用すればレスポンスやリクエストのJSONを貼り付けるだけで、自動的にスキーマが画面右側に生成されます。

最近はJSONデータを生成AIに送信してスキーマを作成する人もいますが、生成AIが作成したスキーマは書き方が古かったり、間違っていることがあるので、こちらのツールを使用して生成することをオススメします。

JSON to Ajv Schema Converterとは

JSON to Ajv Schema Converterは入力された生のJSONデータからAjv（JSON Schema Validator）互換のJSON SchemaおよびTypeScriptのinterfaceをリアルタイムで自動生成するWebツールです。

JSON to Ajv Schema Converter

ちなみにJSON to Ajv Schema Converterの作者はiwb.jpの管理人で、貼り付けたJSONのデータは外部には送信されないので安全です。

数値の範囲やallErrors: trueは自動で追加されない

数値の範囲はJSONのデータから生成することはできないので手動で追加が必要です。

また、すべてのエラーを出力する「allErrors: true」も処理速度重視のため付けていないので、必要な方は以下のように追加してください。

import Ajv from 'ajv'

const ajv = new Ajv({ allErrors: true })

const productSchema = {
  type: 'object',
  properties: {
    // 1以上の整数（IDなど）
    id: {
      type: 'integer',
      minimum: 1
    },
    // 0より大きく100以下の価格（小数も許容）
    price: {
      type: 'number',
      exclusiveMinimum: 0,
      maximum: 100000
    },
    // 10の倍数かつ10〜100の範囲（在庫数やステップ単位の入力など）
    quantity: {
      type: 'integer',
      minimum: 10,
      maximum: 100,
      multipleOf: 10
    }
  },
  required: ['id', 'price', 'quantity'],
  additionalProperties: false
}

const validate = ajv.compile(productSchema)

// テスト実行
const invalidData = {
  id: 0,           // minimum: 1 違反
  price: 0,        // exclusiveMinimum: 0 違反（0不可）
  quantity: 25     // multipleOf: 10 違反（10の倍数ではない）
}

if (!validate(invalidData)) {
  console.log(validate.errors)
}

import Ajv from 'ajv'

const ajv = new Ajv({ allErrors: true })

const productSchema = {
  type: 'object',
  properties: {
    // 1以上の整数（IDなど）
    id: {
      type: 'integer',
      minimum: 1
    },
    // 0より大きく100以下の価格（小数も許容）
    price: {
      type: 'number',
      exclusiveMinimum: 0,
      maximum: 100000
    },
    // 10の倍数かつ10〜100の範囲（在庫数やステップ単位の入力など）
    quantity: {
      type: 'integer',
      minimum: 10,
      maximum: 100,
      multipleOf: 10
    }
  },
  required: ['id', 'price', 'quantity'],
  additionalProperties: false
}

const validate = ajv.compile(productSchema)

// テスト実行
const invalidData = {
  id: 0,           // minimum: 1 違反
  price: 0,        // exclusiveMinimum: 0 違反（0不可）
  quantity: 25     // multipleOf: 10 違反（10の倍数ではない）
}

if (!validate(invalidData)) {
  console.log(validate.errors)
}

値がnullの場合はセレクトボックスから選択可能

JSONをnullの値で貼り付けた場合は、ほかの型である可能性もあるので選択して変更できるようになっています。( title string R N の部分)

N = null, R = required のことで、デフォルトだとJSONに貼り付けたものをすべてrequiredに入れていますが、プロパティの「R」をクリックすることでrequiredから削除できます。

JSONデータにurlやemailが使用されている場合は自動的にformatが使用されますが、Ajvではformatの設定は別途「import addFormats from 'ajv-formats'」をimportして、addFormats(ajv)が必要なので、追加し忘れないように、右下にコードが表示されます。