frontend
型契約の前提環境 — "コンパイルできない"は tsconfig の関数です
同じコードがリポジトリの設定次第で通ったり落ちたりする理由と、型契約を作る前に実効 tsconfig とロックファイル解決のコンパイラバージョンを一度だけ固定しておく手順
TILから一般化した再利用できる知識文書です。カテゴリー別に整理されています。
同じコードがリポジトリの設定次第で通ったり落ちたりする理由と、型契約を作る前に実効 tsconfig とロックファイル解決のコンパイラバージョンを一度だけ固定しておく手順
ランタイムテストの境界値分析を型レベルに移して、型の束（lattice）の極端 7 軸ごとに通過・拒否の witness ペアを組む方法と、時間軸・副作用の回数のように型では最後まで覆えない軸
導出できる値は保存せず、ライブラリがすでに所有している union はコピーせず、それでも残る client 状態だけを union にする順序と、状態に action を入れてはいけない理由
Record が約束する totality、何も検査しない type predicate、実行タイミングが違う wrapper の ReturnType、sanitizer と勘違いされる excess property check のように、実装が守らないことを型が約束してしまうパターン
assertNever、satisfies Record、パターンマッチライブラリという三つの層のうち何をいつ使うか、そして catch-all のデフォルト分岐が漏れを隠してしまう理由
Dog が Animal の部分型のとき、Dog[] や (x: Dog) => void もその関係を受け継ぐのか、どちらの向きに受け継ぐのかを決めるルールと、strictFunctionTypes を有効にしてもメソッド短縮記法に穴が残る理由
実行結果ではなくコンパイル結果を検証して「この型が実際にどんな誤ったコードを防ぐのか」をコードとして固定する方法と、@ts-expect-error・mutation 検証でテストが生きているかを確認する手順
const 宣言に型パラメータを付けられないという制約を回避し、ジェネリック関数の中で context を作ってコンポーネントたちにクロージャで掴ませるパターンと、レンダー中に呼ぶと静かに再マウントされる落とし穴
許可値のリストを型と値の二か所に書く代わりに、値ひとつだけを正解の出どころにして型を計算する手法と、widening のせいでこの保護がエラーも出さずに消えてしまう落とし穴
実行結果が正しいかどうかを判定する基準をどこから得るかという問題と、実装から期待値を逆算したテストが何も検証できない理由
DOM 座標だけでは壊れるハイライト復元を、引用・文脈・位置 selector の重み付きスコアと信頼しきい値で解決する方法
コードに人為的な欠陥を埋め込み既存テストが失敗するかを確認することで、カバレッジが隠す空の assertion や緩い検証を見つける手法
メモリを共有できない拡張機能の実行空間を、メッセージ API、runtime 検証、handler ルーティング、応答エンベロープ、変更通知で安全につなぐ方法
npm のグローバル bin のようなシンボリックリンク経路でパス比較型の main ガードが静かに false になり、CLI が出力なしで exit 0 する仕組みと診断・処方
rewrite はリダイレクトではなくプロキシなのでアップストリームの 3xx をそのまま流す — 正規化する配信元に向けると無限ループになる理由と対処
マークダウン本文の画像にビルド時点で実ピクセル寸法を注入し、レイアウトシフトと固定比率クロップを同時になくす原理
blur や Enter が変換途中の文字を確定保存してしまう理由と、イベント順序の仮定ではなく変換状態で直す方法
旧ブラウザ対応は別々の二つの作業である — 新しい構文を古い構文に変えるトランスパイルと、存在しない API をコードで補うポリフィル。トランスパイラは構文だけを変え、ランタイム関数は作らない
一画面のインタラクションが複数同時に効かなくなったら、たいていは個別のバグではなく、クライアント JS が実行できずハイドレーションが丸ごと不発になった単一の根本原因である
ポリフィルを全ブラウザに入れず、機能が無いかを実際に検知して不足したブラウザにだけロードする手法 — 最新ブラウザのコストがほぼ 0 になる