React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。
1つ...
React
React 
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき
エラー内容
actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。
Warning: The current testing environment is not configured t...
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。
テストするフォ...
JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)
Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。
エラー内容
TypeError: Cannot read properties of null (re...
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること
React Hook Form（以下RHF）とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。
useFormのresetを実行しているか
APIでdefaultValueをフェッ...
React 【React/Formik】入力時に自動送信する方法
Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。
方針
FormikのuseFormikContextを使用する！FormikのForm内の子コンポーネント等で呼び出すと、Fo...
React ReactSelect(AsyncSelect)でデバウンスする方法
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。
デバウンスとは
連続して呼び出される同じ...
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。
React Portalとは
R...
React 【GraphQL/Apollo/Jest/React】queryのresultのdataがundefinedになる
GraphqlとReactのテストを書いているときに手こずったことを記録します。
問題
MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedに...
React 【Jest/GraphQL/React】Error: No more mocked responses for the query: mutation
このエラーで何時間も消えていったため、確認事項を記録しておきます。
大体のエラー原因
モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。
具体的に確認すべきこと
使用するクエリのドキュメントを...
React 【React】マウントとレンダリングとその違い
自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。
マウントとは
Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー（DOMコンテナ）への追加を行う処理...
React 【React×TypeScript】コンポーネントをPropsとして渡す方法
コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。
ポイント
指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpr...
React 【React】map関数で作ったリストを並び替え・ソートする方法
map関数で作ったリストの並び替えに苦戦したので、解決方法を記載します。
やりたかったこと
親コンポーネントでstateに格納した配列を、子コンポーネントにPropsとして渡し、それを子コンポーネントで一覧表示にしていました。...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリ
react-paginateを使用しました。
Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそう...
React 【TypeScript×React】childrenの受取を必須にしたい！もしくは拒否したい！
開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…！ってなるとき、たまにありませんか？
かなり簡潔ですが、以下のようにすればできます。
必ず受け取るとき
ReactNodeを指定します。
...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。
最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。
React.FCとは？
略さずに書くと...
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する
SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。
方針
ログイン状態を判断するstateをグローバルで管理するそ...
React 【React】FontAwesomeの使い方（同じ名前のアイコンをインポートする場合もあり）
ReactでFontAwesomeを使いたいときのやり方です。
【事前準備】FontAwesomeをインストールする
まず、以下のコマンドを実行してFontAwesomeをインストールします。
インストールするものは5種...
React 【TypeScript×React】React-Modalの使い方
Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。
前提環境
TypeScriptとReactはインストー...
React 【エラー/TypeScript×React】inputが使えない。inputが入ったコンポーネントを返すと読み込まれなくなる。
はまったエラーがあったので記録です！
エラーが出たコード
<input></input>という形で文字列を囲んでいます。
うまくいった例
これを<input value="" />とすると...