すべての記事
共有言語
企画者とdeveloperが同じ単語で違うものを指しているとき、何をすべきか。Evansのubiquitous languageとClarkのgrounding理論から他職種コミュニケーション失敗の構造を捉え、解像度を合わせる実務的な道具までまとめる。
オブザーバビリティ
会社ではSentryを使っていたのに、個人ブログにはエラー監視がなかった。AIとともに計測を導入する中で遭遇したことをまとめる。200レスポンスの裏に隠れた失敗、gray failure、65秒もぶら下がったGA呼び出し、そして検索データまで。
Harness（Systems）Engineering
prompt engineeringからcontext engineeringへ、その次はどこへ向かうのか。Anthropicのエンジニアリングブログに見られる最近の流れを手がかりに、harness設計、eval、containment（隔離）という3つの方向とtoken節約の議論とのつながりを整理する。
AIトークン節約術
AIコーディングのトークン費用をReact POCで測定し、prompt caching、subagent、MCP整理、context engineering、Cursor Composerで削減する方法を解説する。
トークンの仕組み
AIのトークンは単語でも文字でもない。BPEトークナイザーがトークンを作る方法、トークンがembeddingベクトルとなってモデルに入る流れ、prefillよりdecodeの出力が高い理由、KV cacheとprompt cachingがコストを下げる仕組みまで解説する。
AIエージェントツール
Claudeを使ったフロントエンド開発で出会ったツールを、4つの視点から整理する。CLAUDE.md・AGENTS.md・SKILL.mdの違い、MCPの仕組みとSerena、CodeGraphなどコードインテリジェンスツールの動作原理、GitHub Trendingの読み方まで解説。
状態管理
フロントエンド開発で特に難しい状態管理を、ローカル・グローバル・サーバー・フォーム・URL・外部・ガードの7分類で整理。Single Source of Truth、不可能な状態の排除、State Colocationなど4つの視点から、ツール選定とモデリングの基準を解説する。
ドメインモデル
フロントエンドの視点からドメイン、ドメインモデル、ドメインオブジェクトの概念を整理し、EntityとValue Object、貧血ドメインモデル、ViewModelの分離まで扱う。総合所得税ドメインの例を通じて、Reactでドメインロジックを分離する実践的な方法を解説する。
Toss Frontend Fundamentals 模擬試験 第2回のリファクタリングを終えて
Toss Frontend Fundamentals 模擬試験 第2回の会議室予約アプリをリファクタリングした経験を共有する。モノリシックなコンポーネントの分割、ドメインロジックの抽出、テストを基盤としたリファクタリングの過程をまとめた。
AIフロントエンドエンジニア
AIがコードを書く時代に、フロントエンドエンジニアはどのように成長し、生き残ればよいのか。Karpathyのagentic engineering、Vercel v0、Stack Overflow Survey、METRの研究など、検証された資料をもとに、検証・仕様化・判断力を軸とした新たな能力と学習戦略を整理する。
抽象化
フロントエンドにおける抽象化とは何か、良い抽象化と悪い抽象化はどう違うのか。抽象化レベル、意図が伝わる名前、部品を組み立てるアプローチを、Reactコンポーネントと関数設計の観点から整理する。
queryKey
TanStack Query の queryKey がどのような仕組みで動作し、なぜインライン配列からクエリキーファクトリー、queryOptions へと進化してきたのかを整理する。TkDodo のパターンや v5 の queryOptions、setQueryData、無効化まで、実務の観点から解説する。
エラーハンドリング
React Error Boundary、try/catch、TanStack Query の throwOnError がそれぞれどこまでを担い、どう組み合わせるのかを整理する。レンダー段階のエラーと非同期エラーを区別し、react-error-boundary のリセットの仕組みまで解説する。
React Fiber完全攻略
React Fiberアーキテクチャを、Stack ReconcilerからLane優先度、ダブルバッファリング、MessageChannel Scheduler、Concurrent Featuresまで、Reactのソースコードを基に深く分析する。フロントエンド面接の頻出テーマ。
BiomeはESLintとPrettierを置き換えられるのか？
BiomeのLintとフォーマット性能をESLint、Prettierと比較する。Rust製オールインワンツールチェーンの実務導入経験と移行ガイドをまとめた。
Zustand、お前は何者で、なぜProviderLessなんだ？
ZustandがProviderなしで状態管理を実現する仕組みを、ソースコード分析を通じて掘り下げる。React Context APIとの違いと、モジュールスコープに基づく設計を見ていこう。
圧縮アルゴリズムを理解する
ZIP、GZIP、ZSTD、Brotliなど主要な圧縮形式の原理と性能を比較します。LZ77の基礎、可逆圧縮の仕組み、速度と圧縮率の違いから、フロントエンドのビルド成果物に適した形式を選ぶ実践的な基準まで整理します。