shadcn/uiとDuckDB Wasmでデータ可視化(準備編)
この記事ではviteで環境したシンプルな環境にshadcn/uiを導入する手順を紹介します。
こんにちは。シニアエンジニアのKoshiishiです。
以前の記事 でViteで構築した環境にDuckDB Wasmを引いてきて簡単なクエリ実行環境を作ってみました。
クエリ結果をshadcn/uiのBeautiful Charts で可視化したら面白いのではと思い、その準備のためshadcn/uiの導入を行ってみた記事です。
クエリ結果をチャートで可視化する手順は別記事にて。
インストール手順は基本的に公式のインストール手順 通りで問題ありません。
shadcn/ui導入のPRはこちら にありますが、手順はコードに残っていないため手順を紹介させていただきます。
bun add -D tailwindcss postcss autoprefixer
bunx tailwindcss init -psrc/index.cssに追記
@tailwind base;
@tailwind components;
@tailwind utilities;tailwind.config.jsのcontentに追記
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],tsconfig.jsonに追記
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}compilerOptionsの項目に追記
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
bun add -D @types/nodeをしたのち、vite.config.jsを編集
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})※ 私はこだわりがないためすべてデフォルトで答えてしまいました
後からの変更は大変そうですので、公式のtheming 等をご覧になることをお勧めします。
bunx shadcn@latest init
Which style would you like to use? › New York
Which color would you like to use as base color? › Neutral
Do you want to use CSS variables for colors? › yesこちらでインストールは完了です。
ボタンを追加したい場合はこちらのコマンドで
bunx --bun shadcn@latest add buttonボタンコンポーネントが引かれてきて、プロジェクト内で参照できるようになります
import { Button } from "@/components/ui/button"画像のRun Queryやフォントサイズを上下させるボタンはshadcnのButton を、左下の通知はshadcnのToast を使ってみました。
Toastはデフォルトでは右下から出現しますが、今回CSVインポート後にユーザーの視点は左下にあると考えられるため、左下に移動しました。
CSVのインポートプレビューではTable を使ってみました。
ソート等が可能なDataTable があるようなので、クエリ結果の表示にこちらを活用してみようと思います。
使いたいコンポーネントだけ個別に追加、カスタムが手軽にできる点が非常に快適で、一旦このアプリはshadcn/uiを使っていくことにしました。
今後はDataTableの深堀や、チャート機能等を追加してより充実したクエリ実行環境を目指します。
執筆者プロフィール：Kenta Koshiishi
スタートアップ企業でFigmaを使用したUI設計から、Rustでのバックエンド開発、Reactでのフロントエンド開発まで、一気通貫で手掛けてきた。 SHIFTではシニアエンジニアとして入社し、既存のWebアプリに触れ始めた。
お問合せはお気軽に
SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/
SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/