Squadbase

AIを使ったコード生成・コード編集

AIコーディングツールを活用してBIダッシュボード構築を効率化する方法を学習する

従来のBIツールでは、データの可視化方法やダッシュボードのレイアウトが制限されがちです。一方、Streamlitのようなコードベースのダッシュボードなら、あらゆるカスタマイズが可能です。

しかし、「プログラミングは難しそう」という印象を持つ方も多いでしょう。ここでAIコーディングツールが威力を発揮します。自然言語で「売上データを地域別に可視化したい」と伝えるだけで、必要なコードを生成してくれるからです。

本章では、ChatGPTとGithub Copilotを中心に解説します。より高度なツールであるCursorやClaude Codeは追って公開予定の書籍で詳しく解説します。

BIダッシュボード構築に適したAIツールの選び方

AIコーディングツールには大きく3つのタイプがあります:

ツールタイプ利用場面非エンジニア向け適性
チャット型自然言語での指示◎ 「売上を可視化したい」で通じる
コード補完型既存コードの効率化△ ある程度のプログラミング知識が前提
CLI型コマンドラインでの操作△ コマンドラインツールへの慣れが必要

BIダッシュボードを構築したいビジネスユーザーには、チャット型ツールから始めることをおすすめします。プログラミングの詳細を知らなくても「月次売上の推移をグラフで表示したい」といった自然な要求を伝えるだけで、必要なコードを生成してくれます。

主要なAIコーディングツール比較

ツール特徴BIダッシュボード構築への適性
ChatGPT気軽に試せる汎用ツール◎ プロトタイピングに最適
GitHub CopilotIDE統合、コード補完○ エンジニア向け
Cursorプロジェクト理解に優れる◎ 本格開発向け
Claude Code高度な推論能力◎ 複雑なロジック構築向け

初心者におすすめの始め方

  1. まずChatGPTで基本コードを生成
  2. Github Codespacesに移動して、Github Copilotを活用
  3. 高度な機能が必要ならCursorやClaude Codeを検討

AIツールで確実に成果を出すための実践テクニック

「AIにお願いしたけど思うような結果が出ない」という経験はありませんか?AIコーディングツールは強力ですが、適切な指示の出し方を知ることで、その性能を格段に向上させることができます。

成功するプロンプトの3つの要素

1. 目的の明確化 AI が適切なデザインや機能を提案するためには、何を達成したいのかを明確に伝える必要があります。

❌ 悪い例:「売上グラフを作って」
✅ 良い例:「月次役員会議用に、過去12ヶ月の売上推移を一目で把握できるグラフを作成したい」

2. データ構造の共有

分析や可視化に使いたいデータを提供せずにAIに指示を出すと、「だいたいこんなもんだろう」という予想のデータ構造のコードを生成します。具体的なデータを構造を提供することで、AIはより正確なコードを生成できます。

たとえば、チャットAIであれば、実際のデータの一部をcsv形式で書き出したものをアップロードしたりするとよいでしょう。

添付したCSVファイルは、今月の売り上げデータの一部です。このデータを使って、月次売上の推移を可視化するグラフを作成してください。 ...

3. 技術仕様の指定

AIに生成してもらうコードの技術仕様を明確にすることで、実際の開発環境に適したコードを得ることができます。たとえば、使用するライブラリやデータ形式、レスポンシブ対応などの要件を具体的に伝えます。

...
以下の要件に従ってください。
- 使用ライブラリ:Streamlit, Pandas, Plotly
- データ形式:CSV
- 表示要件:レスポンシブ対応
...

段階的開発のベストプラクティス

一度に「完全なダッシュボード」を依頼するのではなく、「データ読み込み」→「基本的なグラフ表示」→「フィルター機能」のように段階的に構築することで、エラーの特定と修正が容易になります。 また、チャット型のAIツールを使う場合には、前の段階の結果を次の段階の入力として活用することで、よりスムーズな開発が可能です。

推奨する開発順序:

段階作業内容確認ポイント
1データ読み込みCSVファイルが正しく表示される
2基本グラフ表示データが正確にグラフ化される
3インタラクティブ機能フィルターが期待通り動作する
4スタイリング見た目が要件を満たす

エラーの対処方法 途中のステップでエラーが発生した場合は、以下の流れでAIに相談します。

  1. エラーメッセージをすべてコピーして共有
  2. 実行環境(Pythonバージョン、ライブラリのバージョン)を明記
  3. 「どの段階で」「何をしたときに」エラーが出たかを説明
