はじめに
「ダッシュボードを1つ直すだけなのに、マウスでウィジェットをドラッグして、フィルタを設定して、また別のマウス操作で微調整して……」。ドラッグ&ドロップ型のBIツールを使っていて、こんなもどかしさを感じたことはないでしょうか。GUI操作は直感的な反面、変更履歴が残らず、レビューもしづらく、複数人での共同作業にも向いていません。
Evidenceは、そんな悩みを「コードで解決する」という発想のBIツールです。ダッシュボードの定義をSQLとMarkdownというテキストで書くため、Gitでバージョン管理でき、差分レビューもでき、CIに組み込むこともできます。この記事ではEvidenceの特徴からインストール方法、実際にグラフを描画するところまでを解説します。
Evidenceとは
Evidence（Evidence.dev）は、SQLとMarkdownを使ってインタラクティブなデータ可視化・レポートを構築できるオープンソースのBIフレームワークです。「Business Intelligence as Code」を掲げており、Tableauやドラッグ&ドロップ型BIツールに対する、コードベースの代替として開発されています。
Markdownファイルの中にSQLクエリを書くと、それがデータソースに対して実行され、結果を使ってチャートやテーブルが自動的に描画されます。ビルドすると静的サイトとして出力できるため、Netlify・Vercel・GitHub Pagesなど、好きな場所にホスティングできるのも大きな特徴です。
主な特徴
- SQL + Markdownだけで完結 - コードエディタとGitがあれば、専用GUIツールなしでダッシュボードを作成・修正できます
- 豊富なチャートコンポーネント - ECharts をベースにした棒グラフ・折れ線グラフ・散布図・ヒートマップ・ファネルチャートなど多数のコンポーネントが標準搭載されています
- テンプレートページ機能 - 1つのMarkdownテンプレートから、クエリ結果の行数に応じて商品別・地域別など複数ページを自動生成できます
- 静的サイト出力 -
npm run buildで静的サイトを生成でき、任意のホスティングサービスにデプロイできます - 多様なデータソース対応 - DuckDB、PostgreSQL、BigQuery、Snowflake、CSVなど幅広いデータソースに接続できます
インストール
Evidenceを試す最も手軽な方法は、CLIでテンプレートプロジェクトを取得することです。Node.jsがインストールされている環境で、以下のコマンドを実行します。
npx degit evidence-dev/template my-evidence-app
cd my-evidence-app
npm install
npm run sources
npm run dev
npm run dev を実行すると開発サーバーが起動し、ブラウザで http://localhost:3000 を開くとサンプルダッシュボードが表示されます。ファイルを保存するとホットリロードでブラウザに即座に反映されるため、SQLやMarkdownを編集しながら見た目を確認できます。
なお、VS Codeを使っている場合は「Evidence VSCode Extension」を導入し、コマンドパレットから Evidence: New Evidence Project を実行する方法でも同様にプロジェクトを作成できます。
基本的な使い方
Evidenceのページは pages ディレクトリ以下のMarkdownファイルとして作成します。まずはデータソースとなるSQLクエリを sources/ ディレクトリに用意します。
-- sources/needful_things/orders.sql
select
order_id,
order_datetime,
customer_email,
sales_amount
from orders
このクエリは needful_things.orders というテーブルとして、Markdownページ内から参照できるようになります。ページ側では、コードフェンスの中にSQLを書くことでクエリを実行し、その結果をコンポーネントに渡します。
# 月別売上レポート
```orders_by_month
select
date_trunc('month', order_datetime) as order_month,
sum(sales_amount) as total_sales
from needful_things.orders
group by order_month
order by order_month
```
<LineChart
data={orders_by_month}
x=order_month
y=total_sales
yFmt=usd0
/>
<DataTable data={orders_by_month}>
<Column id=order_month title="対象月" fmt="mmm yyyy" />
<Column id=total_sales title="売上合計" fmt=usd0 />
</DataTable>
このように、クエリ名をそのまま data プロパティへ渡すだけで、チャートとテーブルの両方に同じ結果を使い回せます。SQLを1行変更すれば、グラフとテーブルの両方に反映される点が、コードベースならではの利点です。
実践的なユースケース
フィルタ付きダッシュボード
Dropdown コンポーネントと組み合わせることで、ユーザーが選んだ条件でクエリ結果を絞り込むインタラクティブなダッシュボードを作れます。
<Dropdown data={categories} name=category value=category_name>
<DropdownOption value="%" valueLabel="すべて" />
</Dropdown>
```filtered_sales
select
category_name,
sum(sales_amount) as total_sales
from needful_things.orders
where category_name like '${inputs.category.value}'
group by category_name
order by total_sales desc
```
<BarChart data={filtered_sales} x=category_name y=total_sales />
カテゴリ別に自動でページを量産する
テンプレートページ機能を使うと、カテゴリ数だけ手作業でページを作る必要がなくなります。pages/categories/[category].md のようなファイル名にしておくと、クエリの行数に応じて products/food.md products/toys.md のようなページが自動生成されます。
<!-- pages/products/[category].md -->
# {params.category} の売上詳細
```category_sales
select order_month, sum(sales_amount) as total_sales
from needful_things.orders
where category_name = '${params.category}'
group by order_month
order by order_month
```
<LineChart data={category_sales} x=order_month y=total_sales />
社内向けの営業日報や、顧客ごとのレポートなど「同じ構成で対象だけが変わるページ」を大量に作る場面で威力を発揮します。
まとめ
Evidenceは、SQLとMarkdownという開発者にとって馴染み深い技術だけで、インタラクティブなBIダッシュボードを構築できるツールです。GUI操作に頼らずコードとして管理できるため、Gitでの差分管理やレビュー、CI/CDへの組み込みが自然に行えます。
今回紹介したチャートやテーブルの他にも、地図コンポーネントやファネルチャート、サンキーダイアグラムなど多数のコンポーネントが用意されています。まずは npx degit evidence-dev/template でテンプレートを取得し、手元のCSVやデータベースを接続してみてはいかがでしょうか。