Slide 1

Slide 1 text

コード ✕ AI ソフトウェア開発者のための生成AI実践入門 #コードAI本

Slide 2

Slide 2 text

服部 佑樹 @yuhattor 2023 - Present Sr. Architect GitHub 2022 - Present Vice President The InnerSource Commons Foundation 2016 - 2023 Various roles at Microsoft

Slide 3

Slide 3 text

bit.ly/CodeAndAI #コードAI本 Special Thanks (敬称略) 森崎修司, 和田卓人, 山口鉄平, 金子昌永, 牛尾剛, 三田雅人, 吉田素文, 黒崎優太, 百田涼佑

Slide 4

Slide 4 text

bit.ly/CodeAndAI #コードAI本 トピック • 生成AIがエンジニアリングの常識を変える • プロンプトで生成AIを操る • プロンプトの実例と分析 • AIツールに合わせたプロンプト戦略 • AIと協働するためのコーディングテクニック • AIの力を引き出す開発アプローチ • 生成AIの力を組織で最大限に引き出す • 開発におけるAI活用Tips • AI時代をリードするために

Slide 5

Slide 5 text

bit.ly/CodeAndAI #コードAI本 AI-Powered Development Roadmap 開発に生成AIを取り入れる際の ロードマップ

Slide 6

Slide 6 text

bit.ly/CodeAndAI #コードAI本 Practiceガイド 開発に生成AIを取り入れる際の プラクティス集

Slide 7

Slide 7 text

bit.ly/CodeAndAI #コードAI本 疑問: プロンプトを学ぶ必要はあるか

Slide 8

Slide 8 text

bit.ly/CodeAndAI #コードAI本 プロンプトのReal World Examples

Slide 9

Slide 9 text

bit.ly/CodeAndAI #コードAI本 例: Reactのコンポーネント生成プロンプト ReactAgentは、Reactアプリケーションの生成 を支援するオープンソースプロジェクト。 このツールは、自然言語での指示を受け取り、 それにもとづいてReactコンポーネントを生成 する。 初期の意欲的な開発支援AIツール例として、 開発者コミュニティで一定の評価を得ている。 https://github.com/eylonmiz/react-agent

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 は絶対に出力させないぞ!!

Slide 12

Slide 12 text

bit.ly/CodeAndAI #コードAI本 例: SQLクエリ生成プロンプト LangChainは言語モデルを利用したアプリ ケーション開発のためのフレームワーク。 執筆時点で特に注目されているオープン ソースプロジェクトの一つ。 LangChain Stack によって構成されており、 幅広いAIアプリケーション開発に利用可 能 https://api.python.langchain.com/en/latest/chains/langchain.chains.sql_database.query.create_sql_query_chain.html

Slide 13

Slide 13 text

bit.ly/CodeAndAI #コードAI本 プロンプト解説: create_sql_query_chain (LangChain) あなたは、MS SQLの専門家です。入力された質問に対して、まず構文的に正しいMS SQLクエリを作成して実行し、そのクエリの結 果を見て、入力された質問に対する答えを返します。 ユーザーが質問の中で取得する例の具体的な数を指定しない限り、MS SQLのTOP句を使用して最大{top_k}件の結果を問い合わ せます。データベース内の最も有益なデータを返すように結果を並べ替えることができます。 テーブルからすべての列を問い合わせることは絶対にしないでください。質問に答えるために必要な列のみを問い合わせる必要がありま す。各列名を角括弧([])で囲んで、区切り文字付き識別子として示します。 以下のテーブルで確認できる列名のみを使用するように注意してください。存在しない列を問い合わせないように注意してください。また、 どの列がどのテーブルにあるかに注意してください。 質問が「今日」を含む場合は、CAST(GETDATE() as date)関数を使用して現在の日付を取得するように注意してください。 次の形式を使用してください: Question:ここに質問 SQLQuery:実行するSQLクエリ SQLResult:SQLQueryの結果 Answer:ここに最終的な答え https://api.python.langchain.com/en/latest/chains/langchain.chains.sql_database.query.create_sql_query_chain.html

Slide 14

Slide 14 text

bit.ly/CodeAndAI #コードAI本 プロンプトを学ぶ必要はあるか

