Google Chromeでプラグインを使用せずに画面全体のスクリーンショットを取得する方法です。 プラグイン使ったほうが楽ですが、セキュリティの関係でプラグイン使用不可の場合もあると思うので、そんなときに使えます。 ま ...

エラー概要 Reactで「React has detected a change in the order of Hooks called by〜」が発生した場合の対処法です。 上記エラーは、useStateなどのHoo ...

フロントエンド開発をしていると、ブラウザのデベロッパーツールをよく使います。 Chromeのデベロッパーツールで知っておくと便利な使い方をご紹介します。 日本語化 デベロッパーツールを開き、右上の歯車 > 言語 で ...

iPhoneのSafariで開発者ツールを使用する方法です。PcのMacが必要になります。 やり方 1. MacでSafariを起動する 2. iPhoneとMacを接続する 3. iPhoneでSafariを一度終了し ...

SWRで取得したdataを、React Hook Form（以降はRHF）のdefaultValuesにセットしたいことがあると思います。以下のような感じです。 しかし、このやり方だとdefaultValuesにうまくセ ...

React Hook Formのresetは「Formを空にする」という理解でいましたが勘違いしていました。 上記は、defaultValuesでhogeの初期値に「test」を設定しています。hogeの値を変更後、リセ ...

SWRで定期的に再検証する方法です。 refreshIntervalを使用すると実現できます。 上記の例では、5秒おき(5000ミリ秒)に再検証するようにしています。 refreshIntervalは0を指定すると自動再 ...

Controllerを使用せずにコンポーネントに対してReact Hook Formのregisterを渡したいことがあったのでメモ。

ReactとTailwindCSSでアニメーションを実装しようとして少し詰まったのでメモ。 「ボタンが押されたら1秒かけて文字の不透明度を0から1にする」というアニメーションは下記のようにすれば実現できます。 「サンプル ...

分割代入と残余引数を使えば、オブジェクトから「特定のプロパティ以外」を全て取り出すことができます。 上の例では、オブジェクトprofileからidを分割代入で取り出し、それ以外のプロパティは残余引数を使ってnewProf ...

やりたいこと ↑↑のようなオブジェクトがあった場合に、undefinedのプロパティを削除して↓↓のようなオブジェクトにしたい 解決策 こんな感じでできました！ 解説 Object.entriesでオブジェクトを配列に変 ...

useSWRを使用しているコンポーネントのテストコードをReact Testing Libraryで書く際に、useSWRをmock化する必要がありました。 下記のようにしてuseSWRをmock化できました。

React Testing LibraryでFormの入力値が正しいかテストする方法です。 toBeやtoHaveValueで値が取得できると思っていましたができなかったので備忘録です。 ※React Hook Form ...

React Testing LibraryでqueryByTextとgetByTextの違いがわかっていなかったのでメモ。 queryByTextの場合は対象の文字列がなかった場合はテストが失敗するだけですが、getBy ...

Alt + ↑↓ Altキー + 上下の矢印キー(方向キー)でカーソルの行を上下に移動できます。 Alt + Shift + ↑↓ Alt + Shift + 上下の矢印キー(方向キー)でカーソルの行をコピーできます。 ...

下記のようなSampleContextというContextと、SampleContextを使用しているSampleというコンポーネントがあるとします。 上記Sampleコンポーネントで「0です」と表示されるケースと「0以 ...

「関数やReactのコンポーネント名を変更したいけど色々な箇所で使用しているから変更が面倒」という場合はF2キーを使用すると一括で変更できて便利です。 例えば、「関数hogeをButtonコンポーネントで使用していて、関 ...

Next.jsでnext/navigationをインポートしているコンポーネントをReact Testing Libraryでテストを実行したらエラーになりました。 コンポーネント テストコード エラー内容 Jestはサ ...

Next.js13にJest、React Testing Libraryを導入する手順です。 Jest、React Testing Libraryのインストール 下記コマンドを実行してJestをインストールします。 Je ...

formタグにonKeyDownを追加し、Enterキーが押されたらevent.preventDefault()でsubmitをキャンセルしている。 eslintでonKeyDownのエラーが表示されたら// eslin ...