```python app.py
import pandas as pd
import streamlit as st
# データ読み込み
data = pd.read_csv('sales_data.csv')
st.dataframe(data)
```

このコードを `streamlit run app.py` で実行したところ、以下のエラーが出ました。 Pythonのバージョンは3.11で、Streamlitのバージョンは1.45です。

```
[エラーの内容をここに貼り付け]
```

次のステップ これらの基本原則を踏まえ、Part 3では実際にChatGPTを使ってStreamlitアプリを構築する具体的手順を学びます。

ChatGPTで作る実践的BIダッシュボード

理論は十分です。今度は実際にChatGPTを使って、売上データを可視化するダッシュボードを構築してみましょう。このセクションでは、「データ分析の経験はあるが、プログラミングは初心者」という方でも、30分程度で本格的なダッシュボードを作成できる手順を紹介します。

実践:30分で作る売上ダッシュボード

完成イメージ

  • 売上推移の折れ線グラフ
  • 地域別売上の円グラフ
  • インタラクティブなフィルター機能
  • レスポンシブな美しいUI

開発フロー:

Step 1: システムプロンプトの作成

まずは、チャットのスレッドをStreamlitアプリの開発に適した振る舞いに設定するためのシステムプロンプトを作成し、送信します。

## システムプロンプト
あなたはStreamlitでBIダッシュボードを作成するエキスパートです。
今からStreamlitアプリケーションのプロトタイプ開発を行います。

**役割**
ユーザーの指示に基づいて、Streamlitアプリケーションの完全なPythonコードを生成します。
データ可視化、インタラクティブなUI要素、データ処理など、Streamlitの機能を最大限に活用したコードを提供します。

**データ**
対象データ (一部):
Transaction ID,Date,Product Category,Product Name,Units Sold,Unit Price,Total Revenue,Region,Payment Method
10001,2024-01-01,Electronics,iPhone 14 Pro,2,999.99,1999.98,North America,Credit Card
10002,2024-01-02,Home Appliances,Dyson V11 Vacuum,1,499.99,499.99,Europe,PayPal
10003,2024-01-03,Clothing,Levi's 501 Jeans,3,69.99,209.97,Asia,Debit Card
10004,2024-01-04,Books,The Da Vinci Code,4,15.99,63.96,North America,Credit Card
10005,2024-01-05,Beauty Products,Neutrogena Skincare Set,1,89.99,89.99,Europe,PayPal
10006,2024-01-06,Sports,Wilson Evolution Basketball,5,29.99,149.95,Asia,Credit Card
10007,2024-01-07,Electronics,MacBook Pro 16-inch,1,2499.99,2499.99,North America,Credit Card
10008,2024-01-08,Home Appliances,Blueair Classic 480i,2,599.99,1199.98,Europe,PayPal
10009,2024-01-09,Clothing,Nike Air Force 1,6,89.99,539.94,Asia,Debit Card
10010,2024-01-10,Books,Dune by Frank Herbert,2,25.99,51.98,North America,Credit Card

**注意事項**
- コードはPython 3.9以上で動作するように記述してください。
- ユーザーはプログラミングの専門家ではない可能性があります。そのため、コードは読みやすく、必要に応じて簡潔なコメントを含めてください。
- Streamlitのベストプラクティスに従い、効率的かつパフォーマンスの良いコードを心がけてください。
- 可能な限り、最新のStreamlit機能を使用してください。
- データを参照し、他にエラーが出そうな箇所があればここに追記をしてください。

**出力フォーマット**
- 生成するコードは、Markdownのコードブロック(```python ... ```)で囲んでください。
- コードの前に、そのコードの概要や使用方法を簡潔に説明してください。

**エラーが発生した場合の対処方針**
- ユーザーからエラーメッセージが提供された場合、そのエラーメッセージとコードの内容を分析し、修正案を提示してください。
- 修正コードは、元のコードのどの部分を変更したかを明確に示してください。
- エラーの原因と修正方法について、分かりやすく説明してください。

---

これからユーザーがStreamlitアプリケーションの開発を依頼するので待機してください。

Step 2 具体的で実行可能なプロンプト作成

続いて、要件を元に具体的なプロンプトを作成します。以下のように、チェックリスト形式で要件を整理すると、漏れがなくなります。

以下の要件でStreamlit売上ダッシュボードを作成してください。

