IBM Bob Dojo #1 仕様駆動開発入門

Transcript

1. IBM Bob Dojo #1 ~AIと仕様を書いてコードを生み出す Bobathon 仕様駆動開発入門 2026年9月24日 日本アイ・ビー・エム株式会社
2. 自己紹介 大西 彰 日本アイ・ビー・エム株式会社 テクノロジー事業本部 AI Lab 推進事業 プリンシパル・ビジネス・デベロップメント・エグゼクティブ Akira.Onishi@ibm.com https://www.linkedin.com/in/oniak3/ 1989年に電気通信大学入学直後に、C言語のプログラマから出発し、 IT業界に身を置いて、38年目。 数々の苦難や挫折を、学びと根性で乗り越えながら、様々な経験を持つ。 2017年10月に日本アイ・ビー・エムに入社。 デベロッパー・アドボカシー事業部長、カスタマー・サクセス事業部の部長を経験して、 2026年1月より現職。主に保険業界のお客様を担当。 座右の銘: 踏まれてもなお立ち上がる道の草
3. IBM Bobの環境確認 1. IBM Bobを起動 2. IBM Bobにログイン 3. チャット・ウィンドウに「こんにちは」と入力 © 2026 IBM Corporation 3
4. Bobの設定 ~言語変更~ 初期状態ではBobは英語になっています。本ページでは日本語に変更する方法を示します。 1. Bobチャット画面右上の歯車マークを押下 2. Settings画面から、[General] → [Language] → [Change Language]を押下 3. 日本語 (ja)を選択する 4. 言語パックをインストールして、Bobを再起動 © 2026 IBM Corporation 4
5. IBM Bob: AIエージェント駆動の「企業向けソフトウェア」開発パートナー ユースケースの整合性、 KPI定義、技術計画の定義 計画・分析 リアルタイムの監視、 パフォーマンスと セキュリティの最適 化、継続的な改善 本番展開、初期監視、 インフラの拡大 運用・保守 Build & Test 設計 2 6 文書化された アーキテクチャー設計図と 定義された技術スタックの詳細 3 デプロイ 実装（開発） 5 Deploy & Manage © 2025 IBM Corporation 1 コア開発と エンタープライズシステム統合 テスト 4 反復テスト、負荷、セキュリティ、 ユーザビリティの問題に集中 5
6. IBM BobのIDE ①メニューバー ① ② ③ ④ エクスプローラー エディタ ファイル確認 ⑤ IBM Bobチャット ファイルを表示 作業する画面 ②アクティビティバー © 2026 IBM Corporation 機能アイコン (フォルダアイコン📃: エクスプローラー、虫眼鏡アイコン🔍: 検索)
7. Hello IBM Bob © 2026 IBM Corporation 7
8. IBM Bobの強み ソースコード理解、コード生成、リファクタリング、デバッグ COBOL, PL/I, RPG, Java, .NET, TypeScript, Python, RADツール、4GL 処理時間 複数のAIモデルを組み合わせて、より早く成果が出る APIコスト 1 Bobcoin (50万トークン)あたり$0.5 100万トークンあたり 2 Bobcoins、$1 (読み書きとも同じ価格) © 2025 IBM Corporation 8
9. IBM Verify (認証・認可) Web API ローカルの ストレージ （会話履歴） Bobの利用者は、バックエンド、 LLMを意識しなくて良い 会話履歴はローカル・ コンピューター上に残るが、 クラウド側には永続化されない © 2025 IBM Corporation 課金データ タスクの内容に応じて、APIコストが少なく、 早く結果が出るLLMを選択して、推論を実行 モデル選択用の Gateway キャッシュ (１次記憶) Bobの利用者が入力した内容、Bobが 出力した内容は、一時的にキャッシュに 残るだけで、クラウド側には永続化 されない 入出力の内容は、LLMの学習には使わない 推論エンジン1 LLM1 推論エンジン.. LLM2 推論エンジン LLMx 9
10. ハンズオンの目的 AIによる開発体感 仕様駆動開発の体感 AIを駆使し、短時間で「どこまで作れるか」 そのスピードを体感 単なるAIへの丸投げではなく、 「要件定義→モックアップ生成→ 文書化」という 開発スタイルを実践 © 2025 IBM Corporation 10
11. 全体の進め方 ゴールは、「顧客関係管理（CRM）」アプリのモックアップ作成、 Lab 1から Lab 6 を順に進めます ハンズオン用のファイル: https://github.com/IBM/japan-technology/blob/main/ibm-bob/bob-a-thon/new-business/lob/lab-files.zip © 2025 IBM Corporation 11
12. 「コード中心」から「仕様中心」へのパラダイムシフト 要件 設計 実装 テスト 運用 コード 「コードを書く」→ 「仕様を定義し、AIと対話し、品質を担保する」へ ①AIに実装を任せる為、「何を作るか （What）」の上流工程と仕様の具体化する力 © 2026 IBM Corporation ②レビュー・検証・セキュリティ監査 AIが生成したコードの妥当性、セキュリティ上の 脆弱性、全体最適を評価する力 ③AIを使いこなす力 AIに意図通りの設計・コード出力させる 為の仕様を明確に言語化・構造化する力 12
13. 今日は、その「新しい世界への入口」を体験して頂きます。 ゼロから動く アプリを作る コードではなく 「仕様」を起点に 「自分でもできる」 という体感を 開発する 頂く 本日は、ツールの勉強会ではありません。 「開発のやり方が変わる」を体感頂く場です。 © 2026 IBM Corporation 13
14. 環境の確認 & ツールの使い方ガイド
15. ツールの使い方（IBM Bob画面構成） ①メニューバー ① ② ③ ④ エクスプローラー エディタ ファイル確認 ⑤ IBM Bobチャット ファイルを表示 作業する画面 ②アクティビティバー © 2026 IBM Corporation 機能アイコン (フォルダアイコン📃: エクスプローラー、虫眼鏡アイコン🔍: 検索) 15
16. ツールの使い方（IBM Bobの自動承認の設定） ⚙ アイコンをクリックして、IBM Bobの設定を開きます このハンズオンでは、スピードを重視するため [実行]、[MCP]以外を自動承認して進めます。 © 2026 IBM Corporation 16
17. ツールの使い方（タスク別にIBM Bobの自動承認の設定） 自動承認について、会話別に構成を変えることが できます。 設定方法 1. 自動承認の右のトグル・スイッチをクリック 2. 自動承認を有効にする項目を クリックして☑を入れる あるいは、無効にする項目を クリックして、チェックを外す © 2026 IBM Corporation 17
18. ツールの使い方（IBM Bobの対話モードの選択） 画面右下のチャット欄の下に配置されたアイコンをクリックして 対話モードを設定 [Agent] エージェント・モード コードの生成、修正、実行 (作る/直す/動かす) 文書の作成・修正 [Ask] 質問モード 質疑応答 (調べる/整理する) 本Bobathonは、全て [Agent] モードで行います。 [Plan]モードは利用しません。 © 2026 IBM Corporation 18
19. Bobathon 練習Lab.ガイド
20. 体感頂くステップ ﾊﾞｲﾌﾞ･ｺｰﾃﾞｨﾝｸﾞ 仕様駆動開発 仕様駆動開発 ざっくり 要件→アプリケーション開発 文書化 オプション Lab Lab Lab Lab Lab Lab 1 2 3 4 5 6 ざっくり依頼 （5分） 要件の形 作成（5分） 課題の構造化 （10分） ｱﾌﾟﾘｹｰｼｮﾝ 作成（10分） 反復的改善 （7分） 文書化 （5分） AIの限界を知る AIに テンプレートを 準備させる 業務課題から 要件を まとめる 要件から ｱﾌﾟﾘｹｰｼｮﾝを 自動生成 仕様と ｱﾌﾟﾘｹｰｼｮﾝを 同時に磨く 設計書と説明書を 自動生成 © 2025 IBM Corporation 20
21. Lab1：ざっくり依頼（説明） ❗当ページは、このLabの説明を記載しています。 実施頂く内容は、次スライドに記してあります。 このLabでやること 具体的な指示を出さずにBobに頼むと、どんなものが出てくるか試す。 顧客関係管理（CRM）システムのモックアップを作って 曖昧な指示による「丸投げ」 © 2026 IBM Corporation 21
22. Lab1：ざっくり依頼（実施内容） 1. IBM Bobを起動し、デスクトップ上のbob-lab（作業用フォルダー）を開く。 • IBM Bobのメニューから 「ファイル」→「フォルダーを開く」 を選ぶ。 ❗以下のようなボタンが表示 された場合は、承認を クリックして下さい。 今後も同様です。 2. IBM Bobのチャット欄に、以下のメッセージを入力して送信する。 Agentモードで行う。 顧客関係管理（CRM）システムのモックアップを作って 3. 出来上がりを確認する。 • アーティファクトを開く © 2026 IBM Corporation 表示例 22
23. Lab2：要件の型 作成（説明） このLabでやること 「モックアップの要件をどう整理すればいいか」をBobに相談して、 事業担当者でも読み書きできるテンプレートを作ってもらう。 要件定義のテンプレート（req̲template.md）を作成して 要件定義のテンプレート （req_template.md） © 2026 IBM Corporation 23
24. Lab2：要件の型 作成（実施内容） 1. IBM Bobのチャット欄に、以下のメッセージを入力する。 Agentモードで行う。 ブラウザーでHTMLファイルを開くだけで動くアプリケーションの要件を整理する為のテンプレートを、作って下さい。 以下の方針で作成して下さい。 - テンプレートのファイル名は、req̲template.mdにして下さい。 - アプリケーションの目的、画面構成、機能一覧などの主要な要件を文書の前半にまとめる。 - ストレージやセキュリティーなど技術的な項目は、文書の後半にオプション扱いで記載する。 - 技術選定の項目は、Webアプリケーション開発が初めての人でも迷わないように、実績のある選択肢を既定値にする。 - フォントの既定値は IBM Plex Sans JP にする。 2. 作成したテンプレート req̲template.md を見てみる。 • ファイル一覧に req̲template.md が出てくる。クリックして開く。 • 中身をざっと見て、以下の構成になっているか確認する。 ü前半: アプリケーションの目的、画面構成、機能一覧など ̶ 事業担当者が読み書きしやすい項目。 ü後半: ストレージ、セキュリティーなど ̶ オプション扱いの技術項目。 ü技術選定: 初心者でも迷わない既定値が入っている。 üフォント: IBM Plex Sans JP が既定値になっている。 © 2026 IBM Corporation 24
25. Lab3：課題の構造化（説明） このLabでやること 配布フォルダにある営業チームの課題カードを読み、Lab 2のテンプレートの 形式に沿ってCRMの要件をまとめる。ここからが「仕様駆動」のスタート。 @sales̲challenge.md の営業チームの課題と、@mockup-req-templatesample.md のテンプレート形式を参考にして、CRMモックアップの要件を crm̲req.md にまとめて。以下の前提で書いて。 (以下、省略) 営業チームの課題 sales_challenge.md ❗@/ファイル名：このような記載をするとファイル内の 内容をBobに読み込ませることができます。 CRMの要件 crm_req.md © 2026 IBM Corporation 要件テンプレート mockup_req_templatesample.md AIがコンテキストを理解し まとめる 25
26. Lab3：課題の構造化（実施内容） 1. sales_challenge.md を開いて、中身をひと通り読む。ポイントは以下の3点： • 誰が使うか（ペルソナ）: 営業担当者・田中さん（35歳、1日3〜5件の顧客対応） • 何に困っているか: 顧客情報の確認に手間取る、最適な提案ができない、対応履歴が残らない • 最低限必要な機能: 顧客リスト、顧客詳細画面、おすすめ商品の表示 2. 要件をまとめる。課題カードの内容を踏まえて、CRMの要件ファイルを作る。チャット欄に以下を入力する。 Agentモードで行う。 @sales̲challenge.md の営業チームの課題と、@mockup-req-template-sample.md のテンプレート形式を参考に して、CRMモックアップの要件を crm̲req.md にまとめて。以下の前提で書いて。 - ブラウザーでHTMLファイルを開くだけで動くモックアップとして作る（Webサーバーは使わない） - 画面はPC・スマホ両対応のレスポンシブ・デザインにする - フォントは IBM Plex Sans JP を使う - サンプルの顧客データを5件以上含める 3. 出来上がった要件を確認する。crm̲req.md が作られる。開いて以下をチェックする。 •課題カードの3つの必須機能（顧客リスト、詳細画面、おすすめ表示）が入っているか •画面構成やデザインの方針が書かれているか © 2026 IBM Corporation 26
27. Lab4：モックアップ作成（説明） このLabでやること Lab 3で作った要件ファイルを渡して、Bobにモックアップを作ってもらう。 Lab 1の「ざっくり依頼」との違いを確かめる。 @crm_req.md の要件に従って、CRMモックアップを実装して。HTML・CSS・JavaScript で構成し、最初に開くファイルは index.html にして。 CRM要件 crm_req.md © 2026 IBM Corporation CRMアプリケーション 27
28. Lab4：アプリケーション作成（実施内容） 1. 要件をもとにアプリケーションを作るチャット欄に以下を入力する。 Agentモードで行う。 @crm_req.md の要件に従って、CRMモックアップを実装して。HTML・CSS・JavaScriptで構成し、 最初に開くファイルは index.html にして。 2. 出来上がりを確認する。（CRMアプリケーションを動かしてみる） üIBM Bobが実行を要求してきた場合（右の図） 「一度だけ承認」または「タスクに対して承認」を押す。 üIBM Bobが実行を要求しなかった場合 エクスプローラーより、index.htmlをダブルクリックする。 ü顧客リストは表示されているか？ ü顧客をクリックして詳細が見られるか？ üおすすめ商品/サービスは表示されているか？ © 2026 IBM Corporation 28
29. Lab5：反復的改善（説明） このLabでやること デザインや機能を追加するとき、モックアップだけでなく要件定義ファイルも 一緒に更新する方法を 練習する。 全体のデザインをダーク・テーマに変更して。 変更内容を crm̲req.md のデザイン要件セクションにも反映して CRM アプリケーション CRM要件 crm_req.md © 2026 IBM Corporation 要件とアプリを磨く 29
30. Lab5：反復的改善（実施内容） 1. デザイン変更を頼む。チャット欄に以下を入力する。 Agentモードで行う。 全体のデザインをダーク・テーマ（背景色: #1a1a2e、文字色: #e0e0e0、アクセント・カラー: #0f3460）に変更し て。変更内容を crm̲req.md のデザイン要件セクションにも反映して。 2. 変わったか確かめる • ブラウザーに戻り、ページを再読み込み（F5キーまたは更新ボタン）する。 ダーク・テーマに変わったか確認する • IBM Bobで crm̲req.md を開き、デザインの記述がダーク・テーマに書き換わっていることを確認する © 2026 IBM Corporation 30
31. Lab6：文書化（説明） このLabでやること 出来上がったモックアップの設計書と使い方説明書を、Bobに書いてもらう。コー ドだけ作って終わりにせず、ドキュメントまで揃えるのが仕様駆動のやり方。 設計書と使い方説明書を作成して。 CRMアプリケーション crm_design.md（設計書） 画面構成、使用技術、 ファイル構成など © 2026 IBM Corporation crm_readme.md（使い方説明書） ユーザー向けの操作手順、 起動方法など 31
32. Lab6：文書化（実施内容） 1. 設計書と説明書を頼む。チャット欄に以下を入力する。 Agentモードで行う。 以下の2つのマークダウン・ファイルを作って。 1. course̲design.md（設計書）: モックアップの画面構成、ファイル構成、使用技術、各画面の役割と遷移を記載 2. course̲readme.md（使い方説明書）: モックアップの開き方、各画面の操作方法、サンプル・データの説明を、 初めて触る人向けに記載ç © 2026 IBM Corporation 32
33. 応用編: モックアップからフロントエンドの設計書を作る 出来上がったHTMLファイルを用いて、Vue.jsフロントエンドアプリの設計書を作成してください。 © 2025 IBM Corporation 33
34. 振り返り 本日作成したアセット一式 感じて頂いたこと • 「ざっくり頼む」から「型を作り、要件を 定義し、磨き上げる」プロセスへの進化 アプリケーション アプリ要件 （crm_req.md） • 要件を明確にまとめれば、実装からドキュメント 生成までAIが一貫して完了させる • 仕様書とコードの同期（ズレの防止）が容易に 実現できる。 設計書 （ crm_design.md ） © 2026 IBM Corporation 使い方説明書 （ crm̲readme.md） 34
35. © 2026 IBM Corporation 35