Slide 15

Slide 15 text

bit.ly/CodeAndAI #コードAI本 プロンプトを学ぶ必要はあるか バックエンド 情報収集 / 情報処理 プロンプト構築 コンプライアンス / セキュリティ処理 クライアント 情報収集 / プロンプト構築 モデル API この部分を開発する方 = 再利用するプロンプトを作る方 「プロンプトエンジニアリング」を学び、 研究を重ね、プロンプトやフロー構築の技術を 昇華させていくプロセスを学ぶ価値あり

Slide 16

Slide 16 text

bit.ly/CodeAndAI #コードAI本 日々のプログラミングの場合は プロンプトエンジニアリングのテクニックはあまり重要ではない タスクの多様性と一回性を考えると、 完璧なプロンプトを作る必要はありません。 むしろ、即興で使い捨てのプロンプトを生み 出し、AIとの対話を通じて出力を調整する 能力が重視されます。 タスクの本質をすば やく見抜き、自らの知見をAIに的確に伝え ることが、創造的な作業を効率的に進める 鍵となります。

Slide 17

Slide 17 text

bit.ly/CodeAndAI #コードAI本 論点:AIの出力は信頼がおけない AI は出力において • 嘘をつく • 命令を無視する • 文脈をすっとばす AIモデルの精度によって異なりますが GPT-4の場合、2,000トークンを超えると精 度が低下する可能性がある。(2024年時 点)。 https://arxiv.org/pdf/2402.14848

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

bit.ly/CodeAndAI #コードAI本 [ディスカッション] AIと協働する コーディング実践

Slide 20

Slide 20 text

bit.ly/CodeAndAI #コードAI本 AIと良いコード設計 AIツールは「良いコード」の基準をどう変えるか

Slide 21

Slide 21 text

bit.ly/CodeAndAI #コードAI本 小さなコードチャンクによる段階的作業 AIによる作業単位の最適化 大きな機能を小さな部分に分けて実装 する。 使い捨てのコード、実験的なコードな ど、設計レベルでクラスを分割しない ようなケースでも、作業単位を小さく するように心がけることで、AIとの協 働を効率化する。

Slide 22

Slide 22 text

bit.ly/CodeAndAI #コードAI本 関心の分離によるコード最適化 コードを適切に分割し、AIに与える 情報を最適化する。 クラスを関心ごとに分割し、シンプ ルな構造にすることで、生成される コードの品質向上を図る。 AIによる作業単位の最適化

Slide 23

Slide 23 text

bit.ly/CodeAndAI #コードAI本 AIとの協働を意識した命名 コードのAI可読性向上 変数や関数に具体的で説明的な名前を 採用する。 適切な命名により、AIが提案するコー ドの品質を向上させ、人間の開発者と AIの両方が理解しやすいコードを作る。

Slide 24

Slide 24 text

bit.ly/CodeAndAI #コードAI本 検索最適化された命名戦略 コードのAI可読性向上 統一された命名規則を採用し、 検索にヒットしやすいコードを書く。 AIツールが適切なコードを提案する ために、一貫性のある命名を心がけ る。

Slide 25

Slide 25 text

bit.ly/CodeAndAI #コードAI本 スタイルガイドの明示的提供とカスタマイズ AIと協働する際のコーディングスタイル AIによるコード生成時に標準的なス タイルガイドに従うよう指示する。 標準的なスタイルガイドをベースに、 必要に応じて最低限のカスタム規約 セットを作成する。 AIへのコーディング時の規約伝達を 最小限に抑え、効率的な連携を実現 する。

Slide 26

Slide 26 text

bit.ly/CodeAndAI #コードAI本 標準化されたコード内ドキュメント 付加情報の提供によりAIの理解を助ける 標準的なコメントプラク ティスに従ってドキュメ ントを書く。 言語ごとのドキュメント 生成の仕組みを活用し、 AIとのコラボレーション を円滑にする。 言語 方式 概要 Python Docstring PEP 257に準拠して詳細な コメントを記述し、ドキュ メント化 TypeScript JSDoc TypeScriptの型情報ととも に、JSDocを使用してドキ ュメント化 Java Javadoc Javaのクラスやメソッドに 対してコメントを記述し、 ドキュメント化 C# XML ドキュメント XML形式でドキュメントを 記述し、ドキュメント化

