React
ReactでHTML埋め込みJSONを取得する方法｜PHP連携とXSS対策
PHPなどでHTMLへ埋め込んだJSONをReactの初期データとして取得する方法を解説します。application/json、JSON.parse、createRoot・hydrateRoot、Strict Mode、Server Componentsとの違い、script終了文字列によるXSSを防ぐエンコードまで紹介します。
CATEGORY
React
Reactに関する基礎、実装例、トラブル解決の記事をまとめています。
50ARTICLES
React
【React】Reduxの仕組みとデータフロー｜Store・Action・Reducerの流れを図で理解する
ReduxのStore・State・Action・Dispatch・Reducerの間でデータがどう流れるかを、公式のデータフロー図とコンビニのたとえで解説します。UIの操作からdispatch、Reducer、Storeの更新までの一方向の流れを3分でつかめます。
React
【React】イベントを登録する方法
Reactでイベントを登録する方法を紹介します。 【React】イベントを登録する方法(クリックイベント) const Sample = () => { const clickAction = () => { alert("clickされました"); }; return ( <…
React
【React】useRefの応用、ひとつ前の状態と現在の状態を比較する方法(usePrevious)
Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。
React
【React】ローディングアニメーション(スピナー)を表示する方法
Reactでローディングアニメーション(スピナー)を表示する方法です。useStateで読み込み中の状態を持ち、trueの間だけCSSの@keyframesで動くスピナーを表示します。fetchと組み合わせてfinallyで消す書き方、React Iconsを使う方法も紹介します。
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextをいつ使うか、createContext・Provider・useContextの3ステップの使い方、別ファイルとのstate共有、再レンダリングの注意点をコード付きで解説します。
React
【React】ページネーションを自作する方法
Reactで外部API(JSON)のデータを「前へ」「次へ」で切り替えるページネーションを自作する方法です。next・previousのURLをuseStateで持ち、ボタンで取得し直す流れを、ポケモンAPIを例に説明します。
React
【React】でよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)
Reactでよく使う条件分岐の書き方(&&、??(Null合体演算子)、三項演算子)を、同じmapの例で比較します。JSXでif文が書けない理由、===で比較する理由、&&で0が表示される落とし穴も紹介します。
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 19.2対応】useフック（use API）の特徴と基本的な使い方
React 19で追加されたuse API（useフック）の特徴と基本的な使い方を、React 19.2時点の情報で紹介します。Promise・Contextの読み取り、Suspenseとの組み合わせ、条件分岐の中で呼べる理由、useEffectとの違い、制約と注意点まで説明します。
React
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactのpropsのchildrenの使い方を解説します。タグの間に書いた要素がchildrenとして渡る仕組み、受け取り方、順番の制御、React.Children、TypeScriptの型、再利用可能なCardコンポーネントの実例とよくあるつまずきを紹介します。
React
【React】useImperativeHandleを使ってrefへのアクセスを制限する方法
ReactのuseImperativeHandleで、親に公開するrefのメソッドを限定する方法を解説します。forwardRefとの組み合わせ、React 19でrefをpropsとして受け取る書き方、依存配列、inputのフォーカスとvideoの再生・停止の実例を紹介します。
React
【React】React Iconsの使い方-react-icons
ReactでReact Icons(react-icons)を使う手順です。npm install react-iconsでインストールし、react-icons/aiのようなセット別パスから使うアイコンだけをimportしてJSXに置きます。size・colorの指定とIconContextでのまとめ指定も紹介します。
React
【React】でセッションストレージやローカルストレージのデータを取得する方法
ReactでlocalStorage・sessionStorageの値を読む最短の方法は、useStateの初期値を関数で渡すlazy initializerです。保存はuseEffectで行います。カート機能での実例と、React 19のuseでPromiseを読む書き方も紹介します。
React
【React】useStateの使い方と注意点まとめ
ReactのuseStateの使い方と注意点をまとめます。分割代入の基本から、即時反映されない理由、前の値を使った更新、オブジェクト・配列の更新、keyによるstateのリセット、親でstateを管理する方法まで解説します。
React
【React】Reduxでクリックしたら複数のdispatchを実行する方法
ReactとReduxでボタンをクリックしたときに複数のdispatchを実行する方法を紹介します。onClickに波括弧つきの関数を渡すだけで順番に実行でき、Redux Toolkit・非同期・TypeScriptの書き方も合わせて解説します。
React
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
React
【React】JSX内にJavaScriptの式を埋め込む方法と式と文の違い
ReactのJSX内にJavaScriptを埋め込む方法を解説します。{}で書けるのは式だけで、if文などの文はreturnの手前で処理します。三項演算子・map()による配列描画・HTML文字列をdangerouslySetInnerHTMLで埋め込む際の注意点も紹介します。
React
React useEffectを初回だけ実行する方法｜Strict Modeで2回動く理由も解説
ReactのuseEffectを初回マウント時だけ実行する方法を解説します。空の依存配列、Strict Modeで開発時に2回動く理由、cleanup、setInterval・fetchの正しい例、依存配列と無限ループ、useRefで抑止してはいけない理由まで整理します。
React
Reactで配列を表示する方法｜map・filter・keyと表示されない原因
Reactで配列をリスト表示するmap・filterの書き方を初心者向けに解説します。安定したkey、オブジェクト配列、検索・空配列・非同期データ、state更新、mapしても表示されない原因までコードで確認できます。
React
【React 19.2対応】カスタムフックの作成方法・使い所・実例をわかりやすく解説
Reactのカスタムフックは、useState、useEffect、useContextなどのReact Hooksを組み合わせて、コンポーネント間で再利用しやすくするための仕組みです。React 19.2時点でも、カス…
React
【React】タイピングアニメーションのreact-typicalをReactv17, v18以上で使いたいとき
Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。 reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わせて紹介します。 代替のライブラリや自作するコードサンプル例も合わせて紹介します。
React
【React】配列の重複チェックや重複削除して、ユニークな値を抽出する方法
Reactに限った話ではありませんが、ネイティブのJavaScriptのSetを使って配列の重複チェックや削除して、ユニークな値だけを取り出す方法を紹介します。 本記事では、Reactのプロジェクトでよくある「オブジェクト配列の中からカテゴリー名を抽出し、ユニークなリストを作成する」ケースを例に、Setの活用方法を紹介します。
React
【React】でSwiper（スライダー）の使い方・基本的な導入手順や動的インポートに切り替える方法を紹介
ReactでSwiper（スライダー）を使う基本的な方法を紹介します。 また、より発展的にテストモジュールデータのメモ化やSwiperモジュールの読み込みを動的インポートに切り替える方法も紹介しています。
React
【React】Webサイトにちょい足ししてCRUDなどを操作をする方法
Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。 企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧…
React
【React】Redux toolkitの使い方(Slice作成、Redux Dev Toolsでstateを確認)
ReactでReduxを使う方法を紹介します。 ReactでReduxを使う方法 公式の手順は以下にあります。 https://react-redux.js.org/introduction/getting-starte…
React
【React】SVGアイコンを使用する方法
Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。 ReactでSVGアイコンを使用する方法 他にも以下のように手軽に使えるやり方を紹介しています。 【React】Font A…
React
【React】useEffectとuseLayoutEffectの違い
ReactのuseEffectとuseLayoutEffectの違いを紹介します。 ReactのuseEffectとuseLayoutEffectの違い まず、前提として、useEffectとuseLayoutEffec…
React
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点
ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。 useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第…