指定した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行以上になると何故かテーブルがチ…

paizapaiza.jp のスキルチェックでコーディングをするのが勉強になるのでたまにやっています。スキルチェックには問題ランクSからDまであります。Dランクから順番にチャレンジして行って、Aランクの問題までは完全回答できたのですが、Sランクの問題になると…

備忘録。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を組み合わせて考えた。範囲選択したオブジェクトの位置を維持した…