JavaScript React Query入門 導入から簡単な使い方までを解説
サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET：取得し...
JavaScript
JavaScript 
JavaScript 【React】buttonがdisabledかチェックするテストを実装
Reactで、buttonがdisabledがチェックするテストを実装します。disabledかチェックする方法使用するメソッドbuttonのdisabledをチェックするには、次の２つのメソッドが使えます。toBeDisabled() →...
JavaScript buttonのclickイベントをテストする方法【React Testing Library】
Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。buttonをクリックするテストを実装使用するメソッドbuttonをクリックするには、次の２つのメソッドが使えます。userEvent.click...
JavaScript Reactでテストを実行してみよう！React Testing Libraryの使い方
Reactコンポーネントは、JestとReact Testing Libraryを使ってテストを実施できます。Create React Appで作成したコードを参考に、テストを実行してみましょう。構成はReact+TypeScript+ya...
JavaScript JavaScriptで月末/来週/先週/次の○曜日など特殊な日時をdate-fnsで取得する方法
来週とか月末とか、今を基準とした日時を出力したいってことがありました。ちょっと特殊な日時でも、data-fnsを使用すれば簡単に取得できます。日付取得のさまざまなパターンを記事にまとめました。多いので、目次を活用してください。最初にインスト...
JavaScript JavaScriptでイベントをキャンセルする方法！子要素から親要素へのonClickイベント伝搬をストップ
HTMLでは、クリックなどのイベントが発生した時に、発生した要素だけでなくその親要素にイベントが伝搬していくようです。イベントが発生した要素から親要素へとどんどん伝播していくことを、バブリング（Bubbling）とか言うみたいですね。いや、...
JavaScript JavaScriptの配列検索メソッドは9つあるけど全部知ってる？使用方法をまとめました
JavaScriptで配列の要素を検索したい！ですが、ひとえに検索といえど方法がいっぱいあります。私が見つけた限り、全部で9つの配列を検索できるメソッドがありました。ということで、それらをまとめてみました！目次から目当てのメソッドを見つけて...
JavaScript date-fnsでUTCの文字列をJSTのDateに変換する（yyyy-MM-dd HH:mm）
日時がUTCになっている文字列をJavaScriptのDateオブジェクトに変換してみます。ライブラリにはdate-fnsを使用しました。parseでDateオブジェクトに変換するだけでは、TimezoneOffset分ずれてしまいます。注...
JavaScript [JavaScript]日付をyyyymmddhhmmの形でDate↔︎stringに変換するのが結構面倒でした
ちょっと訳あって、日付をyyymmddhhmm形式で扱うことになりました。"2022年2月5日 21:00"の場合、"202202052100"になる感じです。Dateの引数にそのまま突っ込んでもダメです。const date = new ...
HTML 【HTML】formからデータを取得（画面遷移なし）
formからJavaScriptでデータを取得するときに、画面遷移をさせない方法を紹介します。