React
指定したidに該当するデータを取得するとき、TanStack QueryのuseQueryを書くとしたら、 const fetchData = (id: number) => { ... } const {data} = useQuery({ queryFn: () => fetchData(id) });のようになるはず。 idがundefinedだったら？ idが number|u…
テーブル形式のデータをReactで表示するときに、ソートや列の幅調整などもできるreact-base-tableライブラリを使うことにしました。autodesk.github.ioサンプルを見ながら実装していたところ、セルに表示する文字列が長く3行以上になると何故かテーブルがチ…
備忘録。react-windowのVariableSizeListで、行の高さが固定ではなく文字数により高さが変化するリストを表示したい。いろいろ調べた中で一番負荷が低そうでやっていることがわかりやすかったブログ。code sandbox にサンプルを上げてくれているので、コード…
Reactのアプリを作るときにきれいなアイコンを使いたい時は、いつもFontAwesomeを設定して使っていましたが、もっと簡単にいろいろなアイコンを使うことができるライブラリがありました。 react-icons www.npmjs.comこちらのページから対応しているアイコン…
事前に定義されているオブジェクトから値の部分をUnion型として、関数のパラメータの型に使いたい。 const ItemName = { First: "No1", Second: "No2", Third: "No3" } as const; type ItemNameType = keyof typeof ItemName; // "First" | "Second" | "Thir…
なんとなく使ってしまっているwebpackeについて、よく使うところの覚書。 webPackとは webpackでできること モジュール方式とは モジュール CommonJS Modules (CJS) ECMAScript Modules (ESM) webpackのインストール コマンドのカスタマイズ 初期状態のpacka…
あるdiv要素の中身が動的に変更されるとき、そのdiv要素のscrollHeightの値を取得したい。 ResizeObserverを使う場合 divのサイズ変更のタイミングで通知してほしい場合はResizeObserverで良さそう。 import React, { useEffect, useState, useRef } from "r…
いつも忘れるReactのメモ化関連のメモ。 定数値はコンポーネントの外に出す コンポーネント内のオブジェクトは毎回インスタンス生成されてしまうので、コンポーネントの外に出す。 // 普通に書いたとき const ButtonElement = () => { const foo = ['a', 'b'…
定数オブジェクトのValueの値のユニオンタイプを作って関数の引数の型指定として使いたいときのメモ。Foo型のキーのユニオンタイプを作ってから、値のユニオンタイプ作れば良い。 const Foo = { FIRST: 1, SECOND: 2, THIRD: 3 } as const; type FooKeysType…
Reactでオブジェクトをマウスのドラッグで複数選択し、ドラッグ＆ドロップするコードのメモ。react-dndだけではマウスドラッグの範囲選択ができなかったので、react-selectoとreact-moveableを組み合わせて考えた。範囲選択したオブジェクトの位置を維持した…
React Query React Query を使い始めるにあたり、とりあえず知っておきたいことのメモ。 React Queryとは tanstack.com データのフェッチ、キャッシュ、同期、更新を簡単に行うことができるライブラリ。 現在はTanStack Queryという名前に変わっている。 Rea…
Reactでこのようなカスタムフックを作成し、callFoo() を実行したら foo() が実行されていることを確認したい。 export const useMyCustom = { const callFoo = ():void => { foo(); } const foo = ():void => { // ... } return { callFoo } } spyOnを使っ…
Zennにまとめました。zenn.dev
macOSで日本語キーボードを使ってバックスラッシュを出すには Option+円記号 webpack.configを編集するときに、windowsで編集しているときと同じ感覚でいじっていたら You may need an appropriate loader ...というエラーになったので調べてみたところ、mac…
Zennにまとめました。 ただ、今は React Testing Library を使うほうが一般的かもしれません。zenn.dev
axios を使って、ASP.NET Core に配列型のデータを送りたい場合のメモです。 foo[0].bar=1&foo[0].hoge=2&foo[1].bar=3&foo[1].hoge=4のようなデータを送ります。 qsライブラリで配列形式を変換 qsを使って配列形式を変換する方法を使いました。まず、元のデ…
axios 0.20.0 のバグ axiosを使って DELETE リクエストを送る時、パラメータを指定する場合は、dataをキーにしてオブジェクトを送信すれば良いということは調べて分かったのですが、どうしても HTTPステータス415エラーになってしまいました。 axios.delete(…
いつも75%OFFぐらいにはなっていると思われるUdemyでReactのコースを受講しました。www.udemy.com 良かったところ コース名どおり基本的な内容からReduxを利用した大規模なアプリにも通用する開発方法を学ぶことができました。このコースで良かったのは、ア…
