React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つのpropの値で分岐させる あるpropの値を元に型を分岐させるや...
React
React 
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき
エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured to suppo...
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォーム（React Hoo...
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 (reading &...
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内の子コンポーネント等で呼び出すと、Formikの変数...
React ReactSelect(AsyncSelect)でデバウンスする方法
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ処理を制御すること。呼...
制作物/つくってみた npmライブラリ（ReactのUIライブラリ）作ってみた
何を作ったの？ React用のスピナーライブラリを作りました。スピナー集のようなものです。 なんで作ったの？ ライブラリを作ってみたかったから！ 本当にこの気持ちだけです笑便利なライブラリを作りたい気持ちはありましたが、どんなにショボくても...
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは Reactの公式...
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を受け取...
制作物/つくってみた 自主制作Webアプリ解説「パンBOX – お気に入りのパン屋さんを見つける、つながる」
アプリ概要 ユーザーは福岡市内のパン屋を探したり、口コミ投稿やお気に入り保存ができます。また、店舗側は店舗情報充実や口コミへの返信ができるアプリです。 ユーザー側福岡市にあるパン屋を検索できるパン屋への口コミを点数付きで投稿・編集・削除でき...
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 { R...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。 React.FCとは？ 略さずに書くと、React：Fun...
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はインストール済。 インストール ...