かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript

TypeScript Object 型を判定したい

any 型で入ってきたデータのプロパティにアクセスしようとすると ESLint に怒られるので object 型だと判定したかった value.foo => Unsafe member access .foo on an `any` value. eslint@typescript-eslint/no-unsafe-member-access JavaScript の Object …

Jest テスト内で axios のインポートが出来ないエラーにハマる

Jest を使ったテストをしていて axios を使っているコンポーネントのテストで下記のようなエラーになった SyntaxError: Cannot use import statement outside a module > 1 | import axios from 'axios'; | ^ SyntaxError: Cannot use import statement outs…

JavaScript 月末の日付を取得したい

JavaScript で月末の日付を取得する方法のメモ new Date(YYYY, MM, 0) で先月の最終日が取得できる const date = new Date(2023, 1, 0); date.toLocaleDateString(); // => '2023/1/31' // 0日で月を 0 = 1月にすると前年の12月の最終日が取得できる const d…

Vite + React 開発環境 (localhost) を https で立ち上げたい

Vite + React で構築したアプリの開発環境も本番環境と同じように https (TLS) で動かしたかったやつのメモ 環境 Vite 4.3.9 React 18.2.0 TypeScript 5.1.3 結論 お手軽に https 化するなら vite-plugin-mkcert を使う https のドメインを特殊にしたいなら …

TypeScript Object.keys() が `string[]` になってしまう問題と戦う

Object.keys() は string[] 型になるので、Type Assertion で型を決めてしまうか、ラッパー関数を作成するか、Object.keys の型定義を書き換えるかいずれかで対応する

React i18next 国際化対応で言語切替が上手くいかない問題にハマる

React で i18next を使う際は useTranslation hook から `t` を読み込んで使う

React React-Query で同期的に mutation を実行したい

React の fetcher ライブラリに React Query をよく使っています。 特定の mutation を実行してエラーになったら別の mutation を実行させたい仕様があり同期的に mutation を実行 (try 〜 catch 内で mutation を実行) させる方法のメモ React-Query の mut…

jest でパスエイリアスを使いたい

Next.js 製のアプリに React Testing Library と jest でテストを書いていてパスエイリアスでエラーになったので備忘録として 環境 Next.js 13.4.12 React 18.2.0 TypeScript 5.1.6 jest 26.6.3 @testing-library/jest-dom 5.17.0 @testing-library/dom 7.29…

Chakra-ui × React-Location でリンクを作成する Tips

ドキュメントが `@tanstack/router@beta` にリダイレクトするようになっているので React Location は近いうちにリプレイスする必要がありそう

JavaScript Date オブジェクトで紀元前の日付を扱いたい

setFullYear を使うことで 紀元前を含めた日付を Date オブジェクトで扱えるようになる!

JavaScript 文章を縦書きにしたくなる時あるよね

突然漢詩を Twitter に投稿したくなったときに縦書きを自分で作るの大変だから変換できると漢詩投稿しやすいね。 と思って ChatGPT に聞きながら縦書きに変換するコード作ってみた

AWS Amplify で node.js v18 系を使いたいにハマったログ

AWS Linux:2 で Node.js v18 系を使いたい場合は `nvm use 18` コマンドを実行させるのが良さそう

React Query, GraphQL Request で Firebase の token を使った GraphQL リクエストをするメモ

firebase Auth の JWT (id token) を header に乗せて GraphQL のクエリを発行するメモ React-Query + GraphQL request で JWT token を使う方法 環境 graphql 16.6.0 graphql-request 6.0.0 @tanstack/react-query 4.29.3 import { useQuery } from 'react-…

React firebase でログインした user を Recoil の atom に保存するとエラーになる

表題のまま。Firebase Authentication を使ってログインした際に返される user を Recoil の atom に保存すると、signout や再度 signin が実行された際にエラーになる 環境 react 18.2.0 recoil 0.7.7 firebase 9.20.0 TypeError: Cannot assign to read o…

TypeScript jsonwebtoken で JWT を verify しようとしたら Right-hand side of 'instanceof' is not an object というエラーになった件

