はじめに

Constela は「コンパイラファースト」のプログラミング言語です。JavaScript/TypeScriptを書かずに、JSONだけでUIを定義できます。コンパイラが検証・最適化してからブラウザで実行します。

今回の v0.8.0 では、AI時代のUI開発を見据えた大幅なアップデートを行いました。この記事では、新しく追加された5つの機能を紹介します。

1. 「Did you mean?」エラー提案

タイポをしたとき、Constelaが正しい名前を提案してくれるようになりました。

Error [UNDEFINED_STATE] at /view/children/0/value/name

  Undefined state reference: 'count'

  Did you mean 'counter'?

Levenshtein距離を使って類似名を検出しています。AIがコードを生成する際にも、コンパイル時のエラーからの修正が容易になります。

2. Style System - CVAライクなスタイル管理

Tailwind CSSユーザーにはおなじみの CVA (Class Variance Authority) に似たスタイルシステムを導入しました。

スタイルプリセットの定義

{
  "styles": {
    "button": {
      "base": "px-4 py-2 rounded font-medium transition-colors",
      "variants": {
        "variant": {
          "primary": "bg-blue-500 text-white hover:bg-blue-600",
          "secondary": "bg-gray-200 text-gray-800 hover:bg-gray-300",
          "ghost": "bg-transparent hover:bg-gray-100"
        },
        "size": {
          "sm": "text-sm h-8",
          "md": "text-base h-10",
          "lg": "text-lg h-12"
        }
      },
      "defaultVariants": {
        "variant": "primary",
        "size": "md"
      }
    }
  }
}

スタイルの参照

{
  "kind": "element",
  "tag": "button",
  "props": {
    "className": {
      "expr": "style",
      "name": "button",
      "variants": {
        "variant": { "expr": "state", "name": "buttonVariant" },
        "size": { "expr": "lit", "value": "lg" }
      }
    }
  },
  "children": [
    { "kind": "text", "value": { "expr": "lit", "value": "Click me" } }
  ]
}

ポイント:

バリアントを state で動的に切り替え可能
コンパイル時に未定義のスタイル・バリアントを検出
既存の Tailwind CSS クラスとそのまま使える

3. @constela/builder - TypeScriptでも書ける

「JSONを直接書くのはちょっと…」という方向けに、TypeScriptで書けるBuilder APIも用意しました。

カウンターアプリの例

import {
  createProgram, numberField, action, increment,
  button, text, state, onClick
} from '@constela/builder';

const counter = createProgram({
  state: { count: numberField(0) },
  actions: [action('increment', [increment('count')])],
  view: button({ onClick: onClick('increment') }, [text(state('count'))])
});

40以上のビルダー関数

DSLのすべての要素をカバーしています：

カテゴリ	関数
Expression	`lit`, `state`, `variable`, `bin`, `cond`, `get`, `add`, `eq`, `and`, `or` など
State	`numberField`, `stringField`, `booleanField`, `listField`, `objectField`
Action	`action`, `set`, `update`, `increment`, `push`, `fetch`, `navigate` など
View	`element`, `div`, `button`, `text`, `ifNode`, `each`, `component`, `slot`
Event	`onClick`, `onInput`, `onChange`, `onSubmit`

JSONと同じメリットを享受

TypeScriptで書いても、最終的にはJSONに変換されます。つまり：

コンパイル時エラー検出 - 未定義のstateやactionを参照していたらエラー
「Did you mean?」提案 - タイポしても正しい名前を教えてくれる
構造化されたエラー出力 - --json フラグでAI連携もそのまま可能

4. CLI の大幅強化

validate コマンド

コンパイルせずに高速バリデーションできます。

# 単一ファイル
constela validate app.json

# ディレクトリ全体
constela validate --all src/routes/

inspect コマンド

プログラムの構造を可視化できます。

$ constela inspect app.json

State (2 fields):
  count: number = 0
  items: list = []

Actions (2):
  increment: update count +1
  addItem: push to items

View Tree:
  element<div>
    text: state.count
    element<button> onClick=increment

新しいフラグ

フラグ	説明
`--json`	JSON出力（AIツール連携向け）
`--watch`	ファイル監視して自動再コンパイル
`--verbose`	各パスのタイミング表示
`--debug`	内部デバッグ情報

--watch で開発効率アップ

constela compile app.json --watch

ファイルを保存するたびに自動でコンパイルされます。

--verbose で詳細表示

$ constela compile app.json --verbose

[1/3] Validating schema... OK (2ms)
[2/3] Analyzing semantics... OK (1ms)
[3/3] Transforming AST... OK (0ms)

