フロントエンド– category –
フロントエンド開発の実務記事をまとめたカテゴリーです。Reactの再レンダリング最適化、TypeScriptの型設計、Core Web Vitals、画像最適化、エラー監視などを扱います。
-
画像をWebP化したら75MBが6.6MBになった|移行手順と落とし穴
ブログの画像289ファイル75.69MBをWebPに移行して6.61MB(91.3%減)にした記録。同じ画像をPNG/JPEG/WebP/AVIFで実測した比較と、1枚だけJPEGが残ったせいでXのリンクカードが壊れた事故の顛末をまとめます。 -
ErrorBoundaryが捕まえたのは5つ中2つだった|実際に壊して確かめた
ReactのErrorBoundaryが実際にどこまで捕捉するか、5通りの壊し方で検証しました。捕まえたのは2つだけで、実務でよく起きる3つは素通りします。取りこぼしを拾う設計までまとめます。 -
React.memoを貼っても再レンダリングは減らなかった|500個で実測
React 18で子コンポーネント500個を並べて再レンダリング回数を実測しました。memoを貼っただけでは5,000回のまま変わらず、useCallbackで参照を固定して初めて0回になりました。 -
tscが通っても型は嘘をつく|どこまで守ってくれるか実際に試した
TypeScriptの型注釈は外から来るデータを検証しません。tscが止めてくれるコードと素通りするコードの境界を実際にコンパイル・実行して確かめ、境界での検証設計までまとめます。 -
画像を91%減らしてもLighthouseは55点だった|犯人はWebフォント
ブログの画像を全部WebPにしても、モバイルのLighthouseは55点のままでした。転送量を分解したら画像は全体の1.2%で、58%が日本語Webフォント。実際に止めて測り直した記録です。
1