Claude Code × Databricks Appsワークショップ / Claude Code Workshop

1.5時間のワークショップを通じて、Databricksを活用したバイブコーディングによるアプリ構築を
ハンズオン形式で体験いただきます。

Transcript

1. Claude Code × Databricks Apps ワークショップ 2026/4/8 データブリックス・ジャパン株式会社 AIエージェントと始めるアプリ開発 1
2. ©2025 Databricks Inc. — All rights reserved 1.5時間で身につく！ Claude Code x Databricks Apps 主な対象者 1.5時間のワークショップを通じて、Databricksを活用したバイブコーディングによるアプリ構築 を ハンズオン 形式で体験いただきます。 • データブリックスを用いたバイブコーディングに ご興味をお持ちの方 • バイブコーディングによる業務効率の改善を行いたいと考え ている方 ゴール 事前準備 アジェンダ 1. 座学 + デモ ◦ Claude Codeとは、Claude Codeの使い方 2. ハンズオン ◦ 基本的な使い方 ◦ 機能追加 • Claude Codeの使い方を理解する • Claude CodeとDatabricksの連携方法を理解する • バイブコーディングでのApps構築を体験する • 環境：お客様のPC環境、Databricks環境を利用 いただきます • ファイル：弊社よりサンプルファイルを提供いた します
3. 今日のゴールとアジェンダ Claude Codeの使い方を理解し、Databricks Apps開発に活用できるようになる 3 • 0:00〜0:20 Claude Codeとは？ • 0:20〜0:25 デモ：Claude CodeでAppsを作る • 0:25〜0:30 AI Dev Kit紹介 • 0:30〜1:10 自由ハンズオン • 1:10〜1:30 ユースケースディスカッション
4. Claude Code とは 4
5. ローカル環境での AIコーディングの選択肢 5 エージェンティック開発でのClaude Codeと選択肢 VS Codeは汎用性が高く広く採用さ れているエディタであり、大規模なコ ミュニティと堅牢なエコシステムを 持っています。AI機能を活用するた めに、Claude Code 拡張機能またはターミナルから 使用できます。 CursorはVS Codeのフォークで あり、コード補完、コード生成、コード 説明などの機能を提供し、AI機能を エディタに直接統合しています。 CursorのAI機能を使用することも、 拡張機能やターミナル経由で Claude Codeを使用することもでき ます。 Claude Code は主にターミナルを 通じて動作し、複雑なタスクに対す るAI駆動の強力なインタラクション を重視しています。Claude Code はより「エージェンティック」な操作 感があり、Claude Proティアが必要 です。 VSCode Cursor Claude Code +
6. Claude Code とは Anthropicが開発したターミナルベースのAIコーディングアシスタント 「エージェント型」 = 自律的に行動する 単なるコード補完ツールではありません。 指示を受けると、ファイルを読み書きし、コマンドを実行し、エラーを見て修正し、 目標達成まで自律的に作業を続けます。 できること • ファイルの作成・編集・削除 • シェルコマンドの実行 • エラー解析と自動修正 $ claude > Databricks Appsで動くSQLクエリ実行アプリを作って # Claude Codeが自律的に: # ファイル構成を考え → コード生成 → 設定ファイル作成 → デプロイまで 6
7. 他のツールとの比較 Claude Codeの位置づけを理解する GitHub Copilot IDE補完 コード補完に特化、提案ベース Cursor IDE統合 VSCode fork、チャット+編集、IDE内で完結 Cline / Roo Code VSCode拡張 エージェント型だがVSCode依存 Claude Code ターミナル IDE非依存、シェル統合、CLIを直接実行 💡 Claude Codeはターミナル型 = databricks CLIを直接実行できる 7
8. なぜターミナル型が有利なのか Databricks開発との相性 IDE型の制約 • エディタ内で完結 • 特定のIDEに依存 • CLI操作は手動で別途実行 ターミナル型のメリット • databricks CLIを直接実行 • どのIDEでも使える • CI/CDパイプラインに統合可能 # Claude Codeに「デプロイして」と言うだけ > このアプリをDatabricksにデプロイして # Claude Codeが databricks bundle deploy を実行 8
9. Claude Desktop × Claude Code 連 携 仕様ドリブン開発: 「考える」と「作る」を分離 Claude Desktop 仕様策定 What/Why → CLAUDE.md 仕様書 → Claude Code 実装 How このワークフローのメリット 要件の明確化: Desktopで対話しながら仕様を詰める。曖昧さを事前に排除 コンテキスト分離: 仕様策定と実装で別セッション。コンテキストを効率的に使用 再現性の担保: CLAUDE.mdに仕様を残すことで、誰でも同じ品質のコードを生成 9
10. Claude Code for VSCode VSCode内でClaude Codeを使う CLI版 • ターミナルで動作 • コマンドで起動 • 画面切り替えが必要 VSCode拡張(今日使う) • VSCode内で完結 • サイドバーから起動 • 差分をUIで確認・承認 VSCode拡張のメリット • エディタと一体化: コード編集とAI対話を同じ画面で • 差分の視覚的確認: 変更箇所をハイライト表示、Accept/Rejectで選択 • 開いてるファイルを自動認識 : @参照なしでもコンテキストに含まれる • Git連携: VSCodeのGit UIでそのまま差分確認・コミット
11. VSCode 拡張の2つのモード 好みに応じて切り替え可能 新UI(今日使う) • チャットパネル形式 • 差分をエディタ上で表示 • Accept/Rejectボタン • GUI派、初心者向け デフォルトで有効 ターミナルモード • CLI風の操作感 • テキストベースの差分表示 • 従来のCLI版と同じ感覚 • CLI慣れてる人向け 設定で切り替え 切り替え方法 設定 → Claude Code: Use Terminal → 有効にするとターミナルモード 今日は新UIを使います - 差分が視覚的にわかりやすい
12. VSCode 拡張のUI
13. VSCode 拡張: 基本操作 起動方法 1. サイドバーのClaude Codeアイコン (オレンジのスパーク)をクリック 2. ショートカット Mac: Ctrl + Cmd + I Win: Ctrl + Shift + I UI構成 • チャットパネル: サイドバー • 入力欄: パネル下部 • ファイル変更: エディタ上で 差分表示 → Accept/Reject コマンド(CLI版と共通) /init → CLAUDE.md生成 /clear → 会話リセット /context → コンテキスト確認 @ファイル名 → ファイル参照(入力欄で補完される)
14. 差分の確認と承認 Claude Codeがファイルを編集すると差分がエディタに表示される 1 Claudeがコード生成 → 2 差分がエディタに表示 → 3 Accept / Reject 操作方法 Accept(採用) • 緑のチェックボタン • Cmd/Ctrl + Enter • 変更をファイルに反映 Reject(却下) • 赤のXボタン • Esc • 変更を破棄、元に戻る 💡 部分的に採用したい場合: 一度Acceptして、VSCodeで手動修正
15. 効果的なプロンプトの書き方 良いプロンプトの4要素 1 対象を明確に @app.py の〇〇関数を... 2 やりたいことを具体的に エラーハンドリングを追加... 3 期待する結果を示す エラー時はメッセージを表示 4 制約があれば伝える 既存のUIは変更しないで 悪い例 vs 良い例 ❌ アプリを作って ❌ エラーを直して ✅ SQLクエリ実行アプリを作成。 @CLAUDE.md のルールに従って 15
16. プロンプト例 : Databricks Apps 開発 新規作成 SQLクエリ実行アプリを作成して。 @CLAUDE.md のルールに従って。 機能追加 @app.py にグラフ表示機能を追加。 Plotly使用。既存UIは維持。 エラー対応 以下のエラーが出ました: [エラーメッセージを貼り付け ] 原因を特定して修正して。 デプロイ このアプリをDatabricksに デプロイして。DABs使用。 💡 CLAUDE.mdにルールを書いておけば、毎回細かく指示しなくてもルール通りに生成される 16
17. エラー発生時の対処フロー 「貼り付けて相談」が基本 1 エラー発生 ターミナルにエラーメッセージ ↓ 2 コピー エラーメッセージ全体をコピー ↓ 3 貼り付け 「このエラーが出ました」と共に ↓ 4 確認・実行 提案された修正を実行 ⚠ 修正しても同じエラーが2回出たら → /clear してより具体的なプロンプトで再開 17
18. CLAUDE.md とは プロジェクト固有のルールをClaude Codeに伝えるファイル なぜ必要か ? CLAUDE.mdがない場合 毎回説明が必要: 「app.yamlはリスト形式で... ポート指定は禁止で...」 CLAUDE.mdがある場合 自動で読み込まれる: 「アプリを作って」だけで ルール通りに生成 CLAUDE.mdの効果 • コンテキスト節約: 毎回の説明が不要 • 品質の一貫性: コーディング規約が統一される • チーム共有: Gitで管理、全員が同じルールで開発 18
19. CLAUDE.md に書くべきこと Databricks Apps開発の場合 プロジェクト概要 何を作るか、目的 技術スタック Streamlit、Databricks SDK等 app.yamlルール command形式、env形式 認証パターン WorkspaceClient()で自動認証 禁止事項 ポート指定禁止、SparkSession禁止 デプロイ方法 DABs使用、databricks.yml構造 💡 app.yamlルールと禁止事項は必須 - これがないとエラーの原因に 19
20. 今日のCLAUDE.md の中身 # Databricks Apps Workshop ## 概要 Databricks Apps用Streamlitアプリを開発するプロジェクト ## 技術スタック - Streamlit, Databricks SDK, Plotly ## app.yaml ルール(重要) - command: リスト形式で記述 [streamlit, run, app.py] - env: name/valueFrom形式で記述 - ポート・アドレス指定禁止 ## 認証 WorkspaceClient() # 引数なしで自動認証 ## 禁止事項 - SparkSession使用禁止 - --server.port, --server.address 指定禁止 - ハードコードされた認証情報 20
21. Claude Codeのメンタルモデル 21 Type 目的 呼び出し 最適な用途 例 CLAUDE.md 汎用プロジェクト ガイダンス 常にコンテキストに存 在 ガイダンスとベスト プラクティス スキル 特定タイプのアクションの ワークフロー指示とステッ プ ユーザー呼び出し、モ デル呼び出し(説明マッ チング) “Yを議論する際 ClaudeはXについ て知っているべき” dabs-writer, databricks-app-builder MCPサーバー 他のクライアントに よる有用な外部ツール ユーザー起動、 モデル呼び出し エージェントの 効果を改善するた めにツールをバンド ル、状態を活用 Databricks DBSQL MCP, GitHub MCP サブエージェント スタンドアローンの 並列ワーカー エージェント名呼び出 し、プロアクティブ 特化タスクにフォー カスした タスクの同時実行 私の宣言型パイプラインの Pythonユニットテストを書く ために新規のエージェント を作成して 4つのコアタイプ
22. デモ 22
23. デモ 1 Hello Databricks (5 分) 最小構成のアプリでClaude CodeとDABsの動作を確認 最小構成のDatabricks Appsを作成して。 - Streamlitで「Hello from Databricks!」を表示 - @CLAUDE.md のルールに従って - アプリhello-databricksにデプロイして 見てほしいポイント 1. CLAUDE.mdの自動読み込み 2. ファイル生成(app.py, app.yaml, requirements.txt) 3. アプリ実行 23
24. デモ 2 SQL Query Runner (5 分) エラー発生時の対話的デバッグを実演 SQL Query Runnerアプリに変更して。 SQLを入力して実行結果を表示。@CLAUDE.md に従って。 見てほしいポイント 1. valueFromエラーの発生(エラーを回避する場合もあります) 2. エラーをClaude Codeに貼り付けて相談 3. --envフラグでの解決 24
25. AI Dev Kit 25
26. • Databricks提供 • キーワード: Vibe Coding — 自然言語でDatabricksを操作 • Skills（知識）+ MCP（実行）の2層構造 AI Dev Kitとは AIコーディングアシスタントに Databricksの知識と実行能力を与える ツールキット 26
27. 4つのコンポーネント コンポーネント 概要 databricks-skills 19のMarkdownスキル。AIアシスタントにDatabricksのパターンと ベストプラクティスを教える databricks-mcp-server 50以上のツールをMCPプロトコルで公開。Claude Code / Cursor等から 実行可能 databricks-tools-core Python共通ライブラリ。LangChain / OpenAI Agents SDK等から 直接利用可能 databricks-builder-app Claude Code Agent SDK統合のフルスタックWebアプリ。Databricks Appsにデプロイ 27
28. • ワンライナーでインストール（Mac / Linux / Windows対応） • プロジェクトスコープ（推奨）またはグローバルスコープ • 対応AIアシスタント: Claude Code / Cursor / Windsurf / Gemini CLI • GitHub: databricks-solutions/ai-dev-kit インストール 28
29. • チャットUIから自然言語でDatabricksを操作（SQL実行、パイプライン作成、ファイル 操作等） • AI Dev Kitの他3コンポーネント（tools-core / MCP / Skills）をすべて統合した上位レ イヤー • アーキテクチャ : React（フロント）→ FastAPI（バックエンド）→ Claude Codeセッショ ン → MCPツール → Databricks • SSEストリーミングでテキスト・思考過程・ツール使用をリアルタイム表示 • Lakebaseにプロジェクトメタデータ・会話履歴を永続化 • Databricks Appsにデプロイ可能（deploy.sh で一括デプロイ） • MLflowトレーシング対応（プロンプト・レスポンス・ツール使用を可視化） Builder App Claude Code Agent SDK統合のフルスタック Webアプリ 29
30. Builder App Claude Code Agent SDK統合のフルスタック Webアプリ 30
31. AI Dev Kitのインストール 31 Windows (PowerShell) irm https://raw.githubusercontent.com/databricks-solutions/ai-dev-kit/main/install.ps1 | iex Mac (Terminal) bash <(curl -sL https://raw.githubusercontent.com/databricks-solutions/ai-dev-kit/main/install.sh)
32. AI Dev Kitのインストール 32 Claude Codeを選択します(not foundでも大丈夫です)
33. AI Dev Kitのインストール 33 Databricks CLIのプロファイルを選択
34. AI Dev Kitのインストール 34 プロジェクトスコープを選択
35. AI Dev Kitのインストール 35 すべてのスキルを選択
36. AI Dev Kitのインストール 36 MCPサーバーインストール先を選択(デフォルトでOK)
37. AI Dev Kitのインストール 37 インストールの確認
38. AI Dev Kitのインストール 38 CLIの認証
39. AI Dev Kitのインストール 39 インストール完了
40. AI Dev Kitのインストール 40 VSCodeで動作確認「List my SQL warehouses」
41. 41 DatabricksにおけるClaude Codeの活用 • アクセス管理 : エンドポイント・グループ・ユーザーの3階層 でレートリミットと権限を一元管理 • 可観測性: 全LLMトラフィックをUnity Catalog（Deltaテーブ ル）に自動記録、ダッシュボードで可視化 • 統合ガバナンス : Cursor/Codex CLI/Gemini CLIなど 複数コーディングツールを一元管理 • 外部モデル対応 : AnthropicなどDatabricks外のモデルも 同じゲートウェイで管理可能 • 統合課金: DBUで一元管理、Anthropicへの別契約不要 • データ管理 : トラフィックがDatabricks環境内で完結 • ai-dev-kit: Claude CodeにDatabricks固有の知識 ・MCPツールを付与し開発体験を向上
42. ハンズオン Unity Catalogブラウザーを構築 40分 42
43. ハンズオン : Unity Catalog ブラウザー 1 環境準備 5分 作業フォルダの作成、Claude Codeの起動、CLAUDE.mdの確認 2 基本操作 5分 基本的な問い合わせ、スラッシュコマンドなどに慣れる 3 雛形作成 10分 Claude Codeでアプリの雛形を生成 4 機能追加 10分 対話的に機能を追加 5 デプロイ 10分 Databricks Appsにデプロイ 💡 詰まったらエラーをClaude Codeに貼り付けて相談! 43
44. ハンズオン : 環境準備 44 1. Claude Codeで作業するフォルダを作成(uc-browserなど) 2. 事前に配布されたCLAUDE.mdをフォルダに格納 3. VS Codeを起動
45. ハンズオン : 環境準備 45 1. 前のステップで作成したフォルダをオープン
46. ハンズオン : 環境準備 46 1. 左のスパークアイコンをクリック、+New Sessionをクリック
47. ハンズオン : 基本操作 47 以下のプロンプトを入力していきましょう hello.pyというファイルを作成して。"Hello, Databricks Apps!"と表示する簡単なPythonスクリプ トにして。 @hello.py この内容を説明して @hello.py を修正して、現在の日時も一緒に表示するようにして /context 最初のプロンプトにマウスホバー、巻き戻しボタンをクリック、Rewind code to here hello.pyを削除して
48. ハンズオン : 雛形の生成 48 以下のプロンプトを入力していきましょう。生成されたファイルを確認しましょう。 Unity CatalogのカタログとスキーマとテーブルをブラウズできるStreamlitアプリを作ってくださ い。 要件: - Databricks Appsとしてデプロイする構成(app.yaml, requirements.txt, app.py) - サイドバーでカタログ → スキーマ → テーブルを選択 - メインエリアに選択したテーブルの情報(カラム一覧)を表示 - databricks-sdkのWorkspaceClientを使う - SQL Warehouse IDはapp.yamlの環境変数から取得
49. ハンズオン : 機能の追加 49 以下のプロンプトを入力していきましょう。生成されたファイルを確認しましょう。 テーブルを選択したときに、先頭100行のデータプレビューをDataFrameで表示する機能を追加 して 時間に余裕がある方は、自由に追加の指示を出してみてください。例えば: • 「テーブルの行数とサイズを表示して」 • 「カラム名で検索できるフィルタを追加して」 • 「選択したテーブルのCREATE TABLE文を表示して」 • 「テーブルのコメント(説明文)も表示して」 • 「ダークモードに対応して」
50. ハンズオン : 機能の追加 50 Tips: 効果的な指示の出し方 • 一度に複数の要件を詰め込まず、1つずつ指示する • 期待と違う結果が出たら「やり直して」ではなく「◦◦の部分を△△に変えて」と 具体的に指示する • エラーが出たらエラーメッセージをそのままClaude Codeに貼ればOK • 気に入らない変更は前に体験した通り、チェックポイントから巻き戻せる
51. ハンズオン : デプロイ 51 ファイルを確認 uc-browser\ ├── CLAUDE.md ├── app.yaml ├── requirements.txt └── app.py
52. ハンズオン : デプロイ 52 VS Codeの統合ターミナルを開いて以下を実行して、アプリを作成 databricks apps create uc-browser-<your-name> 以下を実行してソースコードをワークスペースに同期 databricks sync . /Workspace/Users/<your-email>/apps/uc-browser-<your-name>
53. ハンズオン : デプロイ 53 アプリにリソースを追加
54. ハンズオン : デプロイ 54 VS Codeの統合ターミナルを開いて以下を実行して、アプリをデプロイ databricks apps deploy uc-browser-<your-name> --source-code-path /Workspace/Users/<your-email>/apps/uc-browser-<your-name>
55. ハンズオン : 動作確認 55 アプリのURLにアクセスして動作確認
56. 何を作りたいですか？ 56
57. アプリの可能性 57 • 議事録→アクションへの変換 ◦ 議事録を要約、 TODO抽出 • 仕様書コンプラアンスチェッカー ◦ 仕様書の設計適合性をチェック • 退職者ナレッジ継承アプリ ◦ 暗黙知をRAG化、後継者が質問可能に • ダッシュボードの AIアプリ化 ◦ 静的なダッシュボードを日本語で質問できるアプリに • データ品質レポーター ◦ データパイプラインの異常自動検知・説明
59. Thank You! Claude Code × Databricks Apps ワークショップ 59