2021-07

jest で ResizeObserver、Element.getBoundingClientRect をモックにするには

前回作成したコンポーネントのテストコードを書いてみた所、ResizeObserver と Element.getBoundingClientRect をモックにする必要がありました。どの様にしたかを記述します。モック化したテストコードまず、...

React で長い文字列を省略表記にして、ツールチップに全て表示するには

どんなことをしたいかというと、文字列が長くて表示しきれないときは省略表記するマウスホバーで文字列全体をツールチップ表示するというコンポーネントを作成してみます。動作は Chrome バージョン 92.0.4515.107 で確認しています。...

インターバルトレーニングするなら「Seconds Pro」アプリが便利

20秒全力、10秒休憩、を８回繰り返すタバタ式トレーニングをジムでするときに、計測が割と厄介だったので良いアプリが無いか探していました。要望は、インターバルの計測と通知ができるもの通知は控えめか無音にできるものできれば Apple Watc...

Redux Toolkit の RTK Query で REST API を使う

前回は createAsyncThunk を使いましたが、チュートリアルを読み進んでみると、元々データフェッチの機能が用意されていましたので、今回はそちらの方法で REST API を使ってみました。create-react-app でテン...

React + Redux Toolkit で REST API を使う

React Redux で面倒に感じる部分が、かなり良い感じに改善しているらしい Redux Toolkit 。非同期の部分も加わっている様なので、REST API を試してみました。基本はテンプレートを使用Redux Toolkit のイ...