Next.js で jsonwebtoken を使って作成した JWT から中に含まれるデータを取り出そうとま verify しようとしたらエラーになってしまったので原因と解決策のメモ 環境 Next.js 13.2.1 React 18.2.0 TypeScript 4.9.5 jsonwebtoken 9.0.0 状況 // api import {…

React TypeScript: useRef の current に代入しようとしたら型エラーになった

React (TypeScript) で debounce な処理を作っていて timer を useRef で作った ref オブジェクトに格納しようとしたらエラーになった 環境 React 18.2.0 TypeScript 4.9.5 ref.current への代入で型エラー Cannot assign to 'current' because it is a read…

JavaScript Fetch でステータスコードを使ってエラーハンドリングしたい

Next.js の api を使って非同期処理のモックを作っていて Fetch API だとステータスコードが 200 系以外でもエラーが発生しないみたいだったのでステータスコードでエラーハンドリングできるようにしたメモ 環境 node.js v18.14.0 Next.js 13.2.4 React 18.2…

React 👻 jotai を使うと localStorage を使った永続化が簡単だった件について

jotai の atomWithStorage を使うと直接 localStorage に state を保存できる!

React 👻 jotai 👻 Provider 完全に理解した!

前回までのあらすじ React の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global …

React 軽量状態管理ライブラリ👻 jotai 👻 さわってみた!

普段 React の状態管理には Recoil を愛用しています jotai という Recoil ライクな軽量ライブラリがあると聞いたので試してみました jotai @reduxjs/toolkit vs jotai vs react-redux vs recoil vs redux | npm trends この記事を書いた時点では Recoil 23…

Next.js ESLint で TypeScript のエラーを表示するようにしたい

1. Next.js はデフォルトでは TypeScript のエラーが `npm run lint` では表示されない 2. ミニマムな TypeScript のエラーを表示させるには `@typescript-eslint/eslint-plugin` をインストールして `.eslintrc.json` にルールを追加する 3. 使用するルール…

TypeScript Next.js ESLint NextPage<PageProst> で missing in props validation エラーになる

チーム開発してる Next.js のプロジェクトで ページのコンポーネントの型を PageComponent: NextPage<PagePropsType> = ({ property }) => {} と書くと 'property' is missing in props というエラーが表示されると報告があり調べてたメモ 環境 Next.js 13.2.1 eslint ^8.34</pagepropstype>…

TypeScript 定数を値に持つ配列で array.includes(value) しようとしたら Type error になる件

配列に含まれている値かチェックしたい時は 1. `array.some()` を使う 2. `array.includes()` を使う場合、定数の配列なら関数の引数を `any` にしておく とおぼえておけば良さそうです 個人的には `array.some()` で良いんじゃないかな〜という印象です

TwiPla から参加者のリストを CSV でダウンロードするやつ作った

Twitter アカウントでイベントとか合同の募集できる TwiPla で参加者が多いと連絡とか進捗管理など大変になるので参加者のリストをサクッとCSV でダウンロードできると便利だよな〜と思い昔スクリプトを描いていたのでこちらにもメモとして残しておきます Tw…

JavaScript 通常の input[type="text"] で妥当な日付を入力させたい

日付の入力は input[type="date"] がデバイスの選択 UI が表示され存在しない日付が選ばれることもなく使いやすいと思っているのですが、今回 PC のブラウザはカレンダーが表示されたりしなかったり、入力が同じ input の中で年月日別になってたりするのが使…

npm パッケージをアップデートしたい

npm outdated から手動で uninstall -> install するか npm-check-updates パッケージを使って一括でアップデートするのが楽そう

TypeScript 配列から Falsy な値をフィルタリングしたい…したかった…

JavaScript で配列から Falsy な値をフィルターする際に Array.filter(Boolean) をよく使っていたのですが TypeScript だと型がうまく推論されなかったので TypeScript で配列から Falsy な値を取り除く方法を調べてたメモ 結論 TypeScript には is はあるが…

Vite index.html を移動させて開発ディレクトリを作りたいときの Tips

Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla </project>…

React マークダウンを HTML 変換するライブラリ試してみた

マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-pa…

React vanilla-extract 使ってみたのメモ

今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っ…