今日から使える AI駆動開発のすゝめ

社用で作成したエンジニア向けの生成AI入門スライドです。
特に機密情報はないのでそのまま公開しています。

Transcript

1. NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION Freelance Frontend Engineer Tsubasa SEKIGUCHI 今日から使える AI駆動開発のすゝめ A Practical Guide to AI-Driven Development Starting Today 2025.09.12 | 技術共有会 #11
2. 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten フリーランス フロントエンドエンジニア 関口 翼 Tsubasa SEKIGUCHI aka TinyKitten / きったん フリーランス フロントエンドエンジニア 2 2025.09.12 | 技術共有会 #11
3. TinyKitten タイニーキトゥン aka 関口 翼 フリーランス フロントエンドエンジニア 3 2025.09.12 | 技術共有会 #11
4. TrainLCD スマートフォンで使えるトレインビジョン 鉄道での移動中に迷いそうな時、 電車から降りれるか不安な時 きっとあなたの役に立つはずです 日本全国の鉄道路線で使える 新感覚ナビゲーションアプリ 4 2025.09.12 | 技術共有会 #11
5. 5 縦画面対応 推進中 今まで横画面にしないと TrainLCDアプリを使えませんでしたが、 次期バージョンから縦画面で一部の 機能を使えるようになる予定です。 TrainLCD 直近のハイライト 2025.09.12 | 技術共有会 #11
6. なぜ今AI駆動開発なのか？ Why AI-Driven Development Matters Today 6 2025.09.12 | 技術共有会 #11
7. 7 技術トレンドの 急速な進化 なぜ今AI駆動開発なのか？ 技術トレンドの急速な進化 コード生成・ドキュメント生成の 精度が実用レベルに到達 開発現場の課題と期待 短納期・高品質を両立するための 生産性ツールが求められている AIの役割が「補助」から「共創」へ 設計・テスト・リリースまで AIが対話的に関与 2025.09.12 | 技術共有会 #11
8. 8 早期活用による習熟度の差が 将来の生産性格差につながる 2025.09.12 | 技術共有会 #11 すでに多くの企業が Copilot, Codex CLI, Cursor等の導入を 進めている 今すぐ始める理由
9. 9 2025.09.12 | 技術共有会 #11 コード生成の進化 The Evolution of Code Generation
10. 作業の高速化には寄与するが、 創造的な部分は人間のみ 2025.09.12 | 技術共有会 #11 10 人間が完全に主導し、 ツールは フォーマットや 型安全性を 保証する程度 過去：補助的な自動化の時代
11. LLMによるコード生成 GitHub Copilot, Cursor, Codex CLI などが代表例 現場インパクト 「実装スピードの加速」 ＋「設計議論の即時化」 Pull Requestレビューや テストコード自動生成にも適用 11 2025.09.12 | 技術共有会 #11 自然言語 →コード化が 実用レベルに到達 現在：AI支援の本格化
12. コンテキスト保持型エージェント チーム開発における AIアシスタント化 人間の役割 AIが生成した成果物のレビュー 方針決定にシフト 複数ツールの統合 AIが自動で環境構築 テスト・デプロイ 2025.09.12 | 技術共有会 #11 12 各工程を異なる AIエージェントが 分担し、 連携しながら進行 未来：自律型エージェント開発
13. 13 2025.09.12 | 技術共有会 #11 Codex CLIの位置づけ Positioning Codex CLI in AI-Driven Development
14. 14 2025.09.12 | 技術共有会 #11 仕様ドラフトの自動生成 ユーザーストーリーや API仕様のたたき台を 自然言語から生成 リファクタリング支援 既存コードに対して 改善案を即時提案 ユニットテスト自動生成 関数やコンポーネント単位での テストコードを即時生成 Codex CLI が 「コード生成」で どう使えるか 開発プロセスにおける位置づけ
15. 15 2025.09.12 | 技術共有会 #11 Local / Cloud モード セキュリティ要件や 速度に応じた選択が可能 プロジェクト統合 既存リポジトリやCI/CDとの シームレスな連携 即時フィードバック コマンドラインから 対話的にAIを活用 AI開発ツールが 乱立する中で、 なぜCodex CLIが 注目されているのか なぜCodex CLIなのか
16. 16 2025.09.12 | 技術共有会 #11 スクリプト化しやすい npm scripts / Makefile / Justfile に載せて再現可能に CIにも載せやすい ヘッドレス実行にも対応しているので GitHub Actionsなどの パイプラインにも載せられる MCP対応 GitHub・Figma・Web検索など 複数サーバーを1つの対話ループから 呼べる CLIベースなので、 既存のエディタや CI/CDパイプラインに 簡単に組み込める MCPにも対応 ローカル統合が容易
17. 17 2025.09.12 | 技術共有会 #11 Claude Codeのように リクエスト単位の従量課金や 上限制限を気にしなくて済む 開発プロセスとの相性 開発者はプロンプト実行を
 繰り返すため、
 定額制はコスト予測がしやすい コストと価値のバランス Claude Codeは コストは従量課金が基本 コストは都度発生 ChatGPTの サブスクに含まれる 追加課金なしで 開発支援機能を 活用可能 定額で使える安心感
