Today I Learned

2026년 7월

2026-07-14

開発環境を整備していて出会った汎用概念：シェルの引用符・モノレポ公開・CIランナー・ガード設計

ツール・インフラを整備しながら遭遇したシェルの単語分割、workspace公開の書き換え、CIランナーの不一致、fail-openガードを汎用概念として整理したTIL

シェル変数に入ったパスは空白があると引用符なしで使うと複数の引数に分割され、コマンドが静かに壊れる
モノレポ内部の依存はworkspaceプロトコルでリンクし、公開時に実際のバージョンへ置換するマネージャーで上げるべきだ

2026-07-13

星明かりグラフ・SW キャッシュ・Playwright triage・ESLint guardrail

Canvas 星ノード、Service Worker SWR・generation セキュリティ、CI flaky 分類、デザインシステム ESLint guardrail を一日で整理した TIL

Canvas ノード装飾は ID ハッシュで安定化し、globalAlpha・shadowBlur は描画直後に必ず復元する
Playwright CI が赤いときは retry 結果で flaky と deterministic failed を先に分ける

2026-07-11

ホームヒーローの scroll-driven ナラティブ演出

GSAP なしで sticky scrolly·CSS keyframes·view-timeline を使い、TIL→Knowledge 昇格デモとパイプラインセクションを実装した一日

sticky scrolly はラッパーの高さぶんスクロールの時間軸を作り、phase は進行度から派生させると JS が薄くなる
ヒーローのライブデモは clip-path steps ワイプ + animation-delay だけでループを作れる

2026-07-10

Modal peek スタックと CSS layer パッケージ

単一 dialog 内の document push と @layer ベースの editor CSS 分離で、peek UX とテーマのカスタマイズを合わせた一日

gallery→peek は dialog を新しく開くより、同じ shell で documentId だけ替えるほうが連続的だ
async resolve は (newId, oldContent) 中間フレームを render-time reset で防がねばならない

2026-07-09

階層型ドキュメントナビと viewer バンドル分離

page push/peek navigator と read-only viewer entry の分離で、ポートフォリオのデモ深度とバンドルを同時に合わせた一日

ドキュメントグラフは page ブロック + push/peek navigator 契約で flat editor と分離するほうがよい
peek·embed は editor と DOM は同じでも import graph が違ってこそ viewer バンドルが小さくなる

2026-07-08

モバイルのポインタジェスチャとサーバ画像プロキシ

タッチのドラッグ・リサイズの安定化と、unoptimized 環境で画像プロキシにより転送バイトを減らした一日

タッチで引いてもページが一緒にスクロールしないようドラッグ動作を直した
画像は原本まるごとではなく必要なサイズだけ送るようプロキシを付けた

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-03

perf は 3× median、prefetch は skeleton とセット

Lab trace の outlier 区別、SSR prefetch の query key 整合、CLS skeleton 予約、JSON-LD サーバー注入を一日で整理

開発サーバーの単一 Performance trace は outlier が多いので、N回 reload の median で before/after を比較すべきだ
SSR prefetch は query key がクライアントと1文字でも違えば cache miss であり、skeleton の高さ予約とセットで見ないと CLS が出る

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 契約で隠す方法

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

2026-06-28

WebSocket ストリーミングと LCP 改善

エージェントの部分応答ストリーミングと、ランディングの LCP 改善を並行しながら学んだ計測・UI・リソース優先度

WebSocket でも部分結果をストリーミングできる。
LCP リソースの優先度が実際の指標に大きな影響を与える。

2026-06-27

WebSocket ストリーミング実験

WebSocket のハンドシェイク・再接続・heartbeat の設計と、ストリーミングのタイミング観測から学んだ点

接続維持のコストを考慮して heartbeat を設計しなければならない。