フロントエンド
React アプリの layer
Juntao Qiu の React モジュール化の記事に沿って、決済画面を view、model、data に分ける。サンプルリポジトリを実際に動かして見つけた useMemo の無効化と fetch の繰り返し、そしてこの構造をいつ使うかの判断もまとめた。
overlay-kit
モーダルの開閉をグローバル状態で持っていたコードをawait一行に置き換えて得たものと失ったもの。overlay-kitのイベントとreducer、openAsyncのコアロジックをソースで追い、再オープンの挙動をテストしてドキュメントとのズレまで確認する。
状態管理
フロントエンドの状態管理をローカル・グローバル・サーバー・フォーム・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による購読までを順に追いかける。