記事(全 19 本)
ライブラリ別の実装ノート。category で絞り込めます。
言語 / 開発ツール
3 本-
大規模コードベースの Claude Code — モデルではなくハーネスを設計する
検証 2026-05-16 @anthropic-ai/claude-code 2.xAnthropic が「数百万行のモノレポ / レガシー / マイクロサービス分散」で Claude Code を回している企業を観察してまとめたベストプラクティスの日本語要約。CLAUDE.md / フック / スキル / プラグイン / LSP / MCP / サブエージェント の 7 層ハーネス、成功 3 共通パターン、そして同名スキルの優先順位(Enterprise > Personal > Project)の実用ルールまで。
-
Biome v2 で TypeScript / Astro / MDX を一本化する
検証 2026-05-10 @biomejs/biome 2.4.xBiome v2 系で lint + format を一本化する時の biome.json 設定、ESLint からの移行ポイント、Astro / MDX / monorepo での設定差分、よく詰まる点を実装観点で整理。
-
Vitest v3 で TypeScript / React / MSW のテスト基盤を組む
検証 2026-05-10 vitest 3.xVitest v3 系で unit / component / integration テストを 1 つの runner に集約する設定パターン — globals / projects 分割 / coverage / msw 併用 / vi.mock / fake timers / playwright との分業を実装メモ化。
データユーティリティ
4 本-
marked v17 で Markdown を HTML に変換する
検証 2026-05-26 marked 17.0.3marked v17 系で Markdown → HTML を最小コードでパースする方法、GFM 拡張、DOMPurify 併用のサニタイズ。Lexer → Parser → Renderer 3 段パイプラインと拡張ポイント、breaks: true で挙動が変わる罠、async: true で Promise になる API 差まで実装メモ。
-
Papa Parse v5 で CSV をブラウザでパース・生成する
検証 2026-05-26 papaparse 5.5.3Papa Parse v5 系で CSV を header 自動検出 + dynamicTyping + ストリーム処理で扱うパターン。Excel の Shift_JIS / BOM、worker:true で main thread を逃がす設計、step ストリーミング時に results.data が空になる罠まで実装メモ。
-
pptxgenjs でブラウザだけで .pptx を生成する
検証 2026-05-10 pptxgenjs 4.xPptxGenJS v4 を使った PowerPoint ファイル(.pptx)のクライアント生成パターン — addSlide / addText / addTable / addChart の最小構成、レイアウトサイズ(LAYOUT_WIDE)とテンプレ運用、ブラウザの writeFile / Node の writeFile / stream を出力先別に整理、画像/SVG 埋め込みの注意を触れる demo 付きで実装メモ化。
-
uuid v14 で v4 / v7 を生成して検証する
検証 2026-05-26 uuid 14.0.0uuid v14 系の API(v4 ランダム / v7 時刻 prefix / validate / version)を最小コードと触れる demo で確認する実装メモ。Node 18+ / ブラウザ標準 crypto.randomUUID() との使い分け、v7 timestamp leak のセキュリティ注意点、@types/uuid deprecated の移行も。
可視化(チャート / 図 / 表)
4 本-
React Flow v12 を最小コードで動かす
検証 2026-05-10 @xyflow/react 12.10.1@xyflow/react v12 の最小サンプル + カスタムノード + コンテキストメニュー + 永続化までを、つまずいたポイントとともに記録した実装メモ。
-
beautiful-mermaid でゼロ依存の Mermaid 図を描く
検証 2026-05-26 beautiful-mermaid 1.1.3ゼロ依存・DOM 非依存の beautiful-mermaid を Astro + MDX に組み込み、build 時の静的レンダリングと runtime のインタラクティブエディタを共存させた実装メモ。renderMermaidSVG が同期で SVG 文字列を返す設計、公式 mermaid との機能差、50 ノード超で build が伸びる閾値まで。
-
D3 で React の棒グラフに transition を載せる
検証 2026-05-11 d3 7.xD3 を React と組み合わせて、データ更新時に bar の高さ・軸ラベル・数値 text が同時に transition で動く棒グラフを組むパターン。selection / scale / generator の 3 概念、useRef + useEffect の協調、enter/update/exit の data join、tween による数値カウント、を動く demo で確認する実装メモ。
-
deck.gl で数万件の移動データを WebGL アニメ描画する
検証 2026-07-26 deck.gl 9.3.7deck.gl の TripsLayer で「時刻つき経路」を動く軌跡として再生するパターン。Canvas/SVG が数千要素で頭打ちになる領域を WebGL で突破する仕組み、React(@deck.gl/react)での層構成、毎フレーム currentTime だけを更新して GPU にデータを載せたままにする設計、trailLength の演出、MapLibre 併用まで、架空路線網を再生する触れる demo 付きで整理する実装メモ。
UI / インタラクション
1 本データ基盤(クライアント完結)
4 本-
DuckDB-Wasm でブラウザ内 SQL を動かす
検証 2026-05-26 @duckdb/duckdb-wasm 1.33.xDuckDB-Wasm をブラウザに埋め込み、SQL の DDL / INSERT / SELECT をクライアント完結で実行するパターン。getJsDelivrBundles の中身、SharedArrayBuffer + COOP/COEP ヘッダ、4GB の memory 上限、Parquet を URL 直読みする時の CORS 罠まで実装メモ。
-
DuckDB-Wasm で GTFS(公共交通時刻表)をブラウザ分析する
検証 2026-07-26 @duckdb/duckdb-wasm 1.33.x公共交通の標準フォーマット GTFS(stops / trips / stop_times の CSV 群)を DuckDB-Wasm に読み込み、発車本数・次の発車・駅間所要時間をブラウザ内 SQL で集計するパターン。registerFileText での仮想ファイル登録、24 時超え時刻('25:30:00')を TIME にキャストできない罠、window 関数での駅間計算まで、架空 2 路線の触れる demo 付きで整理する実装メモ。
-
GrafeoDB の WASM ビルドでブラウザに組込みグラフ DB を載せる
検証 2026-05-10 @grafeo-db/wasm 0.5.x@grafeo-db/wasm を使って Cypher / GQL / SPARQL / SQL を 1 つの埋め込み DB で扱うブラウザ完結のグラフ DB パターン — importLpg でのデータ投入、executeCypher、textSearch / vectorSearch、exportSnapshot による zero-backend 配布、IndexedDB 永続化までを触れる demo 付きで整理する実装メモ。
-
ExcelJS で .xlsx をブラウザで生成・ダウンロードする
検証 2026-05-26 exceljs 4.4.0ExcelJS でブラウザ完結に Excel ファイルを作成し、ヘッダ装飾 / 数式 / 通貨書式 / 集計行を最小コードで組み立てるパターン。ARGB の alpha 桁、writeBuffer の Browser/Node 差、numFmt の番号書式コード、mergeCells 後の値設定が無視される罠まで実装メモ。
外部統合
3 本-
Transformers.js でブラウザ完結の意味検索を作る
検証 2026-07-26 @huggingface/transformers 4.2.0@huggingface/transformers の feature-extraction pipeline で文章を embedding(意味ベクトル)に変換し、cosine 類似度でランキングする意味検索をサーバー推論ゼロで実装するパターン。pipeline の初期化と dtype(量子化)の選択、モデルのキャッシュ挙動、日本語対応モデルの選び方とサイズの現実、UI をブロックしない読み込み設計まで、クリックでモデルを取得する触れる demo 付きで整理する実装メモ。
-
MapLibre GL JS で PMTiles のサーバーレス地図タイルを配信する
検証 2026-07-26 maplibre-gl 6.0.0タイルサーバーを立てずに、静的ホスティングへ置いた 1 個の .pmtiles ファイルだけでベクター地図を配信するパターン。PMTiles の仕組み(HTTP Range request)、pmtiles protocol の登録、tippecanoe での生成、CORS / キャッシュ設定、React との組み合わせまで、都道府県ポリゴンを 126KB で配信する触れる demo 付きで整理する実装メモ。
-
ONNX Runtime Web + 蒸留 student でブラウザ完結 intent search を作る
検証 2026-05-23 onnxruntime-web 1.21.xVertex AI Gemini embedding を教師に multilingual-e5-small へ蒸留した student を ONNX Runtime Web で動かし、 ユーザの自由文クエリから関連書籍を返す UI をサーバ推論ゼロで実装する。 2000 件で overlap@5=0.26 (random の 104 倍)、 WASM warm 28ms。 設計判断、 INT8 量子化の落とし穴、 Cloudflare Pages 25MB 制約の回避策まで。