TSKaigi Kansaiから帰ってきてDuckDB Wasmで遊んだ - Mitsuyuki.Shiiba

TSKaigi Kansaiから帰ってきてDuckDB Wasmで遊んだ

TypeScript

カケハシのスタッフとしてTSKaigi Kansaiに参加して楽しんできた。

スポンサーのランチLTでカケハシのメンバーも喋るからブースを抜け出して見に行ってたら、newmoの大貫さんのLTで「DuckDB Wasmを使ってクライアントだけで処理したよ！」って発表があって、面白いなーと思ったのだった。

kansai.tskaigi.org

ので、遊んだ

DuckDBは初めて知ったし、Wasmには興味があるので、遊んでみた。GitHub Pagesにアップロードしておいた。11/18の日本各地の最高気温が分かるよ！

https://bufferings.github.io/vite-react-duckdb-wasm/

やってるのは

  1. DuckDB Wasmをクライアントで取得して
  2. e-Govデータポータルの11/18の最高気温のCSVをDuckDBに入れて
  3. そのDBの内容をテーブルに表示
  4. テキストボックスの内容が変更されたら、SQLを実行してその値で結果をフィルタリングして表示

最高気温のデータは、こちらからダウンロードしておいた。

CSVで何か適当なデータがほしいなと思ってe-Govからこれを見つけてきたのだ。Shift_JISだったのでUTF-8に変換して、静的コンテンツとしてダウンロードして使っている。

面白かった。クライアントで処理するから速いよね。ふむふむ。

ソースコード

https://github.com/bufferings/vite-react-duckdb-wasm/

どんなふうに動くのかなーって適当に試しただけなので、本番運用で使えるレベルのものでは全くない。

使ってみたもの

DuckDB Wasmだけ使えたら満足なつもりで始めたのに、せっかく遊ぶんなら！ってちょこちょこ手をだして楽しんでた。

  • Vite (+ React + TS) https://ja.vite.dev/
    • 素のHTMLでも楽しめそうだったけど、せっかくならReactとTSを使っておこうと思ってViteで作った
  • Biome https://biomejs.dev/
    • TSKaigi KansaiでもBiomeの話をよく耳にしたなぁ。と思って、Viteの用意してくれたESLintを全部消して、BiomeでLintとFormatをするようにしてみた
    • WebStormにもプラグインがあってOn Saveで動いてくれるので便利
    • ESLintやPrettierと違う部分もあるけど、慣れだけの問題かなって思った
  • duckdb-wasm-kit - npm
    • DuckDB WasmをReactで簡単に使えるようにしてくれてるやつないかなぁ？って思って、この duckdb-wasm-kit と、@duckdb/react-duckdb - npm を比べてみて、なんとなく duckdb-wasm-kit の方が便利な感じがしたのでこっちでやってみた。
    • React Hooksがあるので、それでDuckDBが取得できる。便利！
  • React Spinners
    • DuckDBのダウンロードに少し時間がかかるからSpinnerでも表示しようかなと思って、これを見つけたので適当に選んで置いといた
    • もう少しSpinnerを眺めていられると思ってたら、想像してたよりずっとあっさりDuckDB Wasmのダウンロードが終わってしまう
  • useAsync
  • useDebounce
  • Material UI: React components that implement Material Design
  • Apache Arrow https://arrow.apache.org/
    • DuckDBも知らなかったけど、これも全然知らなかったやつ。DuckDB Wasmの結果はこのArrowのTable形式で返ってくる。

こんなところかな。いろんなライブラリに触れられて楽しかった！