【NOML Viewer】NoSQLの設計書を描画するOSSツールを作成しました。

はじめに

NoSQLの設計書を作成したい！バージョン管理も行いたい！という自分への要望のため、YAMLで記載したスキーマを編集/描画するツールを作成しました。

NOMLViewerです。

NOML（NoSQL Modeling Language）という独自のYAMLフォーマットでNoSQLスキーマを記述し、それを見やすいドキュメントとしてブラウザ上で可視化可能です。

NOML Viewerの使い方

ヘッダー下部、画面中央に「Load Sample」ボタンを押下することで、テキストエリアにサンプルデータが投入されます。すると、ビジュアル化されたスキーマが表示されます。

簡単な使い方は以上です。
編集内容はリアルタイムで反映されるので、お好きに変更して動作を確認してみていただけると利用方法は自然とわかると思います。

主な機能

1. YAMLペースト / ファイルアップロード

テキストエリアにYAMLをペーストするか、.yamlファイルをドラッグ&ドロップで読み込み可能

2. リアルタイムバリデーション

入力したYAMLはリアルタイムでパースされ、構文エラーやスキーマのバリデーションエラーが即座に表示される。

3. スキーマ可視化

コレクション、フィールド、Enum、サブコレクション等がカード形式で表示。
各要素は折りたたみ可能で、スキーマが大きくなった際でも見通しが少なからず良くできます。

4. 論理名（label）表示

日本のDB設計でよく使われる論理名をサポートしています。物理名（英語）の横に日本語の論理名を表示可能。
NOMLではlabelを論理名として表示できるようにしています。

collections:
  users:
    label: ユーザー        # ← 論理名
    fields:
      email:
        type: string
        label: メールアドレス  # ← フィールドにも論理名
        required: true

表示イメージ: users (ユーザー) / email (メールアドレス)

5. ダークモード

Light / Dark / System の3段階でテーマを切り替え可能。
テーマ設定はlocalStorageに保存。

6. 多言語対応（EN/JA）

UIは英語と日本語の切り替えに対応（AI依存）。

7. エディタ折りたたみ

入力エリアを折りたたんでビューアーを全画面表示可能。

8. サンプルスキーマ

「Load Sample」ボタンで、ブログアプリを想定したサンプルスキーマをワンクリックで読み込み可能。

9. クライアント完結

クライアントサイドで完結するため情報漏洩のリスクなし

追加予定機能

• 対応DBを増やす
  • MongoDB, DynamoDB, Cassandraなど

NOML とは

NOML = NoSQL Modeling Language

YAMLベースでNoSQLデータベースのスキーマを記述するための仕様です。（って私が勝手に名付けました）
OpenAPIがYAML/JSONの上に構築されたAPI仕様であるように、NOMLはYAMLの上に構築されたNoSQLスキーマ仕様。（になったらいいなぁ）

NOMLで定義できるもの

項目	説明
コレクション	Firestoreのコレクション（≒RDBのテーブル）
フィールド	ドキュメントのフィールド定義（型、必須、デフォルト値等）
サブコレクション	ネストされたコレクション
Enum	再利用可能な列挙型
リファレンス	コレクション間の参照関係
バリデーション	文字数制限、正規表現、数値範囲などの制約
インデックス	複合インデックス定義
セキュリティルール	CRUD操作ごとのアクセス制御
キー制約	プライマリキー、外部キー、ユニークキー
非正規化	データの非正規化に関する記載
論理名（label）	日本語の論理名を物理名と併記

詳細な使い方

Step 1: 基本構造を書く

version: "0.1"
database: firestore
metadata:
  name: My App
  description: アプリケーションのデータベーススキーマ

collections:
  # ここにコレクション定義を書く

Step 2: コレクションを定義する

collections:
  users:
    label: ユーザー
    description: ユーザーアカウント
    fields:
      email:
        type: string
        label: メールアドレス
        required: true
        description: ユーザーのメールアドレス
        example: "[e-mail]"
      displayName:
        type: string
        label: 表示名
        description: 画面に表示される名前
      createdAt:
        type: timestamp
        label: 作成日時
        default: serverTimestamp

Step 3: Enumを使う

定数値などをEnumとして定義し、フィールドのtypeとして参照可能。

enums:
  UserRole:
    label: ユーザー権限
    description: ユーザーの権限レベル
    values: [user, admin, moderator]

collections:
  users:
    fields:
      role:
        type: UserRole    # ← Enum名をtypeに指定
        label: 権限
        default: user

