// 子コンポーネントが公開するAPIの型 export type InputFieldHandle = { focus: () => void clear: () => void getValue: () => string } // useImperativeHandle で外から呼べるメソッドを定義する const InputField = forwardRef<InputFieldHandle, Props>((props, ref) => { cons</inputfieldhandle,>…

// 画面表示時に自動フォーカス const nameRef = useRef<HTMLInputElement>(null) useEffect(() => { nameRef.current?.focus() }, []) // Enter で次フィールドへ移動 const moveFocus = (e: React.KeyboardEvent<HTMLInputElement>, next: React.RefObject<HTMLInputElement | HTMLButtonElement | null>) => { if (e.key === 'Enter') { e.pr</htmlinputelement></htmlinputelement></htmlinputelement>…

react-hook-form + Zod でフォームバリデーション入門 react-hook-form と zod を組み合わせると、フォームのバリデーションとエラーメッセージ表示を型安全に実装できます。zodResolver がスキーマとフォームをつなぐ役割を担います。 早わかりまとめ 役割 …

React TypeScript：useState・useRef・Props の型指定まとめ React と TypeScript を組み合わせるときに迷いやすい型指定のパターンをまとめます。 useState の型指定 初期値から型が推論される 単純な値は推論に任せて書けます。 const [count, setCount] =…

Storybook入門：React TypeScriptでコンポーネントのStoryを書く Storybookとは StorybookはUIコンポーネントをアプリから切り離して、独立した環境で開発・確認できるツールです。 通常の開発：アプリを起動 → 特定の画面まで遷移 → コンポーネントを確認 S…

Apollo Client + React入門：TypeScriptでGraphQL CRUDを実装する はじめに この記事は「GraphQL入門：TypeScriptでスキーマ・Query・Mutationを実装する」の続きです。Apollo Serverで立ち上げたGraphQLサーバーに対し、React + Apollo ClientでCRUD操作を…

React DevTools Profiler：再レンダリングを特定してパフォーマンス改善 Profilerタブとは React DevToolsの「Profiler」タブはReactコンポーネントのレンダリングを録画・計測するツールです。どのコンポーネントが何回・何ms かかって再レンダリングされた…

React DevTools 入門：Components タブでpropsとstateを確認する Components タブの開き方 npm run dev でアプリを起動する（本番ビルドでは DevTools が機能しない） ブラウザで開発者ツールを開く（F12 または Cmd+Option+I） タブ一覧の右端に「⚛ Compone…

ReactのforwardRef：React 19で不要になった背景と移行方法 forwardRefとは forwardRef は親コンポーネントから子コンポーネントの DOM要素に ref を渡すためのAPIです。React 18以前では ref が特殊なpropとして扱われていたため、このラッパーが必要でした…

TanStack Router 入門：型安全なルーティングの基本 TanStack Routerとは TanStack RouterはReact向けの型安全なルーティングライブラリです。URLパラメータやクエリパラメータまでTypeScriptの型が効き、遷移先のパスも補完されます。React Router v6と比べ…

React Router v6 入門：Routes・Link・useNavigateの使い方 React Routerとは React RouterはReactアプリにルーティング（URLに応じて表示するコンポーネントを切り替える）を追加するライブラリです。v6からAPIが大幅に変わり、よりシンプルに書けるように…

TanStack Query 入門：useQueryでデータフェッチを簡単に TanStack Queryとは TanStack Query（旧React Query）はReactでのデータフェッチ・キャッシュ・同期を管理するライブラリです。useEffect + useState で自前実装していたローディング・エラー・キャ…

Redux Toolkit 入門：createSliceとconfigureStoreの基本 Redux Toolkitとは Redux Toolkit（RTK）はReduxの公式ツールキットです。従来のReduxは設定が煩雑でボイラープレートが多かったため、それを解消するために作られました。現在はReduxを使う場合はRT…

ReactのuseReducer入門：useStateとの違いと使い分け useReducerとは useReducer は useState の代替となるフックで、複数の状態や複雑な状態遷移を管理するのに適しています。Reduxと同じ「action → reducer → 新しい状態」というパターンで状態を更新しま…

ReactのuseContext入門：コンポーネント間で状態を共有する useContextとは useContext はコンポーネントツリーを通じて値を共有するためのフックです。propsのバケツリレー（中間のコンポーネントを経由してpropsを渡し続ける問題）を解決できます。 props…

ReactのuseState入門：基本から配列・オブジェクトの更新まで useStateとは useState はReactコンポーネントに状態を持たせるためのフックです。状態が変わるとコンポーネントが再レンダリングされます。 基本的な使い方 import { useState } from 'react' f…

React + Vite でプロジェクト作成：セットアップから起動まで はじめに ReactプロジェクトはかつてCreate React App（CRA）で作るのが一般的でしたが、現在は Vite を使うのが主流です。Viteは開発サーバーの起動とHMR（ホットリロード）が高速で、TypeScrip…

orvalでOpenAPIからReact Queryフックを自動生成する はじめに OpenAPIで定義したAPIをReactから呼び出すとき、useQuery や useMutation を毎回手書きしていませんか？ orval を使うとOpenAPI仕様からTypeScriptの型定義・React Queryフック・APIクライアン…

ReactのuseEffect入門：基本から気をつけることまで はじめに useEffect はReactコンポーネントで副作用（APIフェッチ・タイマー・イベントリスナーなど）を扱うためのフックです。便利な一方で、使い方を誤ると無限ループやメモリリークが起きやすいため、…

ReactのuseState・useRef・constの違い：再レンダリングと値の保持を理解する はじめに Reactコンポーネントの中で値を扱うとき、useState・useRef・const のどれを使えばいいか迷うことがあります。それぞれ「値の保持」と「再レンダリング」の動きが異なり…

今回はReactアプリを作成する際にReferenceError: fetch is not definedエラーが出た際の解消方法をエントリーします。 ケースとしてはcreate react appではなくwebpackやviteでアプリを作成しアプリ内でfetchを使いAPIなどを利用したケースをJest + Testing…

次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例 前提 node.js,npmが利用できること node -v v16.15.0 npm -v 8.5.5 環境構築 任意のディレクトリでviteで初期化 npm init vite@latest 設定は…