windowにクリックイベントを登録して、クリックしたときにstateの状態によって処理を切り分けたいので、こう書いてみた。 import { useState, useEffect, useMemo } from "react"; export default function App() { const [id, setId] = useState(""); const…
指定した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を組み合わせて考えた。範囲選択したオブジェクトの位置を維持した…
GitHub Starの数で比べてみた 何となくnodenvを使っていましたが、最近Voltaを使っている人も多いので調べてみました。GitHubのStarの数で比較してみようかと思って調べていたらところ、こちらのサイトを発見したので使わせていただきました。www.nebula-gra…
State of JavaScript 2022 最近教えてもらって、次にどのライブラリの勉強をするか参考になりました。stateofjs.com最後まで頑張ってアンケートに協力すると、ナレッジスコアが表示されました。 スコアが40%しかなく知らないことが多かったので、後で調べる…
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を使っ…
AWS S3 をローカルでエミュレートしてくれる minio を使っているのですが、最近イメージを最新に更新したら急に起動できなくなりました。ログを見るとなにか出ているのですが意味がわかりません。 ERROR Unable to use the drive /data: Drive /data: found …
jestでユニットテストを書くとき、レビューで指摘をもらって忘れがちなtoBeとtoEqualについてのメモ。 toBeとtoEqualの使い分け toEqualを使えばとりあえずテストは通ってしまうが、期待している型に明確に一致する判定をしたほうが良い。 toBe https://jest…
huskyは、公式サイトによると、「コミットなどを改善します」ということなので、コミットのときに何かしてくれるツールということらしい。 Husky improves your commits and more typicode.github.io コミットやプッシュをするときに コードのlintの実行 コ…
SourceTreeを使っていてコミット時にhuskyが実行されるようになっているとき、command not found になってしまう場合の対応です。 コマンドラインツールのインストール SourceTreeのメニューバーに「コマンドラインツールをインストール」があるので、ここか…
Zennにまとめました。zenn.dev
macOSで日本語キーボードを使ってバックスラッシュを出すには Option+円記号 webpack.configを編集するときに、windowsで編集しているときと同じ感覚でいじっていたら You may need an appropriate loader ...というエラーになったので調べてみたところ、mac…
Zennにまとめました。 ただ、今は React Testing Library を使うほうが一般的かもしれません。zenn.dev
CSSでbox-shadowを指定するとき、いつも何番目のパラメータが何だったか思い出せなくなるのですが、chrome の開発者ツールを使えばUIで指定できました。 F12キーを押すなどしてChormeのDeveloperToolを表示（これはやらなくてもOK) 対象のオブジェクトを右ク…
axios を使って、ASP.NET Core に配列型のデータを送りたい場合のメモです。 foo[0].bar=1&foo[0].hoge=2&foo[1].bar=3&foo[1].hoge=4のようなデータを送ります。 qsライブラリで配列形式を変換 qsを使って配列形式を変換する方法を使いました。まず、元のデ…
CSSでモーダルダイアログを作ろうと思い、半透明にするときによく間違えたことです。 結論としては、rgbaを使用してダイアログ部分は透明にならないようにする、でした。 opacity 子要素も半透明になる rgba 子要素には影響しない Opacityで半透明にする opa…
EntityFramework を使ってデータベースからデータを取得するとき、Includeを使えば、子要素もいっしょにとって来られるはずなのに、どうしてもnullになってしまいました。 var query = _context.Customers .Include(c => c.Reservations) .Where(e => e.Cust…
axios 0.20.0 のバグ axiosを使って DELETE リクエストを送る時、パラメータを指定する場合は、dataをキーにしてオブジェクトを送信すれば良いということは調べて分かったのですが、どうしても HTTPステータス415エラーになってしまいました。 axios.delete(…
※ このエントリは2020年時点のものですQiitaにいくつかまとめておいた記事のリンクです。 Keywordやプロファイルの使い方についても後日まとめ予定です。 なお、この記事は Katalon Stduio ver5.x でテストケースを作成したときのものです。qiita.comqiita.c…
JavaScriptでgroupBy集計をしたいのですが、意外とシンプルな例が見つからなかったのでメモしておきたいと思います。 let data = [ { date: '2020-01-03', gender: '男' }, { date: '2020-01-01', gender: '男' }, { date: '2020-01-01', gender: '女' }, { …