Step 4: サブコレクションを追加する

Firestoreで利用するサブコレクションも定義可能。

collections:
  users:
    label: ユーザー
    fields:
      email:
        type: string
        required: true

    subcollections:
      settings:
        label: 設定
        description: ユーザーの個人設定
        fields:
          theme:
            type: string
            label: テーマ
            default: light
          notifications:
            type: boolean
            label: 通知設定
            default: true

Step 5: リファレンス（参照）を使う

コレクション間の関連をreference型で表現可能。

collections:
  posts:
    label: 投稿
    fields:
      title:
        type: string
        label: タイトル
        required: true
      authorRef:
        type: reference
        label: 著者
        target: users      # ← 参照先コレクション

Step 6: NOMLViewerで可視化する

作成したYAMLを テキストエリアにペーストするか、YAMLファイルをドラッグ&ドロップして可視化します。

NOMLで記述できる高度な機能

基本的なコレクション/フィールド定義に加え、NOMLは以下のものもサポートしています。

バリデーション

fields:
  username:
    type: string
    validation:
      minLength: 3
      maxLength: 30
      pattern: "^[a-zA-Z0-9_]+$"
  email:
    type: string
    validation:
      format: email
  age:
    type: number
    validation:
      min: 0
      max: 150

ステートマシン遷移

Enumに状態遷移を定義し、ワークフローをドキュメント化。

enums:
  OrderStatus:
    description: 注文のライフサイクル
    values: [pending, paid, shipped, delivered, cancelled]
    transitions:
      pending: [paid, cancelled]
      paid: [shipped, cancelled]
      shipped: [delivered]
      delivered: []    # 終端状態
      cancelled: []    # 終端状態

インデックス定義

Firestoreの複合インデックスをドキュメント化。

collections:
  posts:
    fields:
      # ...
    indexes:
      - name: posts_by_author
        description: 著者ごとの投稿を日付順で取得
        fields:
          - authorId
          - field: createdAt
            order: desc

セキュリティルール

CRUD操作ごとにアクセス制御を記述。

collections:
  users:
    security:
      read:
        - condition: "request.auth != null"
          description: 認証済みユーザーは閲覧可能
      update:
        - condition: "request.auth.uid == resource.data.id"
          description: 自分のプロフィールのみ更新可能
          excludeFields: [role, createdAt]

非正規化の記録

NoSQLで使われる非正規化戦略もドキュメント化可能。

# usersコレクション側（ソース）
displayName:
  type: string
  denormalization:
    targets:
      - collection: posts
        field: authorName
    syncMethod: cloudFunction
    functionName: syncUserDisplayName

# postsコレクション側（コピー先）
authorName:
  type: string
  denormalizedFrom:
    collection: users
    field: displayName

寛容なパース処理

NOMLViewerは 寛容なパース処理（Lenient Parsing） を採用しています。
自分の中でもうまく仕様として項目を充足できている自身がないので以下のようになっています。

• 未定義のパラメータはエラーにならず、単に描画されない
  • これにより前方互換性とカスタム拡張が可能
• 独自のx-プレフィックス付きフィールドも使用可能

fields:
  secretKey:
    type: string
    x-sensitive: true       # ← 独自拡張。エラーにならず無視される
    x-encryption: AES-256

今後の展望

• ビジュアルスキーマビルダー: GUIでスキーマを構築し、YAMLにエクスポート
• Firestoreコード生成: セキュリティルール、インデックス設定、TypeScript型定義の自動生成
• マルチDB対応: MongoDB, DynamoDB, Cassandra等
• エクスポート機能: PDF, HTMLでのドキュメント生成
• VS Code拡張機能: エディタ内でNOMLファイルをプレビュー
• チームコラボレーション: スキーマの共有機能

まとめ

NOMLViewerは、NoSQLデータベースの設計書をコードとして管理するためのツールです。

• YAMLで書くのでGitでバージョン管理できる
• コードレビューでスキーマ変更を追跡できる
• チーム全員が同じフォーマットでスキーマを理解できる

「Firestoreのスキーマ、どこにドキュメントあるっけ？」を解決するツールです。ぜひ試してみてください。

GitHubリポジトリ:
https://github.com/nomlviewer-developer/noml-viewer

---

おわりに

RDB版としてREMLViewer（Relational Entity Modeling Language）も開発しています。RDBスキーマをYAMLで記述し、ER図付きで可視化するツールです。
そのうち公開します。