すべての記事
React アプリの layer
Juntao Qiu の React モジュール化の記事に沿って、決済画面を view、model、data に分ける。サンプルリポジトリを実際に動かして見つけた useMemo の無効化と fetch の繰り返し、そしてこの構造をいつ使うかの判断もまとめた。
決定モデル、Jev と Kev
テキストの代わりに確率を返すモデルJevが公開された。confidenceは学習された値ではなく算術であり、キャリブレーションはモデルではなく分布の性質だ。公開されたJevの実測5,743件と、再現実装Kevをこのブログの音写ゲートに直接かけた結果で確かめる。
overlay-kit
モーダルの開閉をグローバル状態で持っていたコードをawait一行に置き換えて得たものと失ったもの。overlay-kitのイベントとreducer、openAsyncのコアロジックをソースで追い、再オープンの挙動をテストしてドキュメントとのズレまで確認する。
LLMのキャリブレーションと過信
キャリブレーションは正解率ではなく、自分が何パーセント当てるかを知る能力だ。ECEがそのズレをどう測るか、GPT-4技術レポートでpost-training後にECEが0.007から0.074に悪化した結果と、その原因がどこまで明らかかを整理する。
共有言語
企画者とdeveloperが同じ単語で違うものを指しているとき、何をすべきか。Evansのubiquitous languageとClarkのgrounding理論から他職種コミュニケーション失敗の構造を捉え、解像度を合わせる実務的な道具までまとめる。
Harness（Systems）Engineering
prompt engineeringからcontext engineeringへ、その次はどこへ向かうのか。Anthropicのエンジニアリングブログに見られる最近の流れを手がかりに、harness設計、eval、containment（隔離）という3つの方向とtoken節約の議論とのつながりを整理する。
Kalyx
React headless DatePicker「Kalyx」を作った理由と、Ark UI、React Aria、react-day-pickerとの違いを整理した。ISO 8601 UTCの値モデル、IntlによるDST処理、全IANAタイムゾーンのプロパティテストをコードと実測で説明する。
AIトークン節約術
AIコーディングツールのトークン費用はどこで発生し、どう減らせるのか。Anthropicの価格表とprompt caching、subagent、MCPの整理、context engineering、Cursor Composerまで、検証済みの節約パターンをReactのPOCで実測する。
トークンの仕組み
AIのトークンは単語でも文字でもない。BPEトークナイザーがトークンを作る方法、トークンがembeddingベクトルとなってモデルに入る流れ、prefillよりdecodeの出力が高い理由、KV cacheとprompt cachingがコストを下げる仕組みまで解説する。
コンテキストファイル
CLAUDE.md・AGENTS.md・SKILL.md・Cursor rulesがいつ、どのようにエージェントに読み込まれるのかを整理する。CLAUDE.mdがuser messageとして注入される仕組みとコンテキストの忘却、ETH Zurichの研究をもとに、何を書くべきかの基準を示す。
コードインテリジェンスの4つの階層
AIコーディングエージェントが関連コードを探すコストを減らすツールを4つの階層に分けて比較する。Repomixのようなコンテキストパッキング、Aiderのtree-sitterリポジトリマップ、CodeGraphのナレッジグラフ、SerenaのようなLSPベースのツールを整理する。
MCPとfunction calling
MCPがfunction callingとどう違うのかをプロトコル構造から整理する。6つのプリミティブ、stdioとStreamable HTTP、tools/listからtool_useループまでの流れ、Tool Poisoningなどのセキュリティ問題を扱う。
状態管理
フロントエンドの状態管理をローカル・グローバル・サーバー・フォーム・URL・外部・ガードの7分類に分け、分類ごとに合うツールと境界を整理する。最後に、状態を作る前に投げかける4つの問いにまとめる。
ドメインモデル
フロントエンドのドメインロジックをどこに置くべきかを総合所得税の例で扱う。コンポーネントに混ざった税金計算を純粋関数に分離し、貧血ドメインモデル、APIレスポンスの変換層、ViewModelの分離、Classと関数型の凝集の違い、分離をどこで止めるかの基準まで整理する。
ドメイン用語
ドメイン、ドメインモデル、ドメインオブジェクト、ドメインオブジェクトモデルの違いをEric EvansとMartin Fowlerの定義で整理する。APIレスポンスの型がなぜドメインモデルではないのか、EntityとValue Objectをどう区別するのかを総合所得税の例で説明する。
Toss Frontend Fundamentals 模擬試験 第2回のリファクタリングを終えて
Toss Frontend Fundamentals 模擬試験 第2回の会議室予約アプリをリファクタリングした経験を共有する。モノリシックなコンポーネントの分割、ドメインロジックの抽出、テストを基盤としたリファクタリングの過程をまとめた。
AIフロントエンドエンジニア
AIがコードを書く時代に、フロントエンドエンジニアはどう成長できるのか。Karpathyのagentic engineering、Vercel v0、METRの研究をもとに、検証・仕様化・判断力を軸とした新たな能力を整理する。
抽象化
フロントエンドにおける抽象化とは何か、良い抽象化と悪い抽象化はどう違うのか。抽象化レベルの揃え方、意図が伝わる名前の付け方、部品を組み立てる設計を、Reactコンポーネントとカスタムフック、関数設計の観点から具体的なコードとともに整理する。
queryKey
TanStack Query の queryKey の管理方法が、インライン配列、定数オブジェクト、クエリキーファクトリーを経て v5 の queryOptions までどう進化したかを整理する。記述規則、DataTag による型推論、無効化のパターンを実務の観点で扱う。
queryKey比較の仕組み
TanStack Query がレンダリングのたびに新しく作られる queryKey 配列を同じキーと判定する仕組みを整理する。hashKey のシリアライズがキー順、undefined、Map などの値をどう変えるか、フィルターがキーの構造をどう比較するかまで扱う。
ErrorBoundary の配置
React Router と TanStack Query を使う画面で、ErrorBoundary をいくつ、どこに置くかを決める基準をインストール済みのソースで確かめる。ルート、画面、領域ごとに受けるエラーと戻し方、fallback をひとつにそろえる方法、再試行の条件まで扱う。
再試行ボタンが効かない理由
react-error-boundary の再試行ボタンを押しても同じ fallback がまた出る三つの場合をソースで確かめる。クエリのエラーは QueryErrorResetBoundary、レンダーエラーは queryFn の検査、React.lazy のチャンク失敗は再読み込みで解く。
エラーの伝播
同じエラーを七か所から投げてみると、ErrorBoundary に届くのは四つだけだ。コンパイル時、レンダーとライフサイクル、サーバーデータ、ページ遷移、外部ライブラリ、イベントと非同期がそれぞれどこへ伝播するのかを、公式ドキュメントとインストール済みのソースで確認する。
React Fiber完全攻略
React Fiberアーキテクチャを、Stack ReconcilerからFiberノードの構造、ダブルバッファリング、Lane優先度、Work Loop、レンダーフェーズとコミットフェーズ、Concurrent Featuresまで、Reactのソースコードを基に深く分析する。
ReactがMessageChannelを使う理由
React SchedulerがrequestIdleCallback、requestAnimationFrame、setTimeoutではなくMessageChannelで作業を予約する理由を、ReactのPR記録とsetTimeoutの4ms遅延のChrome実測から整理する。
BiomeはESLintとPrettierを置き換えられるのか？
BiomeのLintとフォーマット性能を、ESLintとPrettierを組み合わせた構成と比較する。Rust製オールインワンツールチェーンを実務に導入した経験をもとに、設定の移行手順、詰まりやすい箇所、置き換えられる範囲と残る課題までまとめた。
Zustand、お前は何者で、なぜProviderLessなんだ？
ZustandがProviderなしで状態管理を実現する仕組みを、ソースコードを読み解きながら掘り下げる。React Context APIとの違い、モジュールスコープに基づくストア設計、useSyncExternalStoreによる購読までを順に追いかける。
圧縮アルゴリズムを理解する
ZIP、GZIP、ZSTD、BZIP2、XZ、Brotliの構造と速度、圧縮率を比較する。tar.gzがzipより小さくなるソリッドアーカイブの仕組みと、ビルド成果物にtar.gzとtar.zstのどちらを選ぶかを整理する。
LZ77とLZ78の違い
LZ77とLZ78が辞書をどう扱うのかの違いを整理する。スライディングウィンドウと明示的辞書の違い、古い内容を忘れる方法の違い、そしてDEFLATEを経てZIP、GZIP、Zstdへと続くLZ77系の系譜を説明する。