React + TypeScriptで動的画像を生成する。Satori、Sharp、Canvasの使い分け
WebアプリでOGP画像やSNSカードを動的生成するとき、クライアントとサーバーでは構成が変わります。React 19 + TypeScriptを前提に、SatoriでSVGを作り、ブラウザではCanvas、サーバーではSharpでPNGへ変換する流れを見ていきます。
Blog
React posts
古いReactをAIで書き換えてもリファクタリングにはならない。先に依存関係と副作用を分ける
面接で8年前のReact ClassコンポーネントをAIでリファクタリングする課題が出された。見られていたのは新しい構文へ書き換える速さではなく、依存関係や副作用をどう見つけ、どう分けるかだった。
ReactフロントエンドはバックエンドAPIを待たない：API層とMockで独立開発する方法
ReactとViteのTodoアプリを題材に、API層、axiosインスタンス、Mock API、React Routerを使って、バックエンド実装を待たずにフロントエンド開発を進める構成を整理します。
SPAからSSRへ：Next.jsで理解するCSRとSSRの5つの違いとSEO
CSRとSSRの違いを、レンダリング場所、初期表示、SEO、サーバー負荷、ハイドレーションの5点から整理し、Next.js App Routerの基本と実装時の注意点を解説します。
大容量ファイルのアップロードが途中で止まる？Reactで分割アップロードを実装する
大容量ファイルをReactとTypeScriptで分割して送信し、Express側で結合するまでを実装します。ハッシュによる重複スキップ、並列数の制御、途中で止まったアップロードの再開まで扱います。
useEffectを乱用しない――不要なEffectを見分ける5つの基準
ReactのuseEffectを派生値、イベント処理、データ取得、初期化へ安易に使わず、外部システムとの同期が必要かで判断する方法を整理します。