Code AI Findy Event

Transcript

1. コード ✕ AI ソフトウェア開発者のための生成AI実践入門 #コードAI_findy
2. bit.ly/CodeAndAI #コードAI_findy Special Thanks (敬称略) 森崎修司, 和田卓人, 山口鉄平, 金子昌永, 牛尾剛, 三田雅人, 吉田素文, 黒崎優太, 百田涼佑
3. bit.ly/CodeAndAI #コードAI_findy トピック • 生成AIがエンジニアリングの常識を変える • プロンプトで生成AIを操る • プロンプトの実例と分析 • AIツールに合わせたプロンプト戦略 • AIと協働するためのコーディングテクニック • AIの力を引き出す開発アプローチ • 生成AIの力を組織で最大限に引き出す • 開発におけるAI活用Tips • AI時代をリードするために
4. bit.ly/CodeAndAI #コードAI_findy AI-Powered Development Roadmap 開発に生成AIを取り入れる際の ロードマップ
5. bit.ly/CodeAndAI #コードAI_findy Practiceガイド 開発に生成AIを取り入れる際の プラクティス集
6. bit.ly/CodeAndAI #コードAI本 疑問: プロンプトを学ぶ必要はあるか
7. bit.ly/CodeAndAI #コードAI本 プロンプトのReal World Examples
8. bit.ly/CodeAndAI #コードAI本 例: Reactのコンポーネント生成プロンプト ReactAgentは、Reactアプリケーションの生成 を支援するオープンソースプロジェクト。 このツールは、自然言語での指示を受け取り、 それにもとづいてReactコンポーネントを生成 する。 初期の意欲的な開発支援AIツール例として、 開発者コミュニティで一定の評価を得ている。 https://github.com/eylonmiz/react-agent
9. bit.ly/CodeAndAI #コードAI本 プロンプト解説: ReactAgent フロントエンド開発者として行動してください。 説明に基づいて、TypeScriptのReact Functional Componentを作成してください。 美しく使いやすいものにしてください。 すべてのユースケースと状態をカバーするようにしてください。 --- 返却例: ${componentExample} --- 指示: 動作するコードであることを確認し、私が何かを変更したり実装したりすることを想定しないでください。 プロジェクトにTypeScriptのReactセットアップがあることを前提としてください。 外部ライブラリは使用せず、内部ライブラリの@react-agent/shadcn-uiとグラフ用のrechartsのみを使用してください。 --- 返却タイプ: Reactコンポーネントを返却し、TypeScript で記述し、Tailwind CSS を使用します。 tsx/typescript Markdown ```tsx <あなたのコードをここに> ``` 内にコードを返却してください。 https://github.com/eylonmiz/react-agent
10. bit.ly/CodeAndAI #コードAI本 プロンプト解説: ReactAgent フロントエンド開発者として行動してください。 説明に基づいて、TypeScriptのReact Functional Componentを作成してください。 美しく使いやすいものにしてください。 すべてのユースケースと状態をカバーするようにしてください。 --- 返却例: ${componentExample} --- 指示: 動作するコードであることを確認し、私が何かを変更したり実装したりすることを想定しないでください。 プロジェクトにTypeScriptのReactセットアップがあることを前提としてください。 外部ライブラリは使用せず、内部ライブラリの@react-agent/shadcn-uiとグラフ用のrechartsのみを使用してください。 --- 返却タイプ: Reactコンポーネントを返却し、TypeScript で記述し、Tailwind CSS を使用します。 tsx/typescript Markdown ```tsx <あなたのコードをここに> ``` 内にコードを返却してください。 https://github.com/eylonmiz/react-agent にJavaScript は絶対に出力させないぞ!!
11. bit.ly/CodeAndAI #コードAI本 日々のプログラミングの場合は プロンプトエンジニアリングのテクニックはあまり重要ではない タスクの多様性と一回性を考えると、 完璧なプロンプトを作る必要はありません。 むしろ、即興で使い捨てのプロンプトを生み 出し、AIとの対話を通じて出力を調整する 能力が重視されます。 タスクの本質をすば やく見抜き、自らの知見をAIに的確に伝え ることが、創造的な作業を効率的に進める 鍵となります。
12. bit.ly/CodeAndAI #コードAI本 論点：AIの出力は信頼がおけない AI は出力において • 嘘をつく • 命令を無視する • 文脈をすっとばす AIモデルの精度によって異なりますが GPT-4の場合、2,000トークンを超えると精 度が低下する可能性がある。（2024年時 点）。 https://arxiv.org/pdf/2402.14848
13. bit.ly/CodeAndAI #コードAI本 論点：人間のレビュー能力も信頼がおけない 適切なペースでのコードレビュー 1時間あたり500行以上のペースでレビューを行う と、欠陥の発見率が大幅に低下します。 適量のコードを、ゆっくりとしたペースで、限られ た時間内でレビューすることが最も効果的です。 一度に少量のコードレビュー 一度にレビューする量が400行を超えると、欠 陥を見つける能力が低下してしまいます。 200〜400行のコードを60〜90分かけてレビュ ーすることで、70〜90%の欠陥を発見できます https://smartbear.com/learn/code-review/best-practices-for-peer-code-review/
14. bit.ly/CodeAndAI #コードAI_findy [ディスカッション] AIと協働する コーディング実践
15. bit.ly/CodeAndAI #コードAI_findy AIと良いコード設計 AIツールは「良いコード」の基準をどう変えるか
16. bit.ly/CodeAndAI #コードAI_findy 小さなコードチャンクによる段階的作業 AIによる作業単位の最適化 大きな機能を小さな部分に分けて実装 する。 使い捨てのコード、実験的なコードな ど、設計レベルでクラスを分割しない ようなケースでも、作業単位を小さく するように心がけることで、AIとの協 働を効率化する。
17. bit.ly/CodeAndAI #コードAI_findy 関心の分離によるコード最適化 コードを適切に分割し、AIに与える 情報を最適化する。 クラスを関心ごとに分割し、シンプ ルな構造にすることで、生成される コードの品質向上を図る。 AIによる作業単位の最適化
18. bit.ly/CodeAndAI #コードAI_findy AIとの協働を意識した命名 コードのAI可読性向上 変数や関数に具体的で説明的な名前を 採用する。 適切な命名により、AIが提案するコー ドの品質を向上させ、人間の開発者と AIの両方が理解しやすいコードを作る。
19. bit.ly/CodeAndAI #コードAI_findy 検索最適化された命名戦略 コードのAI可読性向上 統一された命名規則を採用し、 検索にヒットしやすいコードを書く。 AIツールが適切なコードを提案する ために、一貫性のある命名を心がけ る。
20. bit.ly/CodeAndAI #コードAI_findy スタイルガイドの明示的提供とカスタマイズ AIと協働する際のコーディングスタイル AIによるコード生成時に標準的なス タイルガイドに従うよう指示する。 標準的なスタイルガイドをベースに、 必要に応じて最低限のカスタム規約 セットを作成する。 AIへのコーディング時の規約伝達を 最小限に抑え、効率的な連携を実現 する。
21. bit.ly/CodeAndAI #コードAI_findy 標準化されたコード内ドキュメント 付加情報の提供によりAIの理解を助ける 標準的なコメントプラク ティスに従ってドキュメ ントを書く。 言語ごとのドキュメント 生成の仕組みを活用し、 AIとのコラボレーション を円滑にする。 言語 方式 概要 Python Docstring PEP 257に準拠して詳細な コメントを記述し、ドキュ メント化 TypeScript JSDoc TypeScriptの型情報ととも に、JSDocを使用してドキ ュメント化 Java Javadoc Javaのクラスやメソッドに 対してコメントを記述し、 ドキュメント化 C# XML ドキュメント XML形式でドキュメントを 記述し、ドキュメント化
22. bit.ly/CodeAndAI #コードAI_findy 設計パターンとAI AIが理解しにくい依存関係にどう立ち向かうか
23. bit.ly/CodeAndAI #コードAI_findy AIに触れさせないコードの分離 AIに適したコードアーキテクチャ 重要な計算ロジックを独立させ、 AIによるコード変更から保護する。 コードの保守性と可読性が向上し、 リファクタリング時のリスクを軽 減する。
24. bit.ly/CodeAndAI #コードAI_findy 将来の拡張を考慮したコード設計 AIに適したコードアーキテクチャ 既存コードを改変せずに新しいコー ドを追加できるよう設計する。 コードの保守性や拡張性が向上し、 AIによる開発スピードを妨げない。 (OCP原則)
25. bit.ly/CodeAndAI #コードAI_findy 体系的なリファクタリング手法の適用 AIに適したコードアーキテクチャ リファクタリングカタログなどを 活用し、AIにより具体的な提案を 引き出す。 効果的なリファクタリングと品質 の高いコード開発につながる。
26. bit.ly/CodeAndAI #コードAI_findy 網羅的テスト設計のためのデシジョンテーブル活用 AIを活用したコード品質向上 デシジョンテーブルを作成し、それにもとづいてテストコードを 生成する。 より網羅的で有効なテストコードの作成が可能になる。
27. bit.ly/CodeAndAI #コードAI_findy 状態遷移図を経由したテストコード生成 AIを活用したコード品質向上 状態遷移図を作成し、それにもとづいてテ ストケースを確認し、テストコードを生成 する。視覚的に状態遷移を確認し、より確 実なテストコードを生成できる。
28. bit.ly/CodeAndAI #コードAI_findy AI時代にはシフトライトが必要になるのか? AIを活用したコード品質向上 シフトライトに関する言説には「今後エージ ェント型の生成ツールがあらわれて、ソリュ ーションを一気に作ったら」という枕詞が隠 されている。 将来、AIの生成するコードの質が飛躍的に向 上し、一気にアプリケーションを生成できる ようになれば、シフトライトの考え方が有効 になるでしょうが、現時点ではまだそのレベ ルには達していないのが実情です。 SHIFT RIGHT?
29. bit.ly/CodeAndAI #コードAI_findy 組織におけるAI活用
30. bit.ly/CodeAndAI #コードAI_findy オープンソースの文化を組織に取り入れる AI時代の競争優位性を高めるための開発組織戦略 ここであらためてAIが読みやすいコードの特徴をまとめると、以下のような ことが挙げられます。 • コードが記述的かつ文脈が明確で、初見でも理解しやすいこと。 • 比較的メジャーなバージョンや技術スタックで書かれている。 • 継続的にメンテナンスされ、常に使用可能な状態であること。
31. bit.ly/CodeAndAI #コードAI_findy 先進事例 ゴールドマン・サックスのAIプラットフォーム 「GS AI Platform」は、全ての独自AI技術を中 央集約化し、内部での利用を制限する形で運用 されている。 企業のデータを用いてファインチューニングさ れた専用モデルも利用。 出典: “Goldman Sachs Deploys Its First Generative AI Tool Across the Firm” - Wall Street Journal <https://www.wsj.com/articles/goldman-sachs-deploys-its- first-generative-ai-tool-across-the-firm-cd94369b>
32. bit.ly/CodeAndAI #コードAI_findy インナーソースの原則 AI時代の競争優位性を高めるための開発組織戦略