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
Reduxとは？Reactで使う意味・不要なケース・Redux Toolkitを解説
Reduxとは何か、Reactで使う意味を初心者向けに解説します。Reduxが不要・必要なケース、useState・useReducer・Contextとの違い、Redux Toolkit、RTK Query、Next.jsでの注意点まで整理します。
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でアクセシブルなアコーディオンを作る方法｜複数・アニメーション対応
ReactでWAI-ARIAに沿ったアコーディオンを作る方法を解説します。useId、aria-expanded・aria-controls、単一・複数開閉、入れ子、Motionアニメーション、reduced motion、details・Radix UI・MUIとの選び方まで実装例で確認できます。
React
【React 19.2対応】カスタムフックの作成方法・使い所・実例をわかりやすく解説
Reactのカスタムフックは、useState、useEffect、useContextなどのReact Hooksを組み合わせて、コンポーネント間で再利用しやすくするための仕組みです。React 19.2時点でも、カス…
React
【React 19.2対応】useフック（use API）の特徴と基本的な使い方
React V19で追加された新機能useフック ( use hook)の特徴と基本的な使い方を紹介します。useフックの特徴、基本的な使い方、なぜ使うといいのか、使う場合の制約などを詳しく説明しています。
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】配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法
Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。 TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTypesを使う方法、静的データの場合のuseMemo活用なども合わせて紹介します。
React
【React】Reduxでクリックしたら複数のdispatchを実行する方法
ReactでReduxでクリックしたら複数のdispatchを実行する方法を紹介します。 ReactでReduxでクリックしたら複数のdispatchを実行する方法 import { useDispatch, useSe…
React
【React】Webサイトにちょい足ししてCRUDなどを操作をする方法
Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。 企業サイトを作成する場合は、カタログの一括ダウンロードだったり、商品を顧…
React
【React】でセッションストレージやローカルストレージのデータを取得する方法
Reactでセッションストレージやローカルストレージのデータを取得する方法を紹介します。 セッションストレージでもローカルストレージでもやり方はまったく同じため、以下の例では、セッションストレージで紹介します。 loca…
React
【React】useRefの応用、ひとつ前の状態と現在の状態を比較する方法(usePrevious)
Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextについて、使い方や、いつ使うのかといった情報を共有します。 また、useContextを使って別ファイルとデータ共有の仕方や再レンダリングについても紹介します。 ReactのuseCont…
React
【React】propsのchildrenの基本的な使い方と実例(再利用性の高い部品作成方法)
Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。 childrenを上手に使うことで、再利用性の高いコンポーネントを作成することができます。 childrenの基本…
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】Reduxの仕組みを1分で理解する
Reduxを理解するために、まずは仕組みを理解しましょう。 Reduxの仕組みを３分で理解する 引用: https://redux.js.org/tutorials/essentials/part-1-overview-…
React
【React】useEffectとuseLayoutEffectの違い
ReactのuseEffectとuseLayoutEffectの違いを紹介します。 ReactのuseEffectとuseLayoutEffectの違い まず、前提として、useEffectとuseLayoutEffec…
React
【React】useEffectの第二引数の使い方と活用事例と無限ループの注意点
ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。 useEffectの第二引数の役割 useEffectの第二引数は、依存配列と呼ばれます。 useEffectの第…
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で他のコンポーネントにrefを渡すことが可能になりますが、 DOM操作を通してなんでもできてし…
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】でDOMを直接操作するuseRefの使い方とrefとstateの違い
ReactでDOMを直接操作するuseRefの使い方を紹介します。 useRefの使いどころ useRefをいつ使うかですが、DOMのメソッドを使いたいときです。 たとえば、よくあるユースケースとしては、input要素に…
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のプロ…
React
【React】ログイン・ログアウト後にリダイレクトを設定する方法
Reactでリダイレクトを設定する方法を紹介します。 以下の例ではログイン・ログアウト後にリダイレクトさせています。 Reactでログイン・ログアウト後にリダイレクトを設定する方法 手順1:react-router-do…