React

Reactで簡単にタイピングアニメーションを実装できるreact-typicalの使い方を紹介します。
reactのバージョンが15か16しか対応していませんが、v17, v18以上で使う方法はあるので合わ ...

React

Reactに限った話ではありませんが、ネイティブのJavaScriptのSetを使って配列の重複チェックや削除して、ユニークな値だけを取り出す方法を紹介します。
本記事では、Reactのプロジェクトでよくあ ...

React

Reactでアコーディオンを作成する方法を紹介します。
まずはReactでシンプルなアコーディオンメニューの実装方法を紹介します。
その後、アニメーションの付け方や、より便利でサクッと作成できるライ ...

React

ReactのuseEffectを使って初回のみ(1回だけ)処理を実行する方法を実例とともに解説します。
また、useEffectの使い方を間違えるとエラーやパフォーマンス低下を招くため使うなと言われることが ...

React

Reactで配列を表示する方法について紹介します。
まずはReactではどんな方法で配列を表示できるのか単純なリスト表示から解説を始めます。
その後、Reactでよく使うmapとfilterで配列を ...

React

ReactでSwiper（スライダー）を使う基本的な方法を紹介します。
また、より発展的にテストモジュールデータのメモ化やSwiperモジュールの読み込みを動的インポートに切り替える方法も紹介しています。 ...

React

Reactで配列の中のオブジェクトのプロパティすべてをpropsとして渡す方法を紹介します。
TypeScriptの使用した場合の書き方、React.memoを使って再レンダリングを防ぐ方法、PropTyp ...

React

ReactでReduxでクリックしたら複数のdispatchを実行する方法を紹介します。

ReactでReduxでクリックしたら複数のdispatchを実行する方法import { useDispatch, ...

React

Web制作など既存のWebサイトや、そこまでガチガチにReactなどを使う必要がないときでもReactをちょい足ししてリッチする方法を紹介します。
企業サイトを作成する場合は、カタログの一括ダウンロードだっ ...

React

Reactでセッションストレージやローカルストレージのデータを取得する方法を紹介します。
セッションストレージでもローカルストレージでもやり方はまったく同じため、以下の例では、セッションストレージで紹介しま ...

React

React V19で追加された新機能useフック ( use hook)の特徴と基本的な使い方を紹介します。useフックの特徴、基本的な使い方、なぜ使うといいのか、使う場合の制約などを詳しく説明しています。 ...

React

HTMLにscriptタグでjsonデータを埋め込んでそれを取得して使う方法を紹介します。
apiを叩いて取得するのではなく、phpなどであらかじめjsonデータをHTMLに落としてそれをJavaScrip ...

React

Reactのカスタムフック「usePrevious」を活用し、ひとつ前の状態と現在の状態を簡単に比較する方法を解説。React v19での注意点やStrict Mode対応についても参考にしてください。

React

Reactのカスタムフックの作成方法と使い方を紹介します。

Reactのカスタムフックとは

useStateなどのReact Hookを内部で使っている関数(フック)のことをカスタムフックといいます。

React

ReactのuseContextについて、使い方や、いつ使うのかといった情報を共有します。
また、useContextを使って別ファイルとデータ共有の仕方や再レンダリングについても紹介します。

Rea ...

React

Reactでコンポーネントを他のコンポーネントに渡せるpropsのchildrenの使い方を紹介します。
childrenを上手に使うことで、再利用性の高いコンポーネントを作成することができます。

c ...

React

ReactでReduxを使う方法を紹介します。

ReactでReduxを使う方法

公式の手順は以下にあります。

実際はReactを作成してからReduxをいれることが多いと思うので、

React

Reactで独自で作成したSVGアイコンや無料のアイコンサービスなど使用する方法を紹介します。

ReactでSVGアイコンを使用する方法

他にも以下のように手軽に使えるやり方を紹介しています。
【 ...

React

Reactを使うとほぼ必ず出くわすReduxについて、所見では意味不明で学習したくなくなる場合も少なくないです。
Reduxってそもそも何？なんで使う必要があるの？という点について理解して、
Red ...

React

Reduxを理解するために、まずは仕組みを理解しましょう。

Reduxの仕組みを３分で理解する

引用:

上の図は、Reduxの公式サイトより引用しているものです。
上の図にで

React

ReactのuseEffectとuseLayoutEffectの違いを紹介します。

ReactのuseEffectとuseLayoutEffectの違い

まず、前提として、useEffectとuseLay ...

React

ReactのuseEffectの第二引数の使い方と活用事例と無限ループになってしまう注意点を紹介します。

useEffectの第二引数の役割

useEffectの第二引数は、依存配列と呼ばれます。

React

ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。
数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。

R ...

React

ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。

useStateとuseReducerの違い

まずは簡単なボタンを作成して、数字をカウントアップすると ...

React

ReactでuseImperativeHandleを使ってrefへのアクセスを制限する方法を紹介します。

forwardRefで他のコンポーネントにrefを渡すことが可能になりますが、
DOM操 ...

React

Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。

Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方

コンポーネントをまたいでDOM ...

React

ReactでDOMを直接操作するuseRefの使い方を紹介します。

useRefの使いどころ

useRefをいつ使うかですが、DOMのメソッドを使いたいときです。
たとえば、よくあるユースケースと ...

React

ReactでSASS(SCSS)を使う方法を紹介します。

手順1:node-sassをインストールするnpm install node-sass手順2:css拡張子をscss拡張子に変更する

css拡張子 ...

React

ReactとFirebaseを使う方法を紹介します。

ReactとFirebaseを使う方法手順1:firebaseでプロジェクト作成

firebaseにログインして、プロジェクトを作成します。

React

Reactでリダイレクトを設定する方法を紹介します。
以下の例ではログイン・ログアウト後にリダイレクトさせています。

Reactでログイン・ログアウト後にリダイレクトを設定する方法手順1:react- ...