Slide 1

Slide 1 text

AIと人間の共創開発! OSSで試行錯誤した開発スタイル mae616 Claude Code Meetup Tokyo (LT) 2025.10.17

Slide 2

Slide 2 text

自己紹介 mae616 (まえ) • フリーランス準備中 (休職中のWebエンジニア) • エンジニア歴 8年 (SE 6.5年、Web 1.5年、講師の副業 1年) コミュニティ運営 • ゆるっと もくもく会 for Women • お題でプログラミング: おだいで.dev 開発で遊ぼう! ...他 直近の予定 • 技書博#12 頒布 東葛.devの合作本に寄稿 X: @mae616_

Slide 3

Slide 3 text

LTの概要 1. 海外のYouTubeを見てコンテキスト・エンジニアリングを知りました。 2. 試しにやってみたらちょっとやり方を自分に合ったものに改善したくなりました。 3. 改善して、せっかくなのでAIプロンプトのOSSとして公開しました。 4. その試行錯誤の知見を共有します。 https://github.com/mae616/ai-template Project AI Prompt Template

Slide 4

Slide 4 text

関わる知識 • コンテキスト・エンジニアリング • AIでアジャイル開発を行う (※) • AIでエンジニアの知識をペルソナ化する (※) ※ 海外では“AI-Paired Programming”や“Agile Ai Driven Development”などのキーワードとし て議論されている内容

Slide 5

Slide 5 text

持って帰って欲しいこと 多くの人は「AIをそのまま使って」疲れてしまっています。 けれど、自分の思考をAIに組み込めば、ただの道具ではなく“共に開発する相棒”になります。 本LTでは、その実感を持ち帰っていただければ嬉しいです。

Slide 6

Slide 6 text

目次 • コンテキスト・エンジニアリングについて(軽く) • ワンパス実装とアジャイル的アプローチの違い • OSSで試したClaude Code活用の具体例 • 実現したペルソナ • AIと人の役割分担 • 品質と状況 • 「効率化」ではなく「楽になる」AIとの共創開発の視点 • まとめ

Slide 7

Slide 7 text

コンテキスト・エンジニアリングについて バイブコーディング(Vibe Coding)& プロンプト・エンジニアリング • 「ノリ」や「雰囲気」を大事にした即興的なやりとり。 • ふわっとした指示を投げて、AIにコードを書かせながら、その場の流れで調整する。 コンテキスト・エンジニアリング(Context Engineering) • 目的・背景・制約・ゴールを一緒に渡して、AIに「なぜそれをやるか」まで理解させる。 • さらに、構造化(役割・手順・前提条件を整理)してLLMに渡す。 • そうすることで、AIが「部分最適なコード」じゃなく「エンジニアの意図に沿った全体的な設 計」を出しやすくなる。 • 再現性や品質が安定して、チーム開発的な流れにも耐えられる。

Slide 8

Slide 8 text

ワンパス実装とアジャイル的アプローチの違い 要件定義 設計 タスク の作成 AIによる実装 人の確認 要件定義 スプリント の作成 タスク の作成 AIによる実装 人の確認と AIによる修正 タスク の作成 AIによる実装 人の確認と AIによる修正 ※ ワンパス = On-shot, Single-pass など 「一度の実行で完成度の高い成果物を目指す」 通常のコンテキスト・エンジニアリング(ワンパス実装) = AIを実行して一晩放っておけばアプリが出来上がる ある意味「ウォーターフォール」的、制作物を確認できるのは最後 「要件定義→設計」とコンテキストを用意するのも大変 コンテキスト・エンジニアリングをアジャイル開発的に改良 細かく確認、試行ができる、調整ができる

Slide 9

Slide 9 text

OSSで試したClaude Code活用の具体例

Slide 10

Slide 10 text

実現したペルソナ Claude Code カスタムコマンド (作業モード) 自分のエンジニアの知識を 反映したペルソナ • スプリント & タスクシステムでの反復開発 要件定義またはタスクチケットから スプリント・タスクの作成 → 反復した実装 • トラブルシューティング機能 バグの起票 → 現状確認 → 改修策をWebで調査 → 改修 開発の補助機能 • マニュアル機能 設定マニュアル作成 → ステップバイステップでのガイド機能 ※ インフラ等をMCPでなく自分で作成したかっただけの機能 • 暫定コードの禁止 • SOLID原則に基づいた コード • 最小で正確な実装 • 公式ドキュメントに準拠 • Docsコメントを付与 • ドメイン意図を説明した コメント • ハマった時はサンプルを 実装して確認する ... など タスク処理 バグ処理 エンジニアの自分の普段やってる手順や知識をAIにペルソナ化した

Slide 11

Slide 11 text

AIと人の役割分担 要件定義 スプリント の作成 タスク の作成 AIによる実装 人の確認と AIによる修正 AIと人で要件定義 • 目的や機能 • 選択技術スタック • アーキテクチャ • 何か修正が必要な時に 新規タスクとするか バグ起票するかを判断 • 内容のコンテキストを入力 計画や実装時に 変な方向にいってないか確認 (一応) 人の役割: 方向性の決定、要件の整理、品質の担保 (ディレクター的なの) AI の役割: 実装の自動化、パターンの学習、反復作業の効率化

Slide 12

Slide 12 text

品質と状況 (1) OSS のコード(ts) (2) vibe codingでAIが書いたコード(js) (3) 自分が簡易的に書いたコード(ts) 債務が複数あって読みにくい 比較的似ているが、 (1) OSSのコードの方が SOLID原則などに適切に沿っていて読みやすい

Slide 13

Slide 13 text

ただ、OSSは一挙動ずつに既存コードベースの 分析が入るから(人間もやってるため)、 規模の大きいシステムでは現実的でないと思える

Slide 14

Slide 14 text

「効率化」ではなく「楽になる」AIとの 共創開発の視点

Slide 15

Slide 15 text

気軽に開発できる サブモニターとか必要だったのが、パソコン一つでリビングとかで開発できるようになれる AIコーディングは画面の情報量が多いので サブモニターが必要だった...

Slide 16

Slide 16 text

不具合調査の依頼が来た時の不安が減る 「バグ原因わかるかな...」と不安があったのが、「まぁ、多分なんとかなるだろう」になれる

Slide 17

Slide 17 text

まとめ

Slide 18

Slide 18 text

• AIはゲームチェンジャー • ただ、既存のこれまで人々が積み重ねた理論や実績を捨てる必要はない • AIと既存の理論や実績をフィットさせることで新しい価値が生まれる Claude Codeに限った話ではないが... 「既存の知識」と「AI」を切り離して考えるのではなく、 両者をうまくフィットさせていくことで、 「より持続可能なソフトウェアの在り方」を見出し、 それを次世代へ繋いでいくこと、そうした視点が、 これからますます大切になるのではないか と、 感じます

Slide 19

Slide 19 text

ご清聴ありがとうございます