記事(全 26 本)
ライブラリ別の実装ノート。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 との分業を実装メモ化。
データユーティリティ
7 本-
TanStack Query v5 でサーバー状態を管理する
検証 2026-09-01 @tanstack/react-query 5.102.8TanStack Query v5(旧 React Query)の最小構成とキャッシュの動き。status と fetchStatus の 2 軸、staleTime / gcTime の役割分担、同一 queryKey の重複排除、invalidateQueries の挙動、v4 からの破壊的変更(cacheTime 廃止・単一オブジェクト引数)を、動く demo と実測で確認する。
-
jsPDF の日本語は、標準フォントだと黙って化ける
検証 2026-09-06 jspdf 4.2.1jsPDF 4.2 でブラウザ完結の PDF 生成。標準フォントでは日本語が『エラーなしで文字化けする』理由と、TTF を addFileToVFS / addFont で埋め込む 3 手順(サブセット化で 1MB、PDF には使ったグリフだけ 67KB)、mm/pt/px の座標系とベースライン、y を自分で進めるレイアウト、jspdf-autotable の表と bold 未登録の罠、canvas 画像・ページ番号・Blob プレビューまで。書き換えて試せる demo 2 つ付き。
-
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-09-06 papaparse 5.5.3Papa Parse v5 系で CSV を header 自動検出 + dynamicTyping + ストリーム処理で扱うパターン。Excel の Shift_JIS / BOM、worker:true で main thread を逃がす設計、step ストリーミング時に results.data が空になる罠まで実装メモ。
-
PptxGenJS の使い方: ブラウザだけで PowerPoint(.pptx)を生成する
検証 2026-09-14 pptxgenjs 4.0.1PptxGenJS v4 でできることと使い方を、その場で .pptx を作れる demo で確認。テキスト・表・グラフ・画像の最小コード、React / TypeScript での import からダウンロードまで、ブラウザと Node の出力の違い、要素ごとの生成時間とサイズの実測。
-
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 の移行も。
-
SheetJS で Excel / CSV を読み書きする
検証 2026-09-05 xlsx 0.20.3SheetJS(xlsx)0.20 で .xlsx / .xls / .csv / .ods をブラウザで読んで JSON にし、また書き出すまで。npm 版が 0.18.5 で止まっている理由と CDN tarball での導入、A1 キーのデータモデル(t / v / w / z)の図解、raw / cellDates / header / defval の効き方、日付の UTC ずれ、数式は計算されない罠、ExcelJS との使い分け。書き換えて試せる demo 2 つ付き。
可視化(チャート / 図 / 表)
7 本-
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 が伸びる閾値まで。
-
Chart.js v4 を React で使う
検証 2026-08-31 chart.js 4.5.1Chart.js v4 + react-chartjs-2 の最小構成。v3 以降必須になった register の仕組みと「category is not a registered scale」エラーの原因、bar/line の動的切替、tooltip callback での単位付与、responsive 設定の親要素の高さ問題まで、動く demo で確認する。
-
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 付きで整理する実装メモ。
-
ECharts v6 を React で使う
検証 2026-09-01 echarts 6.1.0Apache ECharts v6 を React で動かす最小構成。echarts/core + use() の tree-shaking 登録、init / dispose のライフサイクル、setOption の merge / notMerge / replaceMerge の違い(実測)、コンテナ幅に追従しない resize の仕様、Node での SSR(SVG 文字列出力)まで。option JSON を書き換えて試せるプレイグラウンド demo 付き。
-
Recharts のグラフを PowerPoint に出力する — ネイティブグラフと画像、2 通りの書き出しを比べる
検証 2026-09-14 pptxgenjs 4.0.1React(Recharts)で画面に描いた棒グラフを、PptxGenJS で .pptx に書き出す 2 つの方法。同じデータを addChart で PowerPoint 側で編集できるグラフとして置く方法と、SVG を PNG にして addImage で貼る方法を、同じデモで実測して比べる。CSS 変数の解決、HTML の凡例が画像に入らない問題、フォント非埋め込みまで実装メモ。
UI / インタラクション
2 本-
FullCalendar v7 を React で使う
検証 2026-09-01 @fullcalendar/react 7.0.2FullCalendar v7 + React の最小構成。6 パッケージ→1 パッケージのサブパスに変わった v7 の構成(図解)、CSS 明示 import・temporal-polyfill という新しい前提、React state を正とするイベント管理(dateClick で追加 / ドラッグで移動 / クリックで削除)、日本語ロケールと 5 種の公式テーマまで。予定を追加・移動して試せる demo 付き。
-
Scrollama でスクロール連動のデータストーリーを作る
検証 2026-07-26 scrollama 3.2.0scrollama を使って、スクロールに合わせて sticky なグラフが切り替わる scrollytelling(スクロール連動の読み物)を React で実装するパターン。IntersectionObserver ベースの step 検出、offset の意味、sticky レイアウトの CSS、resize / モバイル対応の落とし穴まで、4 ステップで棒グラフが変化する触れる demo 付きで整理する実装メモ。
データ基盤(クライアント完結)
4 本-
DuckDB-Wasm でブラウザ内 SQL を動かす
検証 2026-09-22 @duckdb/duckdb-wasm 1.33.1-dev45.0DuckDB-Wasm をブラウザに埋め込み、SQL をクライアント完結で実行するパターン。jsDelivr から読み込まれるファイルの実測(WASM は転送時 6.8 MB・展開後 34 MB、coi は含まれない)、CDN の worker を直接起動すると SecurityError になる理由と回避、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-09-14 exceljs 4.4.0ExcelJS とは何かから、装飾(太字・背景色・罫線・セル結合)、数式、数値書式、ダウンロードまでを動く demo と最小コードで。10 万行での SheetJS とのサイズ・速度の実測と、はまりやすい 7 つの落とし穴つき。
外部統合
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 制約の回避策まで。