react-doctorで始めるReactコード診断
·
26分(23,851字)
·
-
- TL;DR - react-doctorはAIコーディングエージェント向けに設計されたReactコード診断ツールで、プロジェクト全体をスキャンして0〜100の健全性スコアを算出する - npx react-doctor@latest . だけで即実行でき、GitHub...
フロントエンド
7件の記事
neverthrowは何を解決するのか
·
7分(4,777字)
·
-
- TL;DR - TypeScriptのthrowは型システムの外にあり、エラーの型情報が失われる - neverthrowのResult<T, E>型により、エラーを型安全に「返す」ことができる - map/andThenによるメソッドチェーンで、Railway Oriented...
フロントエンドのビルドを理解する
·
13分(8,866字)
·
-
- TL;DR - フロントエンドのビルドは パース → トランスパイル → モジュール解決 → バンドル → ミニファイ の5工程で構成される - パース はソースコードをAST（抽象構文木）に変換する - トランスパイル はJSX/TypeScriptをJavaScriptに変換する -...
useEffectのクリーンアップでメモリリークを防ぐ
·
4分(3,031字)
·
-
- TL;DR - JavaScriptのGCは 参照されなくなったオブジェクト のみ解放する - 副作用で外部リソースを使う場合は 必ずクリーンアップ関数を実装 する - イベントリスナーは登録と解除で 同一の関数参照 を使う - 非同期処理は AbortController でキャンセルする -...
JavaScriptのイベント伝搬を理解する
·
3分(1,476字)
·
-
- TL;DR - DOM のイベントは キャプチャ → ターゲット → バブリング の3フェーズを必ず通る - addEventListener で指定するのは 「どのフェーズで handler を呼ぶか」 - デフォルトは バブリングフェーズ --- はじめに JavaScriptを使っていると、...
ReactがUIを表示するまでの4つのフェーズとConcurrent Rendering
·
5分(2,953字)
·
-
- TL;DR - React のレンダリングは Trigger → Render → Commit → Browser Paint の4フェーズに分けて理解できる - Render フェーズは UI の計算だけで、DOM はまだ更新されない - Commit フェーズで初めて DOM...
UI = f(state)とは何なのか
·
2分(1,130字)
·
-
- TL;DR 1. UIは状態から一意に決まる 2. 厳密には「UI = f(props, state, context)」と考えるのが正確 3. Reactは「state → UI」変換を自動でやる仕組み はじめに Reactを調べていると「UI =...