AngularのMCP serverを使ってコーディングしてみた

これはAngular Advent Calendar 2025の11日目の記事です。

今回の記事のソースコードはGitHubで公開しています。

筆者のAngular歴

筆者は3年くらい前に一つの案件でAngularを使ってみた程度で、普段の仕事ではjQuery製のレガシーなコードをメンテしています。趣味プロはReactです。最近のAngularのことはSNSで情報が流れてきて知っている程度でした。新しいテンプレート構文が導入されたあたりから、なんかAngular良さそうだぞと感じて注目しています。

Angular MCP

Angular 21からAngular MCP serverがstableになりました。

最近のAngularはAIの活用に力を入れていますね！

このMCPサーバーを使うと、AIがAngularのベストプラクティスを意識してコーディングしてくれたり、コンポーネントを自動で作ってくれたりするらしいです。今回は試しにAngular MCPを使って自分で使うツールの作成にチャレンジしてみました。

プロジェクトの構築

一般的なAngularのプロジェクト作成と同じで、コマンドでプロジェクトを作成します。

対話形式のオプションがあり、どこ向けのAIツールにするか聞かれました。Githubを選んだので、.github/copilot-instructions.md というAI向けのファイルも作成されているのがわかります。

MCPサーバーの設定

angular.dev/ai/mcpによると、もう一つ設定が必要のようです。

ng mcp を打てとGet Startedに書いてあるので、打ってみました。

(スクリーンショットをとり忘れたので適当なプロジェクトで再現しました）

何をすればよいのか分からなかったので上記サイトのVSCode用の説明を見ると、出力にあるJSONを .vscode/mcp.json に保存しろということのようです。そして同じJSONがサイトに記載されていました。なんのためにng mcp打たせたのか…　バージョンが進んでもドキュメントを直さないですむためかも。

自分の場合、Serenaも使いたかったので以下のようにしました。

.vscode/mcp.json

{
  "servers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    },
    "serena": {
      "command": "uvx",
      "args": [
        "--from",
        "git+https://github.com/oraios/serena",
        "serena",
        "start-mcp-server",
        "--context",
        "ide-assistant"
      ],
      "env": {
        "SERENA_LOG_LEVEL": "info"
      }
    }
  },
}

初めての MCP 起動

準備ができたようなので、MCP Serverを起動してみます。

作成するツールの仕様をREADMEに書く

作成するツールは、業務システム開発の中でテストデータをSQLで作成するときに役立つツールです。

仕様はREADME.mdに全て書いておくことにしました。

AIには「README.mdの沿って〇〇を実装してください」のような指示を出せば、勝手に作ってくれるはずです。

# test-data-tool
テストデータ用のSQLの作成をサポートするツール

# 仕様

# 構成

- プロジェクト一覧のJSONをIndexedDBから読み込む
- プロジェクト設定のJSONをIndexedDBから読み込む
- プロジェクト設定のJSONはプロジェクトの設定のページからインポート/エクスポート可能
- 左右2ペイン構成の画面とし、「テーブル設計」パネルのペインを左、「テストデータ設計」パネルのペインを右に表示する

# データ構造

## プロジェクト設定

ProjectSetting
  tableDesigns: TableDesign[]
  testDataDesigns: TestDataDesign[]

## テーブル設計

テーブル設計
TableDesign
  name: string
  columnDesigns: ColumnDesign[]
.....

READMEに沿って作るよう指示してみる

ng generate component してますね！　featuresというフォルダに入れるのがナウいんでしょうか？

できたようです。ng serve してアプリを開いてみます。

できてる！

さらに指示を続ける

データ構造のクラスを作成するよう指示します。

クラスを作るよう言ったんですがインターフェースを作ったみたいですね。REST APIに投げたり変更検知のためにオブジェクトを作り直したりするにはインターフェースのほうが良い場合も多いので、そういうことかもしれません。

ファイル構成は次のようになりました。

さらに、Indexed DB関連の実装を指示。

盛大にエラーになるも、エラーを認識して別のライブラリを試そうとするAI。止める筆者。

ng generate service でサービスの実装に進むAI。ちゃんとサービス用のフォルダに配置してくれました。

どんどん実装を進める

この後はひたすらAIに指示を出し続け、

以下の画面くらいまではほぼ自分でコードを書くことなく実装できました。

生成されたコードもSignalベースで十分読みやすいコードになっていて、AngularとAIの相性も良いように感じました。

ただ、左下に見えているグリッドの実装はやっぱり難しいらしく、右側の階層式のエディタなどはAIが実装担当で人間がデバッグ担当みたいな感じになりました。AIは画面が見えていないのがネックみたいです。

AIが自らログ出力を埋め込み、ログを人間にコピペさせて確認するという手法も見られました。Chrome MCPとか使えばAIが自力で全部できるんでしょうか。

すごいと思ったところ

下のスクリーンショットは記事を書いている時点のツールの画面です。この中でカラム設計やノード設定、ノードのところにあるグリッドは、Excelライクなマウスとキーボードによる入力が可能です。これはコンポーネントではなくディレクティブで実装しています。

最初は各パネルごとにグリッドの処理がごっちゃり書かれていたのですが、ディレクティブで共通化するよう指示をしたところ、動かないけど方向性は完全に正しいくらいのクォリティで作ってくれました。

下は実際のディレクティブの利用箇所です。appDataGridとappGridCellをtableの各要素にセットすると、tableがExcel風に入力できるようになります。

すごいと思ったのは、ディレクティブでExcelライクなグリッドを実現するという指示に一回で答えてくれたことです。Angularのライブラリを熟知していないとできないことです。また、Excel＋ディレクティブ＋独自仕様といった複数要件の組み合わせに答えているのも賢いですね。

なお、コンポーネントではなくディレクティブにしたのは実験的な意味合いが強いです。スタイルを自由に変えたりSignalを活用するにはディレクティブを使ったらどうかと思って試してみました。

課題と感じたところ

AIがバグの本質に気づくことができず延々と修正を繰り返すことがあって、そのときはプログラマーが助け舟を出さないと進まなくなります。具体的にあったのは、

• htmlでifによる切り替えとDOM要素へのバインドが同時に変化するときうまくいかない。AIがそれに気づけない。
• ディレクティブでtableに適用すべきCSSがtbodyに当たっていたがAIはなぜか気づかない
• コンポーネントやサービス間で渡されるSignalはAIが書くと6割くらい（体感）はうまく動かない。オブジェクトのプロパティだけの変更が検知されないケースが多かった。AIはそれを理解していて直そうとするがだいたい直らない。
• もう自分で直すしかないと思ってコードを見ると、前に見たときと全然違うコードになっていて読み直すのに時間がかかる（Angular関係ない

きわどい挙動のデバッグに関しては、まだ人間のほうが頼りになるのかも。でもChrome MCPのようなものを使えばAIがブラウザ上の挙動をAIが見られるのでまた違ってくるのかなと、まだ試していませんが期待しています。

おわりに

ツールの完成はまだ遠いです。休日を利用して実働15時間くらいでイチから作りましたが、MCPが無かったらAngularの使い方を思い出すだけで終わっていたと思います。

Angularは学習コストが高いと常々言われてきましたが、AIのおかげでハードルはものすごく低くなっているということを強く感じました。

明日は @ver1000000 さんです！