bblog

Today I Learned

日々の仕事と学びの振り返りです。何をして、何を学んだかを記録します。

Alla11yanimationarchitecturebrowserbundlingcachingcanvasci-cdclscollaborationcssdrag-and-dropeditoreslintimagesimmutabilitylanding-pagemeasurementmobilemodalmonoreponavigationnetworknextjspage-transitionperformanceplaywrightpointer-eventsreactreliabilityscrollsearchsecurityselectionseoserverlessservice-workershellssrstorytellingtelemetrytestingthemingundousesyncexternalstorevirtualizationwebpackwebsocket
入力を止めてから350ms後に自動で検索します。

7件の記録 · #react

2026년 7월

2026-07-07

ネストされたUIの再レンダーをO(1)へ — read-model・external store・レンダー回数テスト

イミュータブルなツリーエディタで一行直しただけで全体が再描画される問題を、まずテストで固定してから、正規化projectionとid別購読で行・コンテナの再レンダーを減らした過程

  • イミュータブルなツリーpatchは祖先も新しいrefを受け取り、propsで下ろすとO(depth)の再レンダーになる — 正規化entry + id別購読でO(1)に減らせる
  • entryキャッシュは入力refではなく出力の値-等価で安定化すべきで、外部storeのsyncはsetState直前のchoke pointで同期実行する
2026-07-06

バンドルの shared vendor、クロスブロック選択、フローティング UI 座標

webpack splitChunks の罠、ハイブリッドエディタのクロスブロック範囲演算、selectionchange·scroll anchor パターン、Context 購読の分離

  • catch-all vendor に chunks:all と固定 name を一緒に使うと、dynamic import が shared チャンクへ引き上げられる
  • クロスブロックのテキスト演算は範囲 state の代わりに getSelection からの無状態派生 + 境界 split の単一化が安全だ
2026-07-05

ブロックエディタの順序・協業・キーボード契約

fractional ordering, optimistic rebase, IME defer, keyboard undo 委譲, scoped popover, Jest ESM shim など汎用パターンの整理

  • sibling の順序は integer index より fractional position key + neighbor anchor + tie-break が concurrent insert に有利だ
  • optimistic UI は inverse patch なしには rebase できず、remote seq が merge の権威でなければならない
2026-07-04

ドキュメントは host SoT、エディタは focused guest

ブロックドキュメント編集器における host/guest 境界、React 外部ストアのスナップショット、undo の2スタック、HTML5 ドラッグ・選択/コピーを、初めて読む人向けに整理

  • ドキュメントの意味は host のパッチが所有し、リッチテキストエンジンはフォーカスブロックの guest としてのみ置く
  • useSyncExternalStore のスナップショットに ms タイムスタンプだけを使うと、同一 ms の mutation で再レンダーが落ちる — 単調な revision が必要
2026-07-01

長いリストは flatten → SSR 初回 slice → virtualizer

無限スクロールとリスト仮想化を分離し、SSR 静的 gate で初回HTMLを保証してから virtual list に切り替えるパターン

  • 無限スクロールはデータ露出の上限、仮想化はDOMの上限をそれぞれ制御する
  • ネストしたグループUIは header/item row に flatten してから virtualizer に入れる

2026년 6월

2026-06-30

直接アップロード契約、CSSトークンテーマ、ハイドレーション境界

presigned URL の4段階アップロード、@layer ベースのトークンテーマの単一生成器、fr レイアウトとマウント後ハイドレーションから学んだ共通原則

  • presigned URL アップロードは presign→PUT→complete→create の4段階契約であり、complete 通知を漏らすとバックエンドはアップロードを認識できない。
  • CSSトークンテーマは @layer（優先度）・@scope（範囲）・light-dark()（モード）を分離し、ランタイム・ビルドCSSを一つの生成器に単一化しないとズレる。
2026-06-29

サーバーレス環境での検索バックエンドの選択

サーバーレスで何を関数の内側／外側に置くか、そして差し替え可能な検索を provider 契約で隠す方法

  • 常駐が必要な検索エンジンはサーバーレス関数には載せられず、事前ビルドしたインメモリインデックスで代替できる。
  • ランタイムで読み込むビルド成果物はバンドルのファイルトレースに明示しないと、コールドスタートで欠落する。