「GrafanaのGit Sync機能を使って生成AIと共にダッシュボードを開発してみた」というタイトルでDevelopersIO 2025 Osakaに登壇しました！ #devio2025
2025.09.06はじめに
2025年9月3日(水)に開催されましたDevelopersIO 2025 Osakaにて、「GrafanaのGit Sync機能を使って生成AIと共にダッシュボードを開発してみた」というタイトルで登壇しました！
登壇資料
ポイント
テーマを選んだ理由
まずなぜ今回このテーマを選んだのか？です。
普段業務で活用しているClaude CodeとGrafanaを掛け合わせてGrafanaのダッシュボードを自然言語で操作できないかな？なんとなくできそうだな〜というところから今回のテーマを選びました。
Grafanaを扱う中でこの辺りが課題だな〜と感じるのは
- データソース毎にクエリ言語が違う
- Grafanaのオプションが多すぎて作りたいダッシュボードを作るのにどの機能を使えばいいか分らない
- ダッシュボード構築の時間を削減したい
などなど、色々あります。
今回はこれらをClaude Codeで解決できないかやってみました。
何が必要？
では、Claude CodeでGrafanaを操作するのに必要なことはなんでしょうか。
色々な要素はあると思いますが、今回は3つに絞りました。
- ダッシュボードをコード化する
- リモート↔︎ローカル間でコードを受け渡し
- リモートのコードをダッシュボードに反映
コード化は、Grafanaの標準機能として、ダッシュボードは自動的にコード(json)が作成されるためクリアです。
次にローカルとリモート間のコード管理を実現するために、まずはGrafana APIを試しました。
やってみたブログは以前書いてるので興味がある方はご覧ください。
Grafana APIでもそれなりにやりたいことは実現できましたが、特にバージョン管理という点では少し工夫が必要でした。
Grafana Git Sync
ここで見つけたのがGrafana Git Syncです。
Git Sync機能についても過去にブログを書いているので、興味のある方はそちらをご覧ください。
簡単にいうとGit SyncはGrafanaのダッシュボードを定義したjsonファイルをGitHubと同期する機能です。
これを使うことでローカルからアップロードしたjsonファイルを(ほぼ)同期的にGrafanaのダッシュボードに反映させることができます。
Claude Codeへのインプット
Git Sync機能でコードを管理できることは分かりましたが、重要なのはClaude Codeでjsonファイルを編集する際のインプットです。
適当に「いい感じのダッシュボードを作って」でもそれっぽいダッシュボードは作成されますが、それっぽいだけで使えるダッシュボードは作成されませんでした。
より良いダッシュボードをアウトプットとして得るには、何を達成したいのか、目的や利用シーンを考えてインプットを渡すことが重要だと思います。
それを実現する最も簡単な方法として、私はダッシュボードのラフ図をFigmaで作成して渡しています。
ダッシュボードをテキストでインプット情報として渡すのは難しいので、図にすることで各パネルの配置も簡単に伝えることができます。
また、ラフ図を書く際には以下のことに注意しています。
ラフ図を渡して得られたアウトプットを新しいブランチを作成してプルリクエストを出すまではClaude Codeにやってもらうのが最も簡単です。
人間がダッシュボードのコードを見ても理解するのは難しいと思います。
しかし、このままでは結局マージしてダッシュボードに適用しなければ変更点がわかりません。
それではプルリクエストを出す意味がありません。
そこでGit Syncには便利な「プルリクエストプレビュー」機能があります。
少し分かりづらいですが、下の図のようにプルリクエストに変更前と変更後の画像を載せることができます。
個人的にはかなり激アツ機能だと思います！！
これらの機能を組み合わせ構築後は利用と修正のサイクルを回すことで、使われるダッシュボードに成長していくと思います。
作成されたダッシュボードを使う→気になるところを編集ということを繰り返し、最終的にはこんな感じのダッシュボードができました。
どうでしょうか？私の日常使いのAWS利用費分析ダッシュボードとして日々活躍しています。
最後にClaude CodeとGrafanaを組み合わせてみて以下のことを学びました。
最後に
今回はGrafanaのGit Sync機能とClaude Codeを組み合わせて使えるダッシュボードの構築を行ってみました。
次のステップとしてやってみたいことはラフ図の部分もClaude Codeか他のAIに作ってもらえないか試してみたいです。
何度かClaude Codeで試しましたが、最終的に人間の目で見たときにこのパネルはやっぱりなくてもいいな〜、このパネルからドリルダウンしてもっと深掘りしたいんだけどな〜というものが多かったです。
この辺りもインプットの渡し方次第かと思いつつ、現時点ではそこまでやるなら自分で作成した方が早いという状態です。
今後新しいものがどんどん出てくると思うのでダッシュボードの要件定義や設計部分についてもAIを取り入れていきたいと思います。
