白々さじきのテックブログ

ReactのJSXでリストを表示するときにfor文ではなく.map()を使う理由を解説。「式と文の違い」という観点でJSXの仕組みを説明し、key propが必要な理由とインデックスを避けるべき理由もあわせて紹介します。

Reactプロジェクトで色などのデザイン値をTypeScript定数で一元管理する方法を解説。デザイントークンの考え方、theme.tsの作り方、backgroundColor vs backgroundの違いも紹介します。

ViteプロジェクトでAPIキーを安全に管理する方法を解説。.envファイルの作り方、VITE_プレフィックスが必要な理由、import.meta.envでの読み取り方、.gitignoreへの追加まで手順を紹介します。

Reactで子コンポーネントから親の状態を更新する方法を解説。「関数をpropsとして渡す」パターンをTypeScriptの型定義例とあわせて紹介します。

Geolocation APIなどコールバック形式のAPIをPromiseでラップしてawaitで使う方法を解説。ReactのuseEffectで非同期処理を正しく扱うパターンも紹介します。

ReactでsetStateの直後にconsole.logすると古い値が出る理由を解説。「スナップショットモデル」の考え方と、stateの最新値を正しく確認する方法を紹介します。

Reactのフックをループや.map()の中で使うとエラーになる理由を解説。「呼んだ順番で管理」というReactの仕組みを理解し、コンポーネント切り出しで解決する方法を紹介します。