React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。1つのpropの値で分岐させるあるpropの値を元に型を分岐させるやり方...
React
React 
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき
エラー内容actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。Warning:Thecurrenttestingenvironmentisnotconfiguredtosupportact(...)対...
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。テストするフォーム（ReactHookF...
JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)
Jest,ReactTestingLibraryを用いたテスト時に、next/link周りで出たエラーの対処法です。エラー内容TypeError:Cannotreadpropertiesofnull(reading'push'...
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること
ReactHookForm（以下RHF）とMaterialUIを組み合わせた、defaultValue系にハマりやすいので備忘録です。useFormのresetを実行しているかAPIでdefaultValueをフェッチするときにやることです...
React 【React/Formik】入力時に自動送信する方法
Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。方針FormikのuseFormikContextを使用する！FormikのForm内の子コンポーネント等で呼び出すと、Formikの変数や関...
React ReactSelect(AsyncSelect)でデバウンスする方法
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。デバウンスとは連続して呼び出される同じ処理を制御すること。呼び出...
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、ReactPortalという救世主がいるのでご紹介します。ReactPortalとはReactの公式ドキュメ...
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などを使用するコンポーネントを受け取る際は、引数にpropsを受け取り、...
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を指定します。import{ReactNo...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。React.FCとは？略さずに書くと、React：Functi...
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する
SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。方針ログイン状態を判断するstateをグローバルで管理するそのstateには、...
React 【React】FontAwesomeの使い方（同じ名前のアイコンをインポートする場合もあり）
ReactでFontAwesomeを使いたいときのやり方です。【事前準備】FontAwesomeをインストールするまず、以下のコマンドを実行してFontAwesomeをインストールします。インストールするものは5種類ありますが、インストール...
React 【TypeScript×React】React-Modalの使い方
Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。前提環境TypeScriptとReactはインストール済。インストールこちらの...
React 【エラー/TypeScript×React】inputが使えない。inputが入ったコンポーネントを返すと読み込まれなくなる。
はまったエラーがあったので記録です！エラーが出たコード<input></input>という形で文字列を囲んでいます。うまくいった例これを<inputvalue=""/>とすると、うまくいきました！結論：<input></input>で文字列...