MG-DX Tech BlogPublicationへの投稿
🤖

Notion から Claude Code による自動実装

Tomohiro Ueki
に公開
Notion
AI駆動開発
tech

エンジニア以外でも、仕様からコード実装まで完結できる環境を実現するため、Notion の Product Backlog (PB)から GitHub Issue を経由して Claude Code が自動実装するワークフローを構築しました。この記事では、実装から改善までのプロセスと、そこから得られた技術的な学びを共有します。

自己紹介

はじめまして、株式会社 MG-DX で Web フロントエンドエンジニアをしている植木です。

オンライン診療・服薬指導サービス「薬急便」の開発に携わっており、主に Web フロントエンド開発と Flutter アプリケーション開発を担当しています。現在は通常の開発業務のほか、AI を活用した開発環境の構築も兼務しています。

はじめに

mgdx-web プロジェクトでは、Notion でタスク管理を行っています。それを元にエンジニアがスプリントの期間で実装するのですが、中には簡単な修正がありますし、ちょっと時間が取れればできるものが多くありました。そんな中、Claude Codeで指示ができれば、ある程度の実装はできますが、全員がClaude Codeを使うのはハードルが高いので、GitHub上で実行することを考えました。

タスクはNotion管理なので、そこからGitHub Issueに同期して、Claude Code Actionで実装する流れを考えました。

実装内容

GitHub Actions のワークフローを定期または手動実行し、Notion のタスクを GitHub Issue として作成します。作成された Issue を起点に Claude Code が自動的に実装を開始し、GitHub 上で進捗を確認します。

1. AI駆動開発用のテンプレート作成

Claude Codeで実行するにはちゃんとした指示ができていなければ、実装が正しく処理できないので、普段管理しているPBのテンプレートとは違うものを用意し、詳細に書いてもらうようにしました。
テンプレートに例文を入れて、それを変更してもらって、書いてもらいます。

テンプレートの構造

## 概要

追加したい機能の概要を簡潔に記載してください

## 機能の詳細

### 目的・背景

なぜこの機能が必要なのか、どのような課題を解決するのかを記載してください

### 機能仕様

追加する機能の具体的な仕様を記載してください
- 薬局管理画面に一括配信機能を追加
- CSVインポートによる複数患者への同時メッセージ送信
- 送信履歴の確認機能

### ユーザーストーリー

ユーザーがこの機能をどのように使うかを記載してください
例: 薬局スタッフとして、複数の患者に同じお知らせを一度に送信したい

### 関連ファイル

機能追加に関連するファイルやコンポーネントを記載してください
例:
- packages/pharmacy/src/views/BulkMessageView/
- packages/shared/src/hooks/useMessage.ts

## 実装タスク

Claude Codeに実装してほしい具体的なタスクをステップごとに記載してください
1. BulkMessageView コンポーネントを新規作成
2. CSVインポート機能を実装
3. メッセージ送信APIとの連携処理を追加
4. 送信履歴表示機能を実装
5. テストコードを作成

## 技術要件

- 既存のコードスタイルに従ってください
- エラーが出ないようにしてください
- テストコードを必ず作成してください（TDD 推奨）
- 既存のコンポーネントや関数を最大限活用してください

## 受け入れ条件

機能が完成したと判断する条件を記載してください
- [ ] 一括メッセージ送信が正常に動作する
- [ ] CSVファイルのアップロードと解析ができる
- [ ] エラーハンドリングが適切に実装されている

テンプレートの特徴

  1. 構造化された仕様記述

    • 概要、背景、機能仕様、ユーザーストーリーを段階的に記述
    • Claude Code が実装の全体像を理解しやすい構成

  2. 実装タスクの明確化

    • ステップごとに実装内容を箇条書きで指示
    • Claude Code が順序立てて作業を進められる

  3. 品質要件の明示

    • コードスタイル、テスト作成、既存コード活用などを技術要件として明記
    • TDD（テスト駆動開発）を推奨

  4. 受け入れ条件のチェックリスト

    • 完成の定義を明確化
    • レビュー時の確認項目として活用

2. Notion → GitHub 自動同期スクリプト

Notion の PB から GitHub Issue を作成するスクリプトを作成します。JavaScript経由でNotion APIを呼び出し、GitHub Actionsで実行します。

すべて同期すると、対応していないPBも同期してしまうので、 AI駆動開発 とタグがついたものだけをNotion APIで抽出します。タイトルで重複チェックを行い、重複していなければ、Notionの内容を同期しています。

また、Slack 通知による実行結果を流すようにして、開発チームに共有できるようにしています。実装が行われることを把握し、エンジニアも確認できるようにしました。

3. 作成されたGitHub Issueにコメント経由でClaude Codeを実行

Issueの作成とClaude Codeの実行は分けていて、Issueの内容を見てから実行するようにしています。 @claude とコメントをつけると、Issueの内容を読んで実装を行うGitHub Actionsを作成しました。GitHub Actionsの内容としては、Issueの内容を読み込んで実装するようにプロンプトを設定し、動かすようにしています。

4. PR作成

PRの作成までは、Claude Codeでは行わず、ユーザーの判断にしています。同期したタイミングでSlack通知を行っているので、実装が問題ないかはエンジニアも確認できるようにしています。

修正内容があれば、@claude に対して修正内容を伝えて、PRする前にある程度を整えられるようにしています。

まとめ

この仕組みにより、非エンジニアがエンジニアの手を介さず、仕様からコード実装まで完結できるワークフローを実現しました：

  1. Notion で新しいタスクを作成（仕様を記述）
  2. GitHub Actions で手動実行
  3. 同期された GitHub Issue を起点に Claude Code が仕様を読み取り、実装を支援
  4. 非エンジニアが実装進捗を GitHub で確認し、必要に応じてレビュー依頼

この記事が、AI 駆動開発による非エンジニアを含むチーム全体での開発ワークフローの構築の参考になれば幸いです。

MG-DX Tech Blog
MG-DX Tech BlogPublication

Discussion