フロントエンド
overlay-kit
モーダルの開閉をグローバル状態で持っていたコードをawait一行に置き換えて得たものと失ったもの。overlay-kitのイベントとreducer、openAsyncのコアロジックをソースで追い、再オープンの挙動をテストしてドキュメントとのズレまで確認する。
状態管理
フロントエンド開発で特に難しい状態管理を、ローカル・グローバル・サーバー・フォーム・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、METRの研究をもとに、検証・仕様化・判断力を軸とした新たな能力を整理する。
抽象化
フロントエンドにおける抽象化とは何か、良い抽象化と悪い抽象化はどう違うのか。抽象化レベルの揃え方、意図が伝わる名前の付け方、部品を組み立てる設計を、Reactコンポーネントとカスタムフック、関数設計の観点から具体的なコードとともに整理する。
queryKey
TanStack Query の queryKey がどのような仕組みで動作し、なぜインライン配列からクエリキーファクトリー、queryOptions へと進化してきたのかを整理する。TkDodo のパターンや v5 の queryOptions、setQueryData、無効化まで実務観点で解説する。
ErrorBoundary の配置
エラーがどこへ行くのか分かったら、次は受け取る場所を置く番だ。ErrorBoundary を何層に分けるか、ひとつの失敗に画面をどれだけ明け渡すか、そして再試行ボタンを本当に再試行させるには何を一緒に解かなければならないかを、インストール済みのソースで確かめる。
エラーの伝播
同じエラーを七か所から投げてみると、ErrorBoundary に届くのは四つだけだ。コンパイル時、レンダーとライフサイクル、サーバーデータ、ページ遷移、外部ライブラリ、イベントと非同期がそれぞれどこへ伝播するのかを、公式ドキュメントとインストール済みのソースで確認する。
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との違い、モジュールスコープに基づくストア設計、useSyncExternalStoreによる購読までを順に追いかける。