はじめに
Claude CodeとAppKitを使って、NYCタクシーデータセットを可視化するDatabricks Appsのダッシュボードを作成してみました。コードをほぼ書かずに、Claude Codeとの対話だけでアプリが完成するまでの流れを紹介します。
使ったもの
- Claude Code - Anthropicの公式CLI
- Databricks AppKit - TypeScript/React製のDatabricks Appsフレームワーク
-
データ -
samples.nyctaxi.trips（Databricksのサンプルデータ）
手順
CLIのインストール
Databricks CLI(Commnad Line Interface)がインストールされていない場合にはインストールします。インストール済みの場合でも最新版にアップデートします。
AppKitのインストール
databricks experimental aitools skills install
プロンプト1：依頼する
Create a new Databricks app that displays a dashboard of the nyc taxi trips dataset.
nyc taxi tripsデータセットのダッシュボードを表示する新規のDatabricks appを作って
これだけです。あとはClaude Codeが動き始めます。
Claude Codeはまず手持ちのDatabricksプロファイルを確認しました。
Name Host Valid
DEFAULT https://xxxx.cloud.databricks.com NO
tokyo https://xxxx.cloud.databricks.com NO
test https://test.azuredatabricks.net YES
...
有効なプロファイルがtestだったので、それを使って作業を始めようとしました。
プロンプト2：プロファイルを変えてもらう
どのプロファイル使ってんの？
test プロファイルを使っています。
tokyo使えないの？
Claude Codeがtokyoを調べると、リフレッシュトークンが期限切れになっていました。
リフレッシュトークンが期限切れになっています。再認証が必要です：
$ databricks auth login --profile tokyo
プロンプト3：認証してから再指示
ブラウザで認証を済ませてから：
認証しました。tokyo使ってください
これでClaude Codeはtokyoプロファイルで作業を再開します。
ここからはClaude Codeが自律的に動きます。
まずデータを確認
samples.nyctaxi.tripsテーブルのスキーマとサンプルデータを自動で調べます。
COLUMNS:
tpep_pickup_datetime: timestamp
tpep_dropoff_datetime: timestamp
trip_distance: double
fare_amount: double
pickup_zip: int
dropoff_zip: int
total_rows: 21932
AppKitのマニフェストを確認してスキャフォールド
どのプラグインが使えるか確認した上で、ダッシュボードに必要なanalyticsプラグインを選んでアプリを生成します。
databricks apps init --name nyc-taxi-dashboard --features analytics \
--set analytics.sql-warehouse.id=bec52b183a4cfe2a \
--description "NYC Taxi Trips Dashboard" --run none --profile tokyo
✔ Project created successfully! (43 files)
SQLクエリを4本作成
ダッシュボードに必要なクエリをconfig/queries/に配置します。
-
kpi_summary.sql- 総トリップ数・平均距離・平均運賃・総売上 -
trips_by_hour.sql- 時間帯別トリップ数 -
fare_by_distance.sql- 距離帯別の平均運賃 -
top_pickup_zips.sql- 人気ピックアップZIPコードTop10
型を自動生成してからUIを実装
AppKitのワークフローに従い、SQLから型を生成してから（npm run typegen）UIを書きます。型が確定しているので、コンポーネントのpropsにタイポがあればコンパイルエラーになります。
BarChartやDataTableはqueryKeyを渡すだけでDatabricksのデータを自動取得してくれます。
// KPIは useAnalyticsQuery で値を取得してカード表示
const { data: kpi, loading, error } = useAnalyticsQuery('kpi_summary', EMPTY_PARAMS);
// グラフはqueryKeyを渡すだけ
<BarChart queryKey="trips_by_hour" parameters={emptyParams} />
// テーブルも同様
<DataTable queryKey="top_pickup_zips" parameters={emptyParams} pageSize={10} />
バリデーション → エラー → 自己修正
databricks apps validate --profile tokyo
型チェック・ビルドはパスしたものの、スモークテスト（Playwright）で引っかかりました。
Error: strict mode violation: getByText('Avg Fare') resolved to 2 elements:
1) <div>Avg Fare</div> ← KPIカードのタイトル
2) <div>Avg Fare by Trip Distance</div> ← グラフのタイトル
"Avg Fare"という文字列がページ内に2箇所あってテストが曖昧になっていました。Claude Codeは自分でテストのセレクタを修正して再実行します。
✅ All validation checks passed (14.9s)
デプロイ
databricks bundle deploy --profile tokyo
databricks bundle run app --profile tokyo
✓ App started successfully
You can access the app at https://nyc-taxi-dashboard-xxxx.aws.databricksapps.com
完成したダッシュボード
KPIカード（4種類）
総トリップ数・平均走行距離・平均運賃・総売上をカードで表示。ロード中はスケルトンアニメーションが出ます。
棒グラフ（2種類）
- 時間帯別トリップ数（朝・夕のラッシュアワーのピークが見える）
- 距離帯別の平均運賃（距離が長いほど運賃が上がる）
テーブル
人気ピックアップZIPコードTop10。ソートやフィルタリングが標準で使えます。
自分が入力したのはこれだけ
Create a new Databricks app that displays a dashboard of the nyc taxi trips dataset.
どのプロファイル使ってんの？
tokyo使えないの？
認証しました。tokyo使ってください
4回のメッセージのみです（うち2回はプロファイルの変更指示）。コードは1行も書いていません。
Claude Codeがやってくれたこと
- Databricksプロファイルの確認と認証状態のチェック
-
samples.nyctaxi.tripsのスキーマ・サンプルデータの調査 - AppKitのマニフェスト確認とスキャフォールド
- 4本のSQLクエリ設計・作成
- TypeScript型の自動生成
- React UIの実装（KPIカード・棒グラフ・テーブル）
- スモークテストの更新
- バリデーションエラーの自己修正
- バンドルデプロイとアプリ起動
まとめ
Claude Codeはスキルと呼ばれる拡張機能を使って動作します。今回はDatabricks Apps用のスキルが事前にインストールされており、AppKitの適切なワークフロー（SQL作成 → 型生成 → UI実装）を理解した上で開発を進めました。途中でセレクタの曖昧さによるテスト失敗を自分で直してくれたのは驚きました。
「どのデータを、どう見せたいか」だけ伝えれば、あとはClaude Codeに任せられます。