low-code-generation

ローコード生成

googleadsagent.ai™ による Agent Skills™ の一部です

説明

ローコード生成では、自然言語による説明やスキーマ定義をもとに、AI がフォーム、テーブル、ダッシュボード、ワークフロー UI を生成します。エージェントは、ノーコードからフルコードまでの幅広い範囲にわたって、本番環境で利用できるコンポーネントを生成します。ドラッグ＆ドロップ式の JSON 設定から完全にカスタマイズされた React コンポーネントまで、要件を満たす最もシンプルな成果物を常に生成します。

この幅広い選択肢を活用する原則が重要です。すべてにカスタムコードが必要なわけではなく、すべてを設定で対応できるわけでもありません。管理パネル用の CRUD テーブルには、並べ替え、フィルタリング、ページネーションを組み込んだ JSON 駆動のテーブルコンポーネントが最適です。条件付きロジックを含む複雑な複数ステップのフォームには、検証ルールを備えたフォームスキーマが適しています。カスタムの可視化を含む独自の分析ダッシュボードには、フルコードが必要です。エージェントは複雑さに応じて、適切な抽象化レベルを選択します。

このスキルは、JeecgBoot などのエンタープライズ向けローコードプラットフォームを参考に、UI を迅速に生成するためのパターンを取り入れています。検証機能を備えたスキーマ駆動型フォーム、サーバーサイド操作に対応する設定可能なデータテーブル、ドラッグ＆ドロップ式のノードを使うワークフロービルダー、チャートを組み合わせるレポート生成機能などです。それぞれのパターンにより、数日かかる開発作業を数分に短縮できます。

使用する場面

• 管理パネルや CRUD インターフェースを迅速に生成する場合
• データベーススキーマや API 仕様からフォームを作成する場合
• 並べ替え、フィルタリング、ページネーションに対応するデータテーブルを作成する場合
• 設定可能なウィジェットを使ったダッシュボードのレイアウトを作成する場合
• エンティティ関係図からアプリケーション全体のスキャフォールディングを生成する場合
• ユーザーが「クイック UI」「管理パネル」「フォームビルダー」を求めている場合

仕組み

graph TD
    A[Input: Schema / Description] --> B[Complexity Assessment]
    B --> C{Abstraction Level}
    C -->|Zero-Code| D[JSON Config Generation]
    C -->|Low-Code| E[Schema + Custom Handlers]
    C -->|Full-Code| F[Complete Component Code]
    D --> G[Config-Driven Renderer]
    E --> H[Schema-Driven Component]
    F --> I[Custom React Component]
    G --> J[Preview + Iterate]
    H --> J
    I --> J
    J --> K[Production Output]

複雑さの評価では、フィールド数、条件付きロジック、カスタム検証、視覚的な要件を確認し、適切な抽象化レベルを選択します。管理 UI のニーズの 60％はノーコードで対応でき、30％はローコードで対応できます。フルコードは残りの 10％に限って使用します。

実装

interface FormSchema {
  title: string;
  fields: FormField[];
  layout: "vertical" | "horizontal" | "grid";
  submitAction: string;
}

interface FormField {
  name: string;
  label: string;
  type: "text" | "number" | "email" | "select" | "date" | "textarea" | "switch";
  required?: boolean;
  validation?: { min?: number; max?: number; pattern?: string; message?: string };
  options?: Array<{ label: string; value: string }>;
  dependsOn?: { field: string; value: unknown };
}

function generateForm(schema: FormSchema): string {
  const fields = schema.fields.map(f => {
    const rules = [];
    if (f.required) rules.push(`{ required: true, message: "${f.label} is required" }`);
    if (f.validation?.pattern) rules.push(`{ pattern: /${f.validation.pattern}/, message: "${f.validation.message}" }`);

    const condition = f.dependsOn
      ? `{form.getFieldValue("${f.dependsOn.field}") === ${JSON.stringify(f.dependsOn.value)} && (`
      : "";
    const conditionClose = f.dependsOn ? ")}" : "";

    return `${condition}<Form.Item name="${f.name}" label="${f.label}" rules={[${rules.join(", ")}]}>
  ${renderInput(f)}
</Form.Item>${conditionClose}`;
  });

  return `<Form layout="${schema.layout}" onFinish={handleSubmit}>
  ${fields.join("\n  ")}
  <Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item>
</Form>`;
}

interface TableSchema {
  entity: string;
  columns: Array<{ key: string; title: string; type: string; sortable?: boolean; filterable?: boolean }>;
  actions: Array<"view" | "edit" | "delete">;
  pagination: { pageSize: number; serverSide: boolean };
}

function generateTable(schema: TableSchema): string {
  const columns = schema.columns.map(col => ({
    title: col.title,
    dataIndex: col.key,
    sorter: col.sortable ? true : undefined,
    filters: col.filterable ? `/* dynamic from API */` : undefined,
  }));

  return `<Table
  columns={${JSON.stringify(columns, null, 2)}}
  dataSource={data}
  pagination={{ pageSize: ${schema.pagination.pageSize}, total, onChange: fetchPage }}
  loading={loading}
  rowKey="id"
/>`;
}

ベストプラクティス

• 要件を表現できる最もシンプルな抽象化レベルから始めます
• 標準的な CRUD にはスキーマ駆動型生成を使用し、カスタムコードは例外的なケースに限ります
• スキーマから TypeScript 型を生成し、エンドツーエンドの型安全性を確保します
• 検証ルールは後付けのカスタムコードではなく、スキーマに含めます
• ユーザーが確定する前に生成された UI を調整できるよう、プレビューモードを用意します
• 複雑さが増した際に開発者がローコードから移行できるよう、生成されたコードをエクスポートできるようにします

プラットフォームの互換性

プラットフォーム	サポート	備考
Cursor	完全対応	コンポーネント生成＋プレビュー
VS Code	完全対応	スキーマ編集＋生成
Windsurf	完全対応	UI のスキャフォールディングに対応
Claude Code	完全対応	フォーム／テーブル生成
Cline	完全対応	ローコードコンポーネントの作成
aider	部分対応	コード生成のみ

関連スキル

• ワークフローオーケストレーション
• バッチ処理
• MCP サーバーの作成

キーワード

low-code form-generation table-generation schema-driven admin-panel crud zero-code rapid-development

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License