Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ChatGPT for Developer - Promptのチカラ

ChatGPT for Developer - Promptのチカラ

ChatGPT がアプリケーションに最初に組み込まれたのは GitHub Copilot かもしれません。ここでは、ChatGPT そのものと、GitHub Copilot の双方を使って、アプリケーション開発を爆速させ、品質を少しでも向上させ。そして、Developer の皆さんのスキルを上げていくための入り口として、機能の概要を取り上げます。

内容:
- Promptだけで出来るコト: 業務で使うために抑えておくべきポイント。データ・変換・抽出
- PromptのEngineeringへの適用: 企画から要件定義、設計、実装、デプロイも。
- 開発の生産性と品質をあげるための戦略: Prompt自身の現在の能力、チーム開発に向けて

サンプルのPrompt:
https://github.com/dahatake/ChatGPT-Prompt-Sample-Japanese/tree/main/Software%20Enginner/Web%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E9%96%8B%E7%99%BA

More Decks by Daiyu Hatakeyama | @dahatake | 畠山 大有

Other Decks in Technology

Transcript

  1. 日本マイクロソフト株式会社 | Microsoft Japan
    /dahatake
    @dahatake
    /in/dahatake
    /dahatake
    /dahatake
    /dahatake
    https://speakerdeck.com/dahatake
    ChatGPT を使って
    開発生産性 を10倍あげる方法
    - Prompt のチカラを知る -
    畠山 大有(はたけやま だいゆう) | Daiyu Hatakeyama

    View full-size slide

  2. 国内外での300社以上のITプロジェクトにアーキテクト及び
    エンジニアとして関与して約 25年の経験。業界初として事例化されたものには、
    フジテレビ、楽天、毎日新聞、日経新聞、富士フィルム、カルビー、コマツなどがある。
    また、東芝、SONY、NTT-Data、NextScape など 50社以上の
    パートナーと、ソリューション製品・サービスの開発・市場展開も行う。
    そこでの学びを、TechEd、de:code、TechSummit、InterBEE などで
    基調講演を含む場で600回以上のセッション登壇。
    また、書籍・雑誌やBlog 執筆、サンプルコードの公開などで社会に Feedback中。
    セッションだけでなく、200回以上のハンズオン、ハッカソンのファシリテーションも
    行っている。
    得意技: Agile Development methodology, Architecture Design, Coding, Database and Big Data,
    Data Science, Video Streaming, Search, Sustainability, Communication and Collaboration,
    Human skill-up
    佐賀大学非常勤講師
    ふくしまプログラミング推進協議会 – Technical Advisor・相談役
    佐賀県 – SAGA Smart Tech Adviser
    やつしろ×Tech コンソーシアム – 相談役
    SUNABACO – Technical Fellow
    MCP (MCSD, MCAD, MCSE, MCSA, MCDBA, MCTS, MCPD) | MCT | OCP (Oracle Master Platinum) | SCJ-P |
    ITIL foundation
    畠山 大有
    (はたけやま だいゆう)
    /dahatake
    @dahatake
    /in/dahatake
    /dahatake
    /dahatake
    [email protected]
    /dahatake
    LinkedIn

    View full-size slide

  3. 全ての Prompt はこちら
    [ChatGPT Hack] 要件定義から設計・モデリング・プロトタイプ
    作成。そして Azure への Deploy までを。ChatGPT に作らせ
    た #Azure - Qiita
    Blog Post
    https://aka.ms/prompt4dev
    Chat 履歴 Prompt
    ChatGPT-Prompt-Sample-Japanese/Software Enginner/Web
    アプリのプロトタイプ開発 at main · dahatake/ChatGPT-Prompt-
    Sample-Japanese (github.com)

    View full-size slide

  4. • 取り扱うもの
    • Software Engineer の皆さんの日々を楽しくする方法
    • 取り扱わないもの
    • LLM をアプリケーションに組み込む
    • Design Pattern
    • RAG
    • Plugin 開発 Reasoning Engine + Action
    • Azure OpenAI Services
    • GitHub Copilot の詳細
    • 他のセッションの方にお譲りします
    セッションの内容
    1秒でもコーディングの時間を増やすために

    View full-size slide

  5. 押さえておきたい
    Promptのみ で
    出来るコト

    View full-size slide

  6. あなたの AI ペア プログラマー
    • 記述中のコンテキスト
    (文脈) から
    一致するコードを生成
    • コメントをコードに変換
    • 反復コードの自動入力
    • テストの自動提案
    • 代替案を表示
    GitHub Copilot
    これ無しでは生きていけなくなった…

    View full-size slide

  7. Coding の現場
    ドキュメントと各種サンプルコードを読み込んで
    挙動と
    使い方を理解する
    With Search
    サンプルコードをネットで探す。
    知財に注意しながら
    コピペして動かす
    動かないと、
    エラーメッセージを基に
    ネットで探す
    With LLM
    ChatGPT でプロトタイプ作る
    (もしくは)
    Visual Studio Code で
    やりたい事をコメントに書く
    動かす
    動かないと、
    Codex の 「fix it」で
    修正させる
    高速化
    セキュリティ
    可読性
    重複削除
    アルゴリズム変更
    など

    View full-size slide

  8. 調べもの。Microsoft Copilot (a.k.a. Bing chat) 最強!
    ビジネスに近いトピック
    URL付
    テクニカルも

    View full-size slide

  9. しかも ポイントたまる
    ビジネストピック
    URL付
    テクニカルも

    View full-size slide

  10. 押さえておきたい
    Promptのみ で
    出来るコト
    1) Prompt の力

    View full-size slide

  11. 文章生成系
    分類系
    ChatGPT で出来るコトの例
    要約
    小学生にも分かるように
    300文字程度で要約して
    感情分析
    喜び/怒り/悲しみの感情を
    0~5で表現して
    エンティティ分析
    場所/人物名/組織名を
    抽出して
    キーフレーズ抽出
    次の文章の重要なフレーズ
    を抽出して
    インサイト抽出
    次のレビューから商品の
    改善点を考えて
    校正
    誤字/脱字/タイプミスを
    見つけて
    添削/評価
    〇〇の基準で10点満点で
    評価して
    翻訳
    次の文章をフォーマルな
    日本語に翻訳して
    問題作成
    次の文章から4択問題を
    作成して
    コード作成
    OpenAIのAPIを実行する
    コードを書いて
    アイデア創出
    人気の出るブログの
    内容案を提案して
    記述アシスタント
    このメールの日程調整をする
    メールを書いて
    情報検索
    WEBアプリの要件定義に
    ついて教えて
    情報抽出系
    文脈理解系
    チェック系
    翻訳系
    従来からできるタスク
    新しくできるタスク
    テキスト分類
    次のニュース記事の
    カテゴリを教えて
    思考の壁打ち
    〇〇という考えで抜けている
    点を指摘して

    View full-size slide

  12. 仕事で ChatGPT を使うためのポイント
    変換 抽出
    追加データ(RAG)

    View full-size slide

  13. 丁寧な謝罪文章の添削 変換

    View full-size slide

  14. あらゆる変換を試みてくれる
    畠山さん。先日は飛行機の遅延があったとはいえ、
    15分も会議に遅れてすいませんでした。今後は気を付けます
    カジュアルな日本語
    畠山様
    まず初めに、先日の会議に遅刻したことにつきまして、心より深
    くお詫び申し上げます。私の不手際が原因で、貴重なお時間
    を無駄にしてしまい、大変申し訳ございませんでした。

    ビジネスで通用する日本語
    Dear Mr. Hatakeyama,
    I am writing to express my deepest apologies for
    arriving 15 minutes late to our meeting the other day.
    Despite the fact that my delay was due to an
    unforeseen and regrettable plane delay, I fully
    recognize that this is no excuse for disrupting our
    scheduled meeting time.
    ビジネスで通用する英語
    Web画面



    謝罪のメッセージ
    ...<br/>フォーマルに<br/>英語で<br/>HTMLで<br/>変換<br/>

    View full-size slide

  15. 仕事で ChatGPT を使うためのポイント
    変換 抽出
    追加データ(RAG)

    View full-size slide

  16. メールからタスク遂行に必要な項目を抽出 抽出
    アプリケーションの
    入力画面の項目とも言える

    View full-size slide

  17. 項目が分からない場合でも、大丈夫!
    RAGして
    抽出させたい項目といえる!
    抽出

    View full-size slide

  18. 後からチームに参加しても
    自分の知りたい項目だけ
    簡単に確認が出来るように
    なった!

    View full-size slide

  19. データにしておけば、
    ChatGPT 君で何とか出来る
    メール 会議
    チャット 予定表 文書 音声 動画 コード
    アクション
    アイテム作成
    プロジェクトの
    要点
    ドラフト作成
    基礎的データ
    分析
    情報整理
    シナリオ作成
    ChatGPT
    Microsoft Copilot (Bing Chat) 調査+ファイル生成エンジン
    議事録 議事録
    Prompt 作成
    問題作成
    など…
    変換
    抽出
    追加データ

    View full-size slide

  20. 押さえておきたい
    Prompt で
    出来るコト
    2) 緩さ と 音声入力

    View full-size slide

  21. 『あれ? 多少入力ミスしても、だいたい動くな… 』

    View full-size slide

  22. 2つのAI を使った動きを見てみる
    話す 音声認識
    文章校正
    +
    Prompt実行
    音声認識ツール起動
    Prompt の文字列をコピペ
    +
    ###と###の間に、フォーカス移動
    dahatake/ChatGPT-Prompt-Sample-Japanese: ChatGPT の Prompt のサンプルです。 (github.com)
    欲しい情報

    View full-size slide

  23. • タイピングではなく音声で PC に入力するために音声入
    力を使用する - Microsoft サポート
    • Word、 Outlook、 OneNote (特にスマホ経由) で
    文章を作成する際に便利です
    Windows + H
    Windows での音声入力 ショートカット キー

    View full-size slide

  24. Engineering への
    適用

    View full-size slide

  25. とある Software Engineer の一日
    9:00 – 9:15
    メール・チャットなど返信。長いもの
    9:15 – 9:30
    Team Meeting
    設計書などのドキュメント作成
    9:30 – 10:30
    コーディング・テスト
    10:30 – 11:30
    ランチ
    11:30 – 13:30
    Customer Meeting
    13:00 – 14:00
    コーディング・テスト
    14:00 – 16:00
    Blog Post もしくは 登壇用スライド作成
    16:00 – 17:00
    Communication
    Documentation
    Engineering
    SNS
    探索

    View full-size slide

  26. コーディングは
    ほんの一部

    View full-size slide

  27. Prompt だけでどこまで出来るのか?

    View full-size slide

  28. • ふくしまプログラミング
    推進協議会に
    関わっておりまして
    想定シナリオ
    福島県郡山市の
    観光者アプリ
    https://fukuprogram.connpass.com/

    View full-size slide

  29. 自分で調べてみた 企画

    View full-size slide

  30. 自分で調べてみた
    データ化
    自分の OneDriveの中
    企画

    View full-size slide

  31. ユースケースの
    洗い出し
    企画

    View full-size slide

  32. 要件定義 : 機能要件 要件定義

    View full-size slide

  33. 要件定義 : 非機能要件 要件定義

    View full-size slide

  34. アーキテクチャ図 設計

    View full-size slide

  35. 画像ファイルからの
    Azure サービス作成を試してみた
    設計

    View full-size slide

  36. 画面遷移図 設計

    View full-size slide

  37. 実装計画 設計

    View full-size slide

  38. データモデル 設計

    View full-size slide

  39. サンプルデータ作成 実装

    View full-size slide

  40. Azure SQL Database のテーブル作成 実装

    View full-size slide

  41. Azure SQL Database にデータ登録 実装

    View full-size slide

  42. Azure Cosmos DB の作成 実装
    [残念!] Resource Group を Cosmos DB アカウントの作成前に、作成する必要あり

    View full-size slide

  43. 登録用の変数作成 実装

    View full-size slide

  44. CLI スクリプトを変数を使ったものに 実装

    View full-size slide

  45. Azure Cosmos DB にデータ登録 実装
    [残念!] DB、Container作成までは出来ます。
    CLIから、データ登録は出来ません

    View full-size slide

  46. Azure Cosmos DB SQL API 実装
    論理モデル (データモデル) さえあれば、
    もはや実装用のコードは
    どれでもいい
    勿論、最適化にはエンジニアリングが必須ですけど

    View full-size slide

  47. Vue.js 作成 (1) 実装

    View full-size slide

  48. Vue.js 作成 (2) 実装

    View full-size slide

  49. Azure Functions で API 実装 実装

    View full-size slide

  50. Vue.js と Azure Functions API 融合 実装

    View full-size slide

  51. Azure Functions と
    Azure Cosmos DB 融合
    実装

    View full-size slide

  52. デプロイも (1) 実装

    View full-size slide

  53. デプロイも (2) 実装

    View full-size slide

  54. GTP-4 with Vision で
    システム構成図 から IaC 作成も
    GPT4-Vで構成図からIaCコードを生成させる #OpenAI - Qiita

    View full-size slide

  55. レポーティング用のSQL文作成 実装

    View full-size slide

  56. Microsoft Azure のサービス選定 実装

    View full-size slide

  57. 作成したファイルのダウンロード
    Code Interpreter は常に神
    実装

    View full-size slide

  58. 案件の相談から
    ここまで
    30分/1人で
    なんどもやり直せる短さ 殆どはPrompt
    出力の待ち時間

    View full-size slide

  59. 肌感覚ですが。
    95%以上の
    図、スクリプト、コードは
    そのまま動きました

    View full-size slide

  60. Data Analytics の
    ご経験のある方は
    少ないかもしれないので

    View full-size slide

  61. • ChatGPT Plus (有償版) 参加ユーザーのみ
    • セッションのタイムアウトあり
    • GTP-4 のトランザクション回数上限あり
    • 50回 / 3時間 (2023年7月下旬現在)
    • ファイルのアップロードとダウンロード
    • 512 MB まで
    • Python のコード生成
    • インターネットの接続は出来ない
    • Python のコード実行
    • 可能な範囲でのエラーの修正
    OpenAI - Advanced Data Analytics
    ChatGPT plugins (openai.com)

    View full-size slide

  62. データ分析実行 と PowerPoint 作成
    [ChatGPT Hack] Code Interpreter で訪日外客者数のデータ分析と PowerPoint のファイルを作ってみた - Qiita
    ファイルアップロード と Prompt Insight と グラフ 作成 PowerPoint 作成
    Beta

    View full-size slide

  63. データの加工 (クレンジング、前処理) も…
    [ChatGPT Hack] Code Interpreter で、訪日外客者数 Excel ファイルのデータ加工 (データクレンジング・前処理)をやってみた - Qiita
    ファイルアップロード と Prompt 結果の基礎解析 作成したデータセット
    Beta

    View full-size slide

  64. LLM は、構造化データも処理できる!

    View full-size slide

  65. 生産性と品質を上げるための
    戦略

    View full-size slide

  66. 戦略
    既存開発環境との融合
    Token の Input - Output
    論理モデルと実装の疎結合

    View full-size slide

  67. 実際の入力#2のトークン: 128,000
    LLMのトークン制限は Chat 前提 Token の Input -
    Output
    Azure OpenAI Service モデル - Azure OpenAI | Microsoft Learn
    入力#1
    出力#1: 4,096
    入力#2
    出力#2: 4,096
    一度に大量の出力はできない
    トークン数が増えると、精度が落ちやすい。ノイズになる
    トークン数は増加傾向
    対話の継続 = 入力トークン
    のデータ追加

    View full-size slide

  68. 戦略
    既存開発環境との融合
    Token の Input - Output
    論理モデルと実装の疎結合

    View full-size slide

  69. 管理すべきは
    論理モデル for ChatGPT
    論理モデルと実装の
    疎結合
    論理データモデル
    RDBMS: Azure SQL Database
    Document: Azure Cosmos DB SQL API
    Optimize
    Optimize
    Technology Neutral

    View full-size slide

  70. 管理すべきは
    論理モデル for ChatGPT
    論理モデルと実装の
    疎結合
    論理データモデル
    RDBMS: Azure SQL Database
    Document: Azure Cosmos DB SQL API
    Technology Neutral
    各サービス・テクノロジーへの
    最適化こそ
    Engineer の
    腕の見せ所!
    Optimize
    Optimize

    View full-size slide

  71. 戦略
    既存開発環境との融合
    Token の Input - Output
    論理モデルと実装の疎結合

    View full-size slide

  72. Project Manager | Architect Developer | Data Engineer
    UX Designer
    チームでの Prompt 実行と
    Output 共有例
    Prompt Prompt Prompt
    メール・チャット・議事録など
    Prompt Prompt Prompt Prompt
    GitHub などに
    Project の
    ドキュメント
    機能要件
    Cosmos DB
    MySQL
    Mongo DB
    HTML
    Image
    Java
    C#
    非機能要件
    画面遷移図
    アーキテクチャ図
    メッセージ図
    プロジェクト
    スケジュール
    データモデル
    Python
    JavaScript
    SQL
    Database
    IaC
    CSS
    Prompt Prompt Prompt
    Copilot for Microsoft 365 GitHub Copilot
    GitHub Copilot
    Prompt
    GitHub Copilot
    既存開発環境との
    融合
    .docx, .pptx など .md など .ts, .js など .csharp, .java, .py, .sql など

    View full-size slide

  73. Project Manager | Architect Developer | Data Engineer
    UX Designer
    チームでの Prompt 実行と
    Output 共有例
    Prompt Prompt Prompt
    メール・チャット・議事録など
    Prompt Prompt Prompt Prompt
    GitHub などに
    Prompt Prompt Prompt
    Copilot for Microsoft 365 GitHub Copilot
    GitHub Copilot
    Prompt
    GitHub Copilot
    既存開発環境との
    融合
    ほとんどが
    テキスト
    Project の
    ドキュメント
    機能要件
    Cosmos DB
    MySQL
    Mongo DB
    HTML
    Image
    Java
    C#
    非機能要件
    画面遷移図
    アーキテクチャ図
    メッセージ図
    プロジェクト
    スケジュール
    データモデル
    Python
    JavaScript
    SQL
    Database
    IaC
    CSS

    View full-size slide

  74. Mermaid Live Editor の Visual Studio Code
    プラグインがあって、良かったー
    ```mermaid
    graph TD
    subgraph Frontend
    mobileApp[スマートフォンアプリ]
    webApp[ウェブアプリケーション]
    end
    ```mermaid
    を付与するのをお忘れなく

    View full-size slide

  75. GitHub Copilot Chat もすげぇ!
    実は殆どの Prompt が動く! Engineering からかけ離れると…
    感動!
    VS Code内でのファイル作成!

    View full-size slide

  76. Prompt 環境のチームで共有 – わかる
    Introducing ChatGPT Team (openai.com)

    View full-size slide

  77. 更なる自動化への
    ツールの登場も近いでしょう

    View full-size slide

  78. さいごに

    View full-size slide

  79. Microsoft のAIの保護
    お客様のデータは お客様のもの
    お客様のデータはAIモデルのファインチューニングには利用されません
    お客様のデータとAIモデルは全ての段階で保護されます
    新たな Copilot Copyright Commitment

    View full-size slide

  80. アプリとしての ChatGPT は
    エンジニアに優しい
    OpenAI への学習データの提供の意味
    も込めて。
    つまり機密データは入れないでね
    Prompt のログ Prompt のリトライ。編集。For 分岐も Prompt の共有
    「一発で欲しい結果のPromptにならん」
    「昨日のPromptを
    覚えてられん!」
    「メンバーに共有したい!」

    View full-size slide

  81. モデルの進化による
    更に直感的、小技不要な世界が
    目の前に

    View full-size slide

  82. その他のPrompt のサンプル
    dahatake - Qiita
    dahatake/ChatGPT-Prompt-Sample-Japanese: ChatGPT の Prompt
    のサンプルです。 (github.com)
    https://github.com/dahatake/ChatGPT-Prompt-
    Sample-Japanese
    https://qiita.com/dahatake

    View full-size slide

  83. • Prompt Engineering Guide | Prompt Engineering Guide
    (promptingguide.ai)
    • https://www.promptingguide.ai/jp
    • はじめに | Learn Prompting: Your Guide to Communicating with AI
    • はじめに | Learn Prompting: Your Guide to Communicating with AI
    • Best practices for prompt engineering with OpenAI API | OpenAI Help
    Center
    • https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-openai-api
    • Examples
    • https://platform.openai.com/examples
    • Prompt のサンプル
    • dahatake/ChatGPT-Prompt-Sample-Japanese: ChatGPT の Prompt のサンプルです。 (github.com)
    • [ChatGPT Hack] Bing Chat と ChatGPT を使って、特定の企業へ入社するためのエントリーシートのドラフトを作ってみた –
    Qiita
    • [ChatGPT Hack] Bing Chat を使って、新規アプリ開発の Azure 概算見積もりを作ってみた – Qiita
    効率的な Prompt のブクマ

    View full-size slide

  84. • ⿊橋教授(京都大学)- ChatGPT の仕組みと社
    会へのインパクト / NII 教育機関 DX シンポ (2023)
    • https://www.nii.ac.jp/event/upload/20230303-04_Kurohashi.pdf
    • 話題爆発中のAI「ChatGPT」の仕組みにせまる! -
    Qiita
    • https://qiita.com/omiita/items/c355bc4c26eca2817324
    ChatGPT のより深い理解

    View full-size slide

  85. • GitHub Copilot の基礎 - AI ペア プログラマについて理解
    する - Training | Microsoft Learn
    • https://learn.microsoft.com/ja-jp/training/paths/copilot/
    • Use GitHub Copilot to enhance your coding with AI
    (visualstudio.com)
    • https://code.visualstudio.com/docs/editor/github-copilot
    • GitHub Copilot導入後、初めて使う時。(豊富な使用例
    付き) #githubcopilot – Qiita
    • https://qiita.com/masakinihirota/items/0e58a6b921e4420a2882
    GitHub Copilot のお勉強

    View full-size slide

  86. © Copyright Microsoft Corporation. All rights reserved.
    Invent with purpose.

    View full-size slide