Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Duckdb-Wasmでローカルダッシュボードを作ってみた
Search
nk
November 02, 2024
Programming
0
790
Duckdb-Wasmでローカルダッシュボードを作ってみた
nk
November 02, 2024
Tweet
Share
More Decks by nk
See All by nk
S3 metadata/S3 tablesからAthenaで データ取得してみた。
nkforwork
0
110
Guide to creating an AWS Lambda function in Python with DuckDB
nkforwork
0
170
Other Decks in Programming
See All in Programming
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
型で語るカタ
irof
0
700
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
3
410
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
620
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What's in a price? How to price your products and services
michaelherold
246
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
970
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Facilitating Awesome Meetings
lara
54
6.5k
Producing Creativity
orderedlist
PRO
346
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Duckdb-wasmでつくる ローカルダッシュボード クラメソおおさか IT 勉強会 Midosuji Tech #3
自己紹介 名前:nk 職種:製造DX関係(業務自動化・データ可視化 ) 経歴:製造業→SES一年目 使用言語:主にPython(とVBA) 個人でReact・AWS等
内容 ・自分用ダッシュボードを作った。 ・Duckdb-wasmとは ・気づき ・今後検証したいこと
こんなダッシュボードが欲し い... 😑 重くないやつ (PowerBIやStreamlitより軽い) デザインを色々 カスタマイズできる。 ローカルで動く (データソースも内包) 社内制約...
Macで使えて無料
NBAで活躍中の河村勇樹選手のスコアを使用
None
Duckdb…? 🤔
Duckdb…? 😲 組み込みデータベース (ローカル) データ分析など 大量の集計向き 必要な列のみ欲しい時 高速 読み込み形式: CSV,JSON,Parguet…
Wasm(Webassembly)…? 🤔
Wasm…? 😧 バックエンド処理を フロントエンドに埋め込む OSやデバイスに依存しない 様々な言語から コンパイルされる サンドボックス内で 安全に処理
Duckdb+Wasm…? 🤔
Duckdb+Wasm…? 🧐 バックエンド処理 +データベースとの処理を フロントエンドに埋め込む 実質使用言語は Javascript or Typescript +SQL
データ分析用の 大量集計など可能 このままだとデータは消 える
Duckdb+Wasm+OPFS…! 👍 バックエンド処理 +データベースとの処理を フロントエンドに埋め込む 実質使用言語は Javascript or Typescript +SQL
データ分析用の 大量集計など可能 +OPFS ブラウザにデータを永続化 (LocalStrageのようなもの)
React内で アプリが完結 🙌
アプリ構成図 OPFS内 CSV view 👀 ✍
コードの一部紹介 (時間がなかったため...)
気づき ・サーバーサイドがない (クライアントサイドしかない ?) ・バックエンドとの繋ぎこみを考えなくて良いの で作るのが楽 ・SQLはそこまで必要ない ・データ更新時のみS3からデータをとってくるな どAWSとの連携可能? ・
今後検証したいこと 1:セキュリティってほんとに安全? 2:もっと重いデータでもほんとに速い? 3:ストリーミングデータは扱えるの? 4:Postgresqlとの通信ができるの? 5:parquetでどのくらいの規模のデータを扱える の? 6:パフォーマンスチューニングって意味ある の?(キャッシュ等) 7:AWS等で作ったパイプラインとの連携
8:実際のデータに基づいたダッシュボードの改 良 ・