概要
https://jrfernandez.com/whiteboarding-with-ai/
詳細内容
## Whiteboarding with AI
https://jrfernandez.com/whiteboarding-with-ai/
本記事は、AIエージェントを用いた「ホワイトボーディング・ファースト」のアプローチを開発ワークフローに導入し、コード実装前の設計・思考プロセスを重視することで、高品質なコード生成と開発効率を実現する方法を詳述する。
**Content Type**: ⚙️ Tools
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 86/100 | **Annex Potential**: 84/100 | **Overall**: 84/100
**Topics**: [[AIコーディングエージェント, 開発ワークフロー, 設計思考, Mermaid図, Markdownベースのドキュメンテーション]]
記事は、AIコーディングエージェントを直接コード生成に使うのではなく、まず設計・計画段階で活用する「ホワイトボーディング・ファースト」のアプローチを提唱しています。これは、熟練エンジニアとのペアプログラミングのように、最初に問題空間をマッピングし、解決策を探り、アーキテクチャを図示することに相当します。ソフトウェア開発において最も困難な部分は問題の理解とアーキテクチャ上の決定であり、これがコード品質を大きく左右するため、AIをこの思考プロセスに戦略的に使うことが重要だと説きます。
具体的な方法として、より高度なモデル（例：Claude Opus）をMarkdownでの計画作成に利用し、その計画に基づいて、より安価なモデル（例：Sonnet）にコード生成を依頼する二段階戦略を推奨しています。この分業により、高品質なコードが生まれやすくなり、バグが減り、全体的なコストも削減されるとのこと。計画自体が仕様書やドキュメントとしても機能します。
特に重要な点として、複雑なシステムを視覚的に理解するためのMermaid図の活用が挙げられます。AIを使えば、Mermaidコードの生成と更新が瞬時に行え、手書きでは失われがちな設計作業が永続的なドキュメントとして残ります。また、このワークフローは、新しいコードベースを学習する際にも応用でき、AIにコードベースを分析させて自分専用の学習ドキュメントやMermaid図を生成させることで、理解を深めることができます。
著者は、このワークフローを最適化するためにRust製の高速Markdownプレビューサーバー「mdserve」を開発し、AIとの計画作業においてリアルタイムで設計の視覚化を可能にしています。このアプローチにより、開発者はコードのタイピングに費やす時間を減らし、問題解決、設計、アーキテクチャの検討といった高付加価値な思考活動により多くの時間を割けるようになると強調しています。これは、高品質で保守性の高いWebアプリケーション開発を目指すエンジニアにとって、AIを戦略的に活用するための極めて実践的な指針となるでしょう。