Summary:
  States: 2
  Actions: 3
  View nodes: 12

Compilation successful (5ms total)

5. AI/LLM連携のための設計

今回の更新は「AIがUIを生成する時代」を見据えています。

機能	AIにとってのメリット
`--json` 出力	構造化されたエラー情報を受け取れる
エラー提案	修正箇所を特定しやすい
Style System	一貫したスタイル定義を再利用
JSON DSL	AIが生成しやすいフォーマット

例えば、LLMが生成したJSONにエラーがあった場合：

$ constela compile app.json --json

{
  "success": false,
  "errors": [{
    "code": "UNDEFINED_STATE",
    "message": "Undefined state reference: 'count'",
    "path": "/view/children/0/value/name",
    "suggestion": "Did you mean 'counter'?",
    "context": { "availableNames": ["counter", "items"] }
  }],
  "diagnostics": { "duration": 5 }
}

この情報をLLMにフィードバックすれば、自動で修正できます。

完全なTodoリストの例

JSONだけで完全なTodoリストアプリが作れます：

{
  "version": "1.0",
  "styles": {
    "todoItem": {
      "base": "flex items-center gap-2 p-2",
      "variants": {
        "done": {
          "true": "opacity-50 line-through",
          "false": ""
        }
      }
    }
  },
  "state": {
    "todos": { "type": "list", "initial": [] },
    "newTodo": { "type": "string", "initial": "" }
  },
  "actions": [
    {
      "name": "setNewTodo",
      "steps": [
        { "do": "set", "target": "newTodo", "value": { "expr": "var", "name": "value" } }
      ]
    },
    {
      "name": "addTodo",
      "steps": [
        {
          "do": "update",
          "target": "todos",
          "operation": "push",
          "value": {
            "expr": "lit",
            "value": { "text": "", "done": false }
          }
        },
        { "do": "set", "target": "newTodo", "value": { "expr": "lit", "value": "" } }
      ]
    },
    {
      "name": "toggleTodo",
      "steps": [
        {
          "do": "update",
          "target": "todos",
          "operation": "replaceAt",
          "index": { "expr": "var", "name": "index" },
          "value": { "expr": "var", "name": "updated" }
        }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": { "className": { "expr": "lit", "value": "p-4 max-w-md mx-auto" } },
    "children": [
      {
        "kind": "element",
        "tag": "div",
        "props": { "className": { "expr": "lit", "value": "flex gap-2 mb-4" } },
        "children": [
          {
            "kind": "element",
            "tag": "input",
            "props": {
              "type": { "expr": "lit", "value": "text" },
              "value": { "expr": "state", "name": "newTodo" },
              "placeholder": { "expr": "lit", "value": "Add a todo..." },
              "className": { "expr": "lit", "value": "flex-1 border rounded px-2 py-1" },
              "onInput": { "event": "input", "action": "setNewTodo", "payload": { "expr": "var", "name": "value" } }
            }
          },
          {
            "kind": "element",
            "tag": "button",
            "props": {
              "className": { "expr": "style", "name": "button" },
              "onClick": { "event": "click", "action": "addTodo" }
            },
            "children": [
              { "kind": "text", "value": { "expr": "lit", "value": "Add" } }
            ]
          }
        ]
      },
      {
        "kind": "each",
        "items": { "expr": "state", "name": "todos" },
        "as": "todo",
        "index": "i",
        "body": {
          "kind": "element",
          "tag": "div",
          "props": {
            "className": {
              "expr": "style",
              "name": "todoItem",
              "variants": {
                "done": { "expr": "get", "base": { "expr": "var", "name": "todo" }, "path": "done" }
              }
            }
          },
          "children": [
            { "kind": "text", "value": { "expr": "get", "base": { "expr": "var", "name": "todo" }, "path": "text" } }
          ]
        }
      }
    ]
  }
}

JavaScript/TypeScriptは一切書いていません。 JSONだけで状態管理、イベント処理、条件付きスタイリングがすべて実現できます。

インストール

npm install @constela/start

まとめ

Constela v0.8.0 では以下の機能を追加しました：

エラー提案 - 「Did you mean?」で修正を容易に
Style System - CVAライクなバリアント管理
Builder API - AIツール向けのTypeScript API
CLI強化 - validate, inspect, --json, --watch, --verbose, --debug
AI連携 - 構造化エラー出力

JSONだけでUIを書く新しいアプローチに興味があれば、ぜひ試してみてください。

リンク:

GitHub: https://github.com/yuuichieguchi/constela
公式サイト: https://constela-dev.vercel.app/