React
React 19のuseActionStateでフォーム送信｜pending・エラー時の入力保持・成功時のリセット
React 19のuseActionStateとuseFormStatusでフォーム送信を実装。引数の順番、送信中の無効化、失敗時に入力を残して成功時だけ消す方法を、Viteで動くコードと検証結果で解説します。
CATEGORY
React
Reactに関する基礎、実装例、トラブル解決の記事をまとめています。
54ARTICLES
React
ReactでGSAPを使う方法｜useGSAP・contextSafeとStrictModeの後片付け
ReactのGSAPをscope・dependencies・revertOnUpdateで作成・破棄する実例。contextSafeとイベント解除の違いを整理し、StrictMode、props更新、ScrollTrigger、取り外し後の残存を2枚のカードで確認します。
React
Reactのスケルトン表示｜300ms遅延とSuspense・useTransitionの使い分け
Reactで実カードと寸法を揃えたスケルトンを作ります。短い待ち時間では表示を遅らせ、Suspenseのfallbackと通常のloading状態を使い分け、useTransitionで表示済みの内容を保つ実装を解説します。
React
Typed.jsをReact・Vueで使う方法｜初期化・destroyと二重起動の防ぎ方
Typed.jsをReactのuseEffect・Vue 3のonMountedで動かすコンポーネント例。destroyによる後片付け、props変更、StrictMode、Next.jsの配置、動きを減らす設定への対応を解説します。
React
【React 19.2対応】useフック（use API）の特徴と基本的な使い方
React 19で追加されたuse API（useフック）の特徴と基本的な使い方を、React 19.2時点の情報で紹介します。Promise・Contextの読み取り、Suspenseとの組み合わせ、条件分岐の中で呼べる理由、useEffectとの違い、制約と注意点まで説明します。
React
【React】useRefの応用、ひとつ前の状態と現在の状態を比較する方法(usePrevious)
Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。
React
ReactでHTML埋め込みJSONを取得する方法｜PHP連携とXSS対策
PHPなどでHTMLへ埋め込んだJSONをReactの初期データとして取得する方法を解説します。application/json、JSON.parse、createRoot・hydrateRoot、Strict Mode、Server Componentsとの違い、script終了文字列によるXSSを防ぐエンコードまで紹介します。
React
【React】でセッションストレージやローカルストレージのデータを取得する方法
ReactでlocalStorage・sessionStorageの値を読む最短の方法は、useStateの初期値を関数で渡すlazy initializerです。保存はuseEffectで行います。カート機能での実例と、React 19のuseでPromiseを読む書き方も紹介します。
React
【React】Webサイトにちょい足ししてCRUDなどを操作をする方法
Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。 企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧…
React
【React】Reduxでクリックしたら複数のdispatchを実行する方法
ReactとReduxでボタンをクリックしたときに複数のdispatchを実行する方法を紹介します。onClickに波括弧つきの関数を渡すだけで順番に実行でき、Redux Toolkit・非同期・TypeScriptの書き方も合わせて解説します。
React
【React】配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法
Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。 TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTypesを使う方法、静的データの場合のuseMemo活用なども合わせて紹介します。
React
Reactでアクセシブルなアコーディオンを作る方法｜複数・アニメーション対応
ReactでWAI-ARIAに沿ったアコーディオンを作る方法を解説します。useId、aria-expanded・aria-controls、単一・複数開閉、入れ子、Motionアニメーション、reduced motion、details・Radix UI・MUIとの選び方まで実装例で確認できます。
React
【React】でSwiper（スライダー）の使い方・基本的な導入手順や動的インポートに切り替える方法を紹介
ReactでSwiper（スライダー）を使う基本的な方法を紹介します。 また、より発展的にテストモジュールデータのメモ化やSwiperモジュールの読み込みを動的インポートに切り替える方法も紹介しています。
React
【React】タイピングアニメーションのreact-typicalをReactv17, v18以上で使いたいとき
Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。 reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わせて紹介します。 代替のライブラリや自作するコードサンプル例も合わせて紹介します。
React
【React】配列の重複チェックや重複削除して、ユニークな値を抽出する方法
Reactに限った話ではありませんが、ネイティブのJavaScriptのSetを使って配列の重複チェックや削除して、ユニークな値だけを取り出す方法を紹介します。 本記事では、Reactのプロジェクトでよくある「オブジェクト配列の中からカテゴリー名を抽出し、ユニークなリストを作成する」ケースを例に、Setの活用方法を紹介します。
React
【React】SVGアイコンを使用する方法
Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。 ReactでSVGアイコンを使用する方法 他にも以下のように手軽に使えるやり方を紹介しています。 【React】Font A…
React
【React】Redux toolkitの使い方(Slice作成、Redux Dev Toolsでstateを確認)
ReactでReduxを使う方法を紹介します。 ReactでReduxを使う方法 公式の手順は以下にあります。 https://react-redux.js.org/introduction/getting-starte…
React
【React】Reduxの仕組みとデータフロー｜Store・Action・Reducerの流れを図で理解する
ReduxのStore・State・Action・Dispatch・Reducerの間でデータがどう流れるかを、公式のデータフロー図とコンビニのたとえで解説します。UIの操作からdispatch、Reducer、Storeの更新までの一方向の流れを3分でつかめます。
React
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
React
【React 19.2対応】カスタムフックの作成方法・使い所・実例をわかりやすく解説
Reactのカスタムフックは、useState、useEffect、useContextなどのReact Hooksを組み合わせて、コンポーネント間で再利用しやすくするための仕組みです。React 19.2時点でも、カス…
React
【React】useEffectとuseLayoutEffectの違い
ReactのuseEffectとuseLayoutEffectの違いを紹介します。 ReactのuseEffectとuseLayoutEffectの違い まず、前提として、useEffectとuseLayoutEffec…
React
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点
ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。 useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第…
React
React useEffectを初回だけ実行する方法｜Strict Modeで2回動く理由も解説
ReactのuseEffectを初回マウント時だけ実行する方法を解説します。空の依存配列、Strict Modeで開発時に2回動く理由、cleanup、setInterval・fetchの正しい例、依存配列と無限ループ、useRefで抑止してはいけない理由まで整理します。
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextをいつ使うか、createContext・Provider・useContextの3ステップの使い方、別ファイルとのstate共有、再レンダリングの注意点をコード付きで解説します。
React
【React】useReducerを使って四則演算の結果を表示するアプリ作成方法
ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。 数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。 ReactのuseRe…
React
【React】useStateとuseReducerの違いとuseReducerの使い方と使い所
ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。 useStateとuseReducerの違い まずは簡単なボタンを作成して、数字をカウントアップするときの書き方の違い…
React
【React】useImperativeHandleを使ってrefへのアクセスを制限する方法
ReactのuseImperativeHandleで、親に公開するrefのメソッドを限定する方法を解説します。forwardRefとの組み合わせ、React 19でrefをpropsとして受け取る書き方、依存配列、inputのフォーカスとvideoの再生・停止の実例を紹介します。
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】SASSを使う方法
ReactでSASS(SCSS)を使う方法を紹介します。 手順1:node-sassをインストールする npm install node-sass 手順2:css拡張子をscss拡張子に変更する css拡張子をscss拡…
React
【React】Firebaseの使い方
ReactとFirebaseを使う方法を紹介します。 ReactとFirebaseを使う方法 手順1:firebaseでプロジェクト作成 firebaseにログインして、プロジェクトを作成します。 Firebaseのプロ…