18. 18 2025.09.12 | 技術共有会 #11 追加契約や 専用APIキーが 不要で、すぐに PoCや試験導入が できる 導入ハードルの低さ レートリミットにご注意ください You've hit your usage limit. Upgrade to Pro (https://openai.com/chatgpt/pricing) or try again in 57 minutes.
19. 19 2025.09.12 | 技術共有会 #11 プロンプト設計のコツ Tips for Effective Prompt Design
20. 役割指定：モデルに役割を与える 目的の単一化：1プロンプト＝1タスク 入出力の明示：入力（前提ファイル/仕様）と出力形式を指定 制約の固定：言語/FW/規約/依存/非対応範囲 文脈の圧縮：最小限の必要ファイル＋要点だけ添付 例示：1つの良い/悪い例を与える 検収条件：受け入れ基準を数値化 20 2025.09.12 | 技術共有会 #11 プロンプト設計には 原則がある 最初3つを紹介します 7つの原則
21. 21 2025.09.12 | 技術共有会 #11 有名なのでご存知の方も多いかも AIに明確な立場を 指示する 役割を与える # Role あなたは優秀なフロントエンドエンジニアです。 あなたの目標は、ユーザーのニーズに合わせて 最高のWebアプリケーションを作ることです。
22. 22 2025.09.12 | 技術共有会 #11 # Goal 速度に応じてモーター音のピッチを変化させる 関数を実装する 1プロンプト＝1タスク にする 目的を一つに絞る
23. # Goal 次の仕様に基づき新しい関数を実装する # Input - ファイル: ~/features/sound/MotorSound.ts - 仕様: - 速度に応じて再生ピッチを変化 - 5km/h未満では無音、閾値でフェードイン # Output format - unified diff (変更ファイルのみ) - コードブロック内に記載 23 2025.09.12 | 技術共有会 #11 入力データと 期待する出力形式を はっきり書く 入出力を明示する
24. 24 2025.09.12 | 技術共有会 #11 注意点とベストプラクティス Pitfalls and Best Practices
25. 25 2025.09.12 | 技術共有会 #11 機密情報の扱いや 回答の過信に注意 注意点 機密情報の扱い 社外秘コード・環境変数・顧客データは 貼らない／必要ならLocalモードで ハルシネーション対策 受入条件を数値で明示 既存型に基づいて生成すること テストで検証 外部依存の安全性を確認する 提案されたコマンドや 依存を人間レビュー／自動適用しない
26. 26 2025.09.12 | 技術共有会 #11 文脈は はっきり・簡潔に 品質もしっかり担保 ベストプラクティス プロンプトの文脈 プロンプトには 必要な文脈と入力情報だけを 簡潔に与えること。 Local/Cloudの使い分け 小規模タスクはLocal、 重い生成やチーム共有が 必要なときはCloud 自己検証ループ 生成後に自己レビュー用プロンプト →最小修正→テスト・Lint実行
27. 27 2025.09.12 | 技術共有会 #11 今日から試せること Action Items You Can Try Today
28. 28 2025.09.12 | 技術共有会 #11 近日中に チームで出来ること Codex CLIを使って 今日できること Codex CLI をインストールし、 1タスク1プロンプトで 小規模なコード生成を試す 今週中にできること MCPを活用し Figmaのレイアウトでコード生成 来週以降にできること PRレビューや設計レビューを AI＋人間のハイブリッドにして 試験運用
29. Freelance Frontend Engineer Tsubasa SEKIGUCHI ご清聴ありがとうございました！ Thank you for listening! 2025.09.12 | 技術共有会 #11 NON-CONFIDENTIAL PUBLIC DOMAIN DOCUMENTATION