今回は、話題の Github Copilot Coding Agent と Notion MCP を組み合わせて、まさに「ノーコード開発」と呼べる体験を試してみたので、その流れと感想をまとめます。
「Issueをアサインするだけ」で開発が進み、「PRにコメントするだけ」で修正が入る。そんな未来が現実になってきています!
やりたいこと
- Github Copilot Coding Agent を使って自動で開発+PR作成を行いたい
- Coding Agent に Notion MCP を設定し、 Notionページに開発内容を書く → リンクだけをIssueに貼るというスタイルを試したい
- 実際にどこまで使えるのか、 既存のToDoアプリに対して小さなエンハンスを行って検証したい
準備・設定
- Notion MCP の準備
- Notionで開発内容のページを用意
- Notion MCP を設定して対象ページにインテグレーションを追加
- Coding Agent のセットアップ
- Github Copilot Coding Agent を有効化
- MCPサーバーの設定画面から Notion MCP を設定
実際にやってみた
ケース:ToDoアプリに期限日付機能を追加
① Notionページに内容を書く
# タスクに期限を追加したい
### 必須対応内容
- タスクモデルに **`due_date` カラム** を追加
- 型:日付(DATE型)
- SQLite用にマイグレーションまたは初期化SQLを更新
- タスク追加フォーム(`/` の画面)に **期限入力欄** を追加
- HTML `<input type="date">` 形式
- タスク一覧画面に期限を表示
- 各タスクの横に「期限:YYYY-MM-DD」と表示
- 期限未設定のものは「期限:未設定」と表示
### UI例
[タスクのタイトルを入力してください](<-input) [YYYY/MM/DD](<-date picker) [追加](<-button)
### 補足
- 期限未設定のものは`due_date = NULL`
- 並び順やフィルタ機能は今回不要、まずは「期限の追加と表示」のみ対応
- DBはSQLiteのまま
- 既存のDockerfileやrequirements.txtに追加は不要な見込み
### 確認手順
1. タスク追加フォームで`タイトル`と`期限`を入力して追加
2. 一覧画面に期限が表示されていることを確認
3. 期限未設定のタスクも問題なく表示されること
② Issue にリンクだけ貼る
(今回は実験で、Issueのタイトルから内容を推測されないように「追加機能」としています。実際は開発内容に即したタイトルを付けた方が良いと思います。)
③ Issueを Coding Agent にアサイン
自動で開発+PR作成!
結果
生成されたPR内容
- ToDo画面に 期限日付の入力欄 が追加されていた
- 一覧画面にも期限が表示
- 期限未設定のものは「期限:未設定」と表示
さらに:PRコメントで修正指示
自動で修正されたPRに更新!
実際のアプリ画面
感想・まとめ
- Notion MCPとの組み合わせが非常に便利!
Issueに細かい説明を書かなくてもOK
Notionのドキュメントがそのまま仕様書になる
- PRコメントの修正まで自動で対応できるのは感動
- ノーコード感覚で開発が進む → プロダクトマネージャーなど非エンジニアでも指示を出せる未来が見えてきた
今後やってみたいこと
- より複雑な開発指示での挙動確認
- デザイナーとの連携(Figma MCP との組み合わせなど)
- 他のMCP(Google Docsなど)との比較
さいごに
Copilot Coding Agent + Notion MCP の組み合わせ、かなり未来感あります!
もし試してみた方がいたら、ぜひフィードバックや工夫例を教えてください
今回実験に使ったリポジトリ