Slide 27

Slide 27 text

bit.ly/CodeAndAI #コードAI本 トピック • カプセル化と関心の分離 • 命名とAI: AIによる命名提案の有効性と注意点 • リファクタリングとAI • コードレビューとAI

Slide 28

Slide 28 text

bit.ly/CodeAndAI #コードAI本 設計パターンとAI AIが理解しにくい依存関係にどう立ち向かうか

Slide 29

Slide 29 text

bit.ly/CodeAndAI #コードAI本 AIに触れさせないコードの分離 AIに適したコードアーキテクチャ 重要な計算ロジックを独立させ、 AIによるコード変更から保護する。 コードの保守性と可読性が向上し、 リファクタリング時のリスクを軽 減する。

Slide 30

Slide 30 text

bit.ly/CodeAndAI #コードAI本 将来の拡張を考慮したコード設計 AIに適したコードアーキテクチャ 既存コードを改変せずに新しいコー ドを追加できるよう設計する。 コードの保守性や拡張性が向上し、 AIによる開発スピードを妨げない。 (OCP原則)

Slide 31

Slide 31 text

bit.ly/CodeAndAI #コードAI本 体系的なリファクタリング手法の適用 AIに適したコードアーキテクチャ リファクタリングカタログなどを 活用し、AIにより具体的な提案を 引き出す。 効果的なリファクタリングと品質 の高いコード開発につながる。

Slide 32

Slide 32 text

bit.ly/CodeAndAI #コードAI本 網羅的テスト設計のためのデシジョンテーブル活用 AIを活用したコード品質向上 デシジョンテーブルを作成し、それにもとづいてテストコードを 生成する。 より網羅的で有効なテストコードの作成が可能になる。

Slide 33

Slide 33 text

bit.ly/CodeAndAI #コードAI本 状態遷移図を経由したテストコード生成 AIを活用したコード品質向上 状態遷移図を作成し、それにもとづいてテ ストケースを確認し、テストコードを生成 する。視覚的に状態遷移を確認し、より確 実なテストコードを生成できる。

Slide 34

Slide 34 text

bit.ly/CodeAndAI #コードAI本 AI時代にはシフトライトが必要になるのか? AIを活用したコード品質向上 シフトライトに関する言説には「今後エージ ェント型の生成ツールがあらわれて、ソリュ ーションを一気に作ったら」という枕詞が隠 されている。 将来、AIの生成するコードの質が飛躍的に向 上し、一気にアプリケーションを生成できる ようになれば、シフトライトの考え方が有効 になるでしょうが、現時点ではまだそのレベ ルには達していないのが実情です。 SHIFT RIGHT?

Slide 35

Slide 35 text

bit.ly/CodeAndAI #コードAI本 組織におけるAI活用

Slide 36

Slide 36 text

bit.ly/CodeAndAI #コードAI本 オープンソースの文化を組織に取り入れる AI時代の競争優位性を高めるための開発組織戦略 ここであらためてAIが読みやすいコードの特徴をまとめると、以下のような ことが挙げられます。 • コードが記述的かつ文脈が明確で、初見でも理解しやすいこと。 • 比較的メジャーなバージョンや技術スタックで書かれている。 • 継続的にメンテナンスされ、常に使用可能な状態であること。

Slide 37

Slide 37 text

bit.ly/CodeAndAI #コードAI本 先進事例 ゴールドマン・サックスのAIプラットフォーム 「GS AI Platform」は、全ての独自AI技術を中 央集約化し、内部での利用を制限する形で運用 されている。 企業のデータを用いてファインチューニングさ れた専用モデルも利用。 出典: “Goldman Sachs Deploys Its First Generative AI Tool Across the Firm” - Wall Street Journal

Slide 38

Slide 38 text

bit.ly/CodeAndAI #コードAI本 インナーソースの原則 AI時代の競争優位性を高めるための開発組織戦略

Slide 39

Slide 39 text

bit.ly/CodeAndAI #コードAI本 トピック • 情報資産の蓄積 • AI が読みやすいコード、再活用しやすいコード • AI時代のエンジニア育成、スキルセット