Claude CodeのDevExpress BlazorプラグインでGridとSchedulerを作る
DevExpress公式のdx-blazorプラグインは、Grid・Scheduler・Chartなど10コンポーネントの使い方をClaude Codeに足します。導入手順、前提条件、CLAUDE.mdで補う運用をまとめます。
DevExpressのBlazorコンポーネントは、プロパティ名やイベント名が独特です。モデルの一般知識だけで書かせると、存在しない属性を使ったコードが出やすくなります。DevExpressはこの問題に向けて、Claude Code用のプラグイン dx-blazor を配っています。Claudeのマーケットプレイスには「DevExpress Blazor Components」の名前で載っています。
中身は10個のスキルと、ドキュメント検索用のMCPサーバー設定です。GridやSchedulerを書かせる前に、導入の手順、必要な前提、チームで使うときの運用までを順に扱います。
dx-blazorプラグインの中身
マーケットプレイスの掲載ページには「Anthropic verified」の表示があり、説明文は「AI Chat、charts、gauges、Grid、Treelist、Pivot Table、Scheduler、Combo Box、Ribbon、Toolbar」の各スキルと書かれています。提供元はDevExpressで、ソースはGitHubの DevExpress/agent-skills リポジトリです。ライセンスはMIT、plugin.json のバージョンは1.6.0です。
dx-blazorの構成
スキル
10
コンポーネントごとに1スキル
MCPサーバー
1
dxdocs(HTTP)
対応.NET
8 / 9 / 10
スキルの compatibility 欄
10個のスキルが担当する範囲は、READMEの表のとおりです。
| スキル | 担当する主な範囲 |
|---|---|
devexpress-blazor-grid | 担当する主な範囲サーバー側のデータ処理、列、編集、フィルター・並べ替え・グループ化、集計、選択、ページング、仮想スクロール、エクスポート |
devexpress-blazor-scheduler | 担当する主な範囲日・週・月・タイムラインの各ビュー、予定のバインド、繰り返し予定、リソース、ドラッグ&ドロップ |
devexpress-blazor-treelist | 担当する主な範囲階層データのバインド、編集、ノードのドラッグ&ドロップ、オンデマンド読み込み |
devexpress-blazor-pivot-table | 担当する主な範囲クロス集計、行・列・データ・フィルターの各エリア、集計、日付のグループ化 |
devexpress-blazor-charts | 担当する主な範囲折れ線・棒・円・極座標・財務の各系列、軸、凡例、ツールチップ、ズーム |
devexpress-blazor-gauges | 担当する主な範囲バーゲージ、レンジセレクター、サンキー、スパークライン、マップ |
devexpress-blazor-combobox | 担当する主な範囲データバインド、検索、仮想スクロール、カスケード設定、検証 |
devexpress-blazor-ribbon / -toolbar | 担当する主な範囲タブ・グループ・アプリケーションメニュー、ボタン、ドロップダウン、アダプティブ表示 |
devexpress-blazor-ai-chat | 担当する主な範囲OpenAI・Azure OpenAI・Ollamaの設定、ストリーミング、ツール呼び出し、履歴 |
スキルのフォルダ構成は全部同じです。SKILL.md に起動条件と案内を書き、references/ に場面別の詳細、examples/ に .razor のサンプルを置きます。たとえばGridのスキルには、EF CoreでのCRUDやドラッグ&ドロップのサンプルが入っています。
導入して動作を確かめる
プラグインはリポジトリ自体がマーケットプレイスです。READMEの手順は、マーケットプレイスの登録、プラグインの導入の2段です。READMEの例は別プラグイン(dx-devextreme)ですが、Blazor用の名前は同じリポジトリの marketplace.json に dx-blazor と書かれています。
/plugin marketplace add DevExpress/agent-skills
/plugin install dx-blazor@DevExpress-agent-skillsセッション内の /plugin install はすぐには入れません。プラグインの詳細画面が開き、内容を見てからスコープを選ぶ流れです。選べるのは、自分の全プロジェクト向けのユーザー、リポジトリの全員向けのプロジェクト、自分とこのリポジトリだけのローカルの3つです。反映が必要なときは /reload-plugins が案内されます。
シェルから入れる場合は、同じ名前の @ 形式を使います。
claude plugin install dx-blazor@DevExpress-agent-skills --scope project
claude plugin list入ったかどうかは、/skills で一覧に devexpress-blazor-* が並ぶか、claude plugin list の出力で見ます。READMEも導入後に /skills を実行するよう案内しています。
MCPサーバーの「skipped」表示は異常ではない
plugin.json には dxdocs というMCPサーバーが入っています。接続先は https://api.devexpress.com/mcp/docs です。READMEによれば、DevExpressのドキュメントMCPサーバーは30万件超のヘルプトピックにつながり、スキルが型や手順を持ち、MCPが最新ドキュメントを引く役割分担だと説明されています。
すでに同じ dxdocs を自分で登録している場合や、DevExpressのプラグインを複数入れた場合は、MCP server "dxdocs" skipped — same command/URL as the already-configured "dxdocs" と表示されることがあります。READMEはこれをエラーではないと明記しています。気になるなら、グローバルのMCP設定から dxdocs の項目を外します。
動かす前に確認する前提
プラグインを入れても、アプリ側の前提が揃っていなければ生成されたコードは動きません。READMEの前提は次のとおりです。
- .NET 8以上のBlazorアプリ(WebAssemblyまたはServer)
- DevExpress v26.1以降のBlazor NuGetパッケージ(
DevExpress.Blazor) - DevExpressのサブスクリプションライセンス
- データバインド用のEF Core、SQL Server、または自前のデータサービス
- AI Chatを使う場合は、OpenAI APIキーか、Azure OpenAI・Ollamaのエンドポイント設定
スキル側の compatibility 欄にも、有効なDevExpressライセンスが必要で、多くの機能はインタラクティブなレンダーモード(InteractiveServer、InteractiveWebAssembly、InteractiveAuto)を前提とすると書かれています。
バージョンにも注意が要ります。Gridのスキルは、v26.1で DevExpress.Blazor から options.BootstrapVersion と DevExpress.Blazor.BootstrapVersion が無くなったため、この2つのAPIを生成しないよう指示しています。旧バージョンのプロジェクトにこのプラグインを当てると、スキルの前提とアプリの実際のAPIがずれます。パッケージを上げられない案件では、スキルが想定するのはv26.1だと頭に置いてください。
Claudeに任せると、まず質問から始まる
Gridのスキルは、コードを書く前にいくつか尋ねるよう指示しています。質問は5つです。
- レンダーモードはInteractiveServer、InteractiveWebAssembly、InteractiveAutoのどれか
- データソースはインメモリのコレクション、EF Core、
IQueryable<T>、カスタムデータソースのどれか - 必要な機能は何か(編集モード、エクスポート、選択、仮想スクロール)
- データモデルに主キーはあるか
- 既存プロジェクトへの追加か、新規か
スキルは、構造化された質問ツールがあればClaude Codeの AskUserQuestion を使うよう書いています。ツールが無ければチャットで直接尋ねます。「Gridを作って」とだけ頼むと、Claudeが先に質問を返してくるのはこのためです。
先に答えを渡せば、往復は減ります。たとえば次のように頼みます。
Orders.razor に DxGrid を追加して。レンダーモードは InteractiveServer、
データは EF Core の IDbContextFactory<AppDbContext>、主キーは Id、
編集は EditRow、CSV と XLSX のエクスポートも付けて。既存コードは触らないこと。この依頼は、スキルの5つの質問にそのまま答えた形です。Gridのスキルには ef-core-crud.razor というEF Core版のサンプルが入っているので、IDbContextFactory を使う構成はスキルの範囲に収まります。
GridとSchedulerで効くところ
Gridは「存在しないAPI」を作らせない
Gridのスキルには、守るべき規則が書かれています。要点は次のとおりです。
- 公式に載っていないプロパティ・メソッド・イベントを存在すると仮定しない。迷ったらDevExpressのドキュメントMCP(
devexpress_docs_search)で確かめ、見つからなければ存在しないと伝える - 編集と選択には
KeyFieldNameを必ず指定する - 変更したら、成功と報告する前に
dotnet buildを実行する - 既存コードはGrid以外を触らない
DevExpress.*のNuGetパッケージは、同じバージョンに揃える
ドラッグ&ドロップの節には、AllowRowDragDrop・RowDrop・OnRowDrop は存在しないと明記されています。名前から推測して書きたくなるAPIを、あらかじめ潰してある形です。AllowedDropTarget は「ドラッグ元」側のプロパティで、受け入れ側の設定ではない、という落とし穴も書かれています。
Schedulerはマッピングの指定が肝
Schedulerは DxSchedulerDataStorage に予定のコレクションと DxSchedulerAppointmentMappings を渡します。必須のマッピングはId、Type、Start、End、Subjectの5つです。予定のデータクラスのプロパティ名が独自のとき、ここの対応付けを間違えると予定が表示されません。
スキルの冒頭にあるコア例は、次の形です(予定データの定義は省いています)。
@rendermode InteractiveServer
<DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage">
<DxSchedulerWeekView ShowWorkTimeOnly="true" />
</DxScheduler>予定のクラスを渡したうえで「このクラスのプロパティをマッピングして」と頼めば、5つの必須項目と、Location や RecurrenceInfo のような任意項目の対応を、スキルの指針に沿って組ませられます。
CLAUDE.mdで補う:スキルが持たない案件固有の条件
スキルはDevExpressの一般的な使い方を持っています。しかしあなたのプロジェクトのレンダーモードや、使うテーマ、データアクセスの流儀までは知りません。毎回聞かれないよう、CLAUDE.mdに固定しておくと往復が減ります。例えば次のような断片です。
## DevExpress Blazor
- 対象バージョンは DevExpress.Blazor 26.1。他のバージョンのAPIを使わない
- レンダーモードは InteractiveServer。ページには @rendermode を明記する
- データアクセスは IDbContextFactory<AppDbContext>。DbContext を直接注入しない
- DevExpress のAPIは推測で書かない。不明なら dxdocs MCP で確認する
- 画面を変えたら dotnet build を通してから完了を報告するCLAUDE.mdは指示であって、強制ではありません。ビルドを確実に通したいなら、Stop hookで dotnet build を走らせる方法があります。.NETのテストを題材にした設定はClaude CodeでASP.NET Core Web APIを開発する記事に、使い分けはhooksによるテスト自動化の使い分けにあります。
コンポーネントのテストまで含めて検証ループにしたいなら、BlazorをbUnitでテストする記事が続きです。JSInteropやHttpClientの差し替え方も、そちらに載っています。
つまずきやすい点
Gridのスキルのトラブルシューティング表から、Blazorで実際に出やすい症状を選びます。
| 症状 | 原因と直し方 |
|---|---|
| 表示はされるが並べ替え・ページング・編集が効かない | 原因と直し方静的レンダリングのまま。ページか親コンポーネントに @rendermode InteractiveServer などを付ける |
A property named XXX is not found | 原因と直し方FieldName がモデルのプロパティ名と違う(大文字小文字を区別する) |
dx-blazor.css / dx-blazor.js が404 | 原因と直し方Program.cs の app.UseStaticFiles() の前に app.UseStaticWebAssets() が無い |
リバースプロキシの裏で dx-blazor.js が404 | 原因と直し方プロキシがアプリのベースパスを落としている。app.UsePathBase か <base href> で合わせる |
Could not find 'X' in 'window.DxBlazor' | 原因と直し方ブラウザに古いDevExpressのJSが残っている、またはNuGetのバージョンが揃っていない |
| 仮想スクロールが効かない | 原因と直し方VirtualScrollingMode だけ指定している。VirtualScrollingEnabled="true" が必要 |
DxGrid に Height が無いというコンパイルエラー | 原因と直し方高さはCSSで指定する。CssClass を付けて高さを定義する |
エラー文言はスキルの表に書かれたものです。症状を貼って原因を尋ねるときに、Claudeがこの表を引けるよう、スキルを有効にしたまま質問します。
チームで使うときは、プロジェクトスコープで入れる
チームで揃えたいなら、スコープをプロジェクトにします。プロジェクトスコープで入れると、.claude/settings.json に有効化の記載が入り、コミットできます。ただしコミットで有効になるのは設定だけです。プラグイン本体のダウンロードは各メンバーの手元で必要で、各自が claude plugin install dx-blazor@DevExpress-agent-skills --scope project を一度実行します。
スキルを別の置き場に手でコピーする方法もあります。READMEは、プロジェクトなら .claude/skills/、全プロジェクト共通なら ~/.claude/skills/ にスキルのフォルダを置く手順を示しています。プラグインの更新を追いかけたくない場合の選択肢です。コピーする場合は、プラグイン直下ではなく skills/ の中の個別フォルダ(devexpress-blazor-grid など)を置きます。
同じ.NETの領域で別のスキル集を使う例は、Duendeのプラグインの記事にあります。認証まわりを同じプロジェクトで扱うなら、組み合わせて使えます。
まとめ
dx-blazorは、DevExpressのBlazorコンポーネントの正しい書き方を、スキルとして足すだけのプラグインです。入れたからといってアプリが速く出来上がるわけではなく、効くのは「存在しないAPIを書かせない」「前提を先に聞かせる」「ビルドで締めさせる」の3点です。そこで、レンダーモード・データアクセス・DevExpressのバージョンをCLAUDE.mdに固定し、ビルドの成否をhookで確かめる構成にすると、導入の効果がはっきり出ます。v26.1より古いプロジェクトとライセンスの有無は、導入前に必ず確かめてください。