~/labs.tech-book.net · verified 2026-05-16
ライブラリの実装検証ノート
ライブラリを実際に動かして、設定・典型的な使い方・詰まりどころを記事にまとめています。各記事には触れる demo がついていて、関連する技術書を末尾に並べています。
● 最新更新 · 2026-05-16
大規模コードベースの Claude Code — モデルではなくハーネスを設計する
Anthropic が「数百万行のモノレポ / レガシー / マイクロサービス分散」で Claude Code を回している企業を観察してまとめたベストプラクティスの日本語要約。CLAUDE.md / フック / スキル / プラグイン / LSP / MCP / サブエージェント の 7 層ハーネス、成功 3 共通パターン、そして同名スキルの優先順位(Enterprise > Personal > Project)の実用ルールまで。
● 編集ピックアップ
D3 で React の棒グラフに transition を載せる
D3 を React と組み合わせて、データ更新時に bar の高さ・軸ラベル・数値 text が同時に transition で動く棒グラフを組むパターン。selection / scale / generator の 3 概念、useRef + useEffect の協調、enter/update/exit の data join、tween による数値カウント、を動く demo で確認する実装メモ。
カテゴリで探す
最新の記事
- ● 2026-05-16 · @anthropic-ai/claude-code 2.x大規模コードベースの Claude Code — モデルではなくハーネスを設計するAnthropic が「数百万行のモノレポ / レガシー / マイクロサービス分散」で Claude Code を回している企業を観察してまとめたベストプラクティスの日本語要約。CLAUDE.md / フック / スキル / プラグイン / LSP / MCP / サブエージェント の 7 層ハーネス、成功 3 共通パターン、そして同名スキルの優先順位(Enterprise > Personal > Project)の実用ルールまで。
- ● 2026-05-11 · d3 7.xD3 で React の棒グラフに transition を載せるD3 を React と組み合わせて、データ更新時に bar の高さ・軸ラベル・数値 text が同時に transition で動く棒グラフを組むパターン。selection / scale / generator の 3 概念、useRef + useEffect の協調、enter/update/exit の data join、tween による数値カウント、を動く demo で確認する実装メモ。
- ● 2026-05-10 · @duckdb/duckdb-wasm 1.33.xDuckDB-Wasm でブラウザ内 SQL を動かすDuckDB-Wasm をブラウザに埋め込み、SQL の DDL / INSERT / SELECT をクライアント完結で実行するパターン、Parquet / CSV 読み込み、WASM ロードの落とし穴を触れる demo で確認する実装メモ。
- ● 2026-05-10 · exceljs 4.4.0ExcelJS で .xlsx をブラウザで生成・ダウンロードするExcelJS でブラウザ完結に Excel ファイルを作成し、ヘッダ装飾 / 数式 / 通貨書式 / 集計行を最小コードで組み立てるパターンを触れる demo で確認する実装メモ。
- ● 2026-05-10 · @grafeo-db/wasm 0.5.xGrafeoDB の WASM ビルドでブラウザに組込みグラフ DB を載せる@grafeo-db/wasm を使って Cypher / GQL / SPARQL / SQL を 1 つの埋め込み DB で扱うブラウザ完結のグラフ DB パターン — importLpg でのデータ投入、executeCypher、textSearch / vectorSearch、exportSnapshot による zero-backend 配布、IndexedDB 永続化までを触れる demo 付きで整理する実装メモ。
- ● 2026-05-10 · pptxgenjs 4.xpptxgenjs でブラウザだけで .pptx を生成するPptxGenJS v4 を使った PowerPoint ファイル(.pptx)のクライアント生成パターン — addSlide / addText / addTable / addChart の最小構成、レイアウトサイズ(LAYOUT_WIDE)とテンプレ運用、ブラウザの writeFile / Node の writeFile / stream を出力先別に整理、画像/SVG 埋め込みの注意を触れる demo 付きで実装メモ化。
Skills(AI agent 用ノウハウ)
Claude Code / Gemini CLI から呼び出せる skill。配布元: github.com/tech-book-net/skills
- beautiful-mermaid-render-recipes — **サーバーサイドで Mermaid 図を SVG 文字列として生成して静的サイトに埋め込みたい** 時に呼び出すべき skill(公式 `mermaid` は…
- react-flow-v12-setup — ワークフローエディタ / ER 図 / マインドマップ / DAG ビジュアライザ等の **ノードベース UI** を React で実装する時に呼び出すべき …
- zod-v4-schema-patterns — TypeScript プロジェクトで **「外部から来る値を信用する境界」**(API レスポンス / フォーム入力 / 環境変数 / LLM 構造化出力 / …
- mdx-shiki-code-rendering — **MDX 技術記事のコードブロックを「VS Code 同等の精度で / dark mode 対応で / ファイル名タブ付きで / diff が一目で / 行ハ…