【基本機能】
- タイトル:「2024年度 売上分析ダッシュボード」
- メイン画面:3つのグラフを横並び表示
- データソース: ユーザーがアップロードするCSVファイル。CSV形式はシステムプロンプトで指定されたものに従う。

【グラフ要件】
1. 月次売上推移(折れ線グラフ)
   - X軸:月、Y軸:売上金額
   - 前年同月比も表示

2. 地域別売上構成(円グラフ)
   - 各地域の売上割合
   - データラベル付き

3. 製品カテゴリ別売上(棒グラフ)
   - 降順ソート
   - 色分け対応

【UI要件】
- サイドバー:期間・地域フィルター
- カラーテーマ:ビジネス向け(青系統)
- レスポンシブ対応

Step 3: コードの実行と動作確認

ChatGPT が生成したコードは、Python ファイル(例: app.py)として作業中のコードエディターに貼り付けます。まだ開発環境のセットアップが終わっていない場合は、開発環境のセットアップを参照して、開発環境をセットアップしてください。

その後、ターミナルやコマンドプロンプトで以下のコマンドを実行することで、Streamlit アプリが起動します。

streamlit run app.py

実際に上記のプロンプトで制作したアプリの例は次のとおりです。

アプリのスクリーンショット

Step 4: 効果的なエラー解決法

よくあるエラーと解決パターン

エラータイプ原因解決方法
ModuleNotFoundErrorライブラリ未インストールpip install [ライブラリ名]
FileNotFoundErrorファイルパス間違い絶対パスに変更
KeyErrorカラム名の不一致データ構造を再確認

エラー修正プロンプトのテンプレート

以下のテンプレートを使って、エラー報告を行うと、AIがより正確に問題を理解し、解決策を提示してくれます。

【エラー報告】
実行環境:Python 3.9, Windows 10

【発生したエラー】
```
[エラーメッセージを完全コピー]
```

【実行したコード】
```python
[問題のコードを貼り付け]
```

【期待する動作】
売上データが正しくグラフ表示されること

【追加情報】
- データファイル:sales_data.csv(1000行)
- 症状:アプリは起動するがグラフが表示されない

セキュリティ

AI コーディングツールの利便性は魅力的ですが、セキュリティ面でのリスクも考慮し、対策を講じる必要があります。

サンドボックス環境の利用

自律的なコード生成や実行を行う AI ツールを使用する際は、サンドボックス環境での開発を強く推奨します。これにより、予期しない操作が発生しても、本番環境やローカルシステムへの影響を防げます。

ローカル環境では VSCode Dev Container のようなツールを用いることで、サンドボックス環境で開発を行うことができます。また、GitHub Codespaces のようなクラウドベースの開発環境もサンドボックス環境として利用可能です。

シークレット情報の管理を適切に

AI の提案をそのまま受け入れていると、センシティブな情報が意図せずコードに含まれたり、バージョン管理システムにコミットされるリスクがあります。

環境変数を使って (.env) 機密情報の管理した上で、.env ファイルは .gitignore に追加して、バージョン管理から除外することが重要です。

# .env ファイルの例
DATABASE_URL=postgres://user:password@localhost/dbname
API_KEY=your_api_key_here
# .gitignore ファイルの例
.env
...# その他の除外ファイル

最小権限の原則

BI ダッシュボードで使用するデータベース接続では、必要最小限の権限を持つユーザーアカウントを使用しましょう。例えば、ダッシュボードが参照のみを行う場合は、読み取り専用のユーザーを作成してデータベースに接続します。

このアプローチにより、万が一 AI が意図しない操作を提案したとしても、システム全体への影響を最小限に抑えることができます。セキュリティと利便性のバランスを保ちながら、AI ツールの恩恵を最大限に活用していきましょう。

まとめ:AIツールでBIダッシュボード開発を効率化する

本章で学んだ重要ポイント:

1. ツール選択の戦略

  • プロトタイピング:ChatGPT(手軽、学習コスト低)
  • 本格開発:GitHub Agents(高機能、プロジェクト理解)
  • 段階的移行:小さく始めて、徐々に本格ツールへ

2. 成功するプロンプト設計

  • 目的と背景を明確化
  • データ構造の具体的共有
  • 段階的な機能分割

3. 実践的な開発フロー

  • システムプロンプトの設定
  • 具体的な要件をプロンプト化
  • コードの実行とエラー解決
  • セキュリティ対策の実施

次のステップ

次章では、より深い分析のために探索的データ分析 (EDA) の手法を学び、BIダッシュボードの機能をさらに拡張する準備を行いましょう。