イントロダクション
とある施策で効果測定のダッシュボードとダッシュボードに関するドキュメントが早急に必要になったのですが、Next.js + Tremor + Nextraの構成で1時間もかけずに叩き台を作ることができました。
この速度感に大変感動し、ぜひみなさんにも共有をしたかったので、簡単ではありますがTremorとNextraについてご紹介させていただきます。
Tremorを用いたダッシュボード作成
Tremorとは
ダッシュボードを高速で構築することを目指して作成されたオープンソースのReactライブラリです。
Tremorにはテーブルやボタンなどの一般的なUIコンポーネントに加えて、棒グラフや円グラフといったチャートのコンポーネントが用意されており、これらのコンポーネントを組み合わせるだけでダッシュボードを作成できるようになっています。
参考：コンポーネント一覧
似たようなライブラリはいくつかありますが、以下の点にメリットを感じて今回Tremorを採用しました。
- ドキュメントが分かりやすく、すぐに構築できそうだった
- Tailwind Cssを用いてカスタマイズが容易にできそうだった
- Tremorの開発にデータサイエンティストが関わっているのもあり、デザインが優れている
セットアップ
公式の手順書通りで問題なくセットアップが完了するかと思います。
途中、@heroicons/reactをインストールする手順がありますが、アイコンを使用する予定がなければスキップして大丈夫です。
Tremorを試してみる
まずはTremorを試すためのページを作成します。例としてページはapp/dashboard/page.tsxとします（Pages Routerを使用するでも問題ありません）
次にTremorのコンポーネントを使用してページを構築していきます。
今回は以下のようにしてみました。
import {
BarList,
Card,
Col,
Flex,
Grid,
Metric,
ProgressBar,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
Text,
Title,
} from "@tremor/react";
const DashboardPage = () => (
<>
<Title>ダッシュボード</Title>
<Text className="mb-4">Tremorにて作成したダッシュボードです</Text>
<Grid numItems={3} className="gap-4">
<Col numColSpan={1}>
<Card>
<Text>売上</Text>
<Metric>3,000,000円</Metric>
<TabGroup>
<TabList>
<Tab>店舗A</Tab>
<Tab>店舗B</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Flex className="mb-1">
<Text>商品A</Text>
<Text>1,000,000円</Text>
</Flex>
<ProgressBar value={100 / 3} />
</TabPanel>
<TabPanel>
<Flex className="mb-1">
<Text>商品A</Text>
<Text>2,000,000円</Text>
</Flex>
<ProgressBar value={200 / 3} />
</TabPanel>
</TabPanels>
</TabGroup>
</Card>
</Col>
<Col numColSpan={2}>
<Card>
<Text>顧客</Text>
<Metric className="mb-2">30,000人</Metric>
<BarList
data={[
{ name: "店舗A", value: 10000 },
{ name: "店舗B", value: 20000 },
]}
/>
</Card>
</Col>
</Grid>
</>
);
export default DashboardPage;
見て分かる通り、TremorのコンポーネントにTailwind CSSでマージンをつけただけのコードとなっています。これで表示確認をすると以下のようになります。
スタイルを当てずともよさげなダッシュボードになっていますね。
他にも色々なコンポーネントがTremorにはあるのですが、紹介しきれないため、先述したコンポーネント一覧を見て触ってみることをおすすめします。
また、Next.jsのテンプレートにもTremorを使用した例がありますので、合わせて見てみると使用感が分かるかと思います。
Nextraを用いたドキュメント作成
Nextraとは
Next.jsをベースにドキュメントやブログを簡単に構築できるフレームワークです。
ページはMDXで構築するため、マークダウンで簡単にコンテンツを作成することができます。
以下のリンクからNextraのショーケースが見られるのですが、Node.jsやSWRといった名のあるところでもNextraを採用していたりします。
セットアップ
今回はドキュメントを作成するので、以下のドキュメントテーマのセットアップを参照します。
Tremor同様、これも公式の手順書通りに進めれば特に躓くことなくセットアップは完了するかと思います。
Nextraを試してみる
まずはNextraを試すためにいくつかファイルを作成します。
ここで注意なのですが、Nextraは2023年11月時点でApp Routerに対応していません。なので、App Routerを採用している場合は新たにpagesディレクトリを作成してください。
例としてページ構成は以下のようにします。
pages/
├─ docs/
│ ├─ glossary/
│ │ ├─ _meta.json
│ │ └─ kpi.mdx
│ ├─ _meta.json
│ └─ index.mdx
└─ _meta.json
それぞれのファイルについて見ていきましょう。
①. MDXファイル
pages/docs/index.mdxとpages/docs/glossary/kpi.mdxが該当するファイル。ここにマークダウンを記述することでドキュメントを作成することができます。
例としてpages/docs/glossary/kpi.mdxで以下のように記述してみます。
# KPI
## KPI とは
組織の目標達成の度合いを定義する補助となる計量基準群である。
引用元：https://ja.wikipedia.org/wiki/%E9%87%8D%E8%A6%81%E6%A5%AD%E7%B8%BE%E8%A9%95%E4%BE%A1%E6%8C%87%E6%A8%99
## 指標の特定
組織は少なくとも KPI を特定しておかなければならない。KPI 特定に関わる環境として以下の点が上げられる。
- 事前定義されたビジネスプロセスがあるか。
- ビジネスプロセスに対して明確な目標が決まっているか。
- 結果を測定して目標と定量的/定性的に比較できる方法があるか。
- 差異を調査し、目標達成のためにプロセスやリソースを調整できるか。
引用元：https://ja.wikipedia.org/wiki/%E9%87%8D%E8%A6%81%E6%A5%AD%E7%B8%BE%E8%A9%95%E4%BE%A1%E6%8C%87%E6%A8%99
この状態で/docs/glossary/kpiにアクセスをすると以下のようにドキュメントが作成されています。
ドキュメントはもちろん、よしなに左メニューも作成されていい感じですね！
ただ、左メニューにあるdocsを非表示にしたり、タイトルを日本語にしたらもっと見やすくなりそうです。そこで使用するのが_meta.jsonです。
②. _meta.jsonファイル
_meta.jsonｊは、左メニューに表示するタイトル名や表示順などをいじる際に使用します。
試しにそれぞれの_meta.jsonを以下のようにしてみます。
{
"docs": {
"title": "ドキュメント",
"type": "page"
}
}
{
"index": "イントロダクション",
"glossary": "用語集"
}
{
"kpi": "KPI"
}
json:pages/docs/_meta.jsonとjson:pages/docs/glossary/_meta.jsonはタイトル名を変更しているだけで、json:pages/_meta.jsonは/docsをサブドキュメントに変更することでメニューに表示しないようにしています。
この状態で改めて/docs/glossary/kpiにアクセスをすると以下のようになります。
だいぶ左メニューが見やすくなったかと思います。
他にも色々設定ができる項目があるので、詳しくは以下をご覧ください。
まとめ
以上、TremorとNextraのご紹介でした。この記事がダッシュボードやドキュメントの構築の助けになれば幸いです。
もし他におすすめなライブラリなどありましたら是非ともコメントで教えてください。
Discussion