npm script で実行するアクションにオプションをコマンドラインから渡す方法が npm と yarn で微妙に違って戸惑ったのでメモ npm script { "scripts": { "test": "jest" } } jest を実行する test コマンドがあり、GitHub actions では coverage を表示させ…

Volta, asdf, nodenv などメンバーの node.js のバージョン管理ツールが異なる状況 + GitHub actions で実行される node.js のバージョンもいい感じに揃えたい 1. node のバージョンが指定と異なる時に npm install を制限する engine-strict=true を使って …

参加したプロジェクトが yarn の lock ファイルだったので久々に yarn install をしようとしたら GitHub package になっている独自ライブラリのインストールがエラーになってしまう問題にハマってしまったのメモ 状況 node.js npm のバージョン管理は Volta…

prompt: 'select_account' オプションを provider に追加すれば強制的にアカウント選択画面が出るようになる

README にこんな感じでバッジを貼りたい！ Goal README に build 成功のバッジを表示する GitHub だけで完結 GitHub Actions の workflow が成功したかどうかのステータスをバッジ表示できる https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg 上記のフォ</workflow_file></repository></owner>…

Zenn にメモしたのをまとめたものです 環境 vite 4.4.9 typescript 5.1.6 jest 29.6.4 ts-jest 29.1.1 @types/jest 29.5.4 Jest の導入 $ npm i -D jest ts-jest @types/jest # Jestの設定ファイル作成 $ npx ts-jest config:init # jest.config.js が生成さ…

`--rebase-merges` (`-r`) オプションを使う

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

Jest × React Testing Library の勉強をしています。 今回は state が更新されるかをテストしていて、テスト内の useEvent.click 直後の expect が state が更新される前の値となってしまいテストが落ちてしまったメモです 環境 jest 26.6.3 @testing-librar…

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

i18next-browser-languagedetector 使うと自動的に localStorage にユーザ言語を保存してくれるので超便利！

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

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

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

fetch を使ったコンポーネントを jest でテストするには `cross-fetch` などの polyfill を使えばOKっぽい

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

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…

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

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

Google Spreadsheet の QUERY と ARRAYFORMULA を使って物件の比較検討シートを作る

今参加しているプロジェクトでは React (TypeScript) をフロントエンドに Hasura を GraphQL サーバーにした構成になっています。 Hasura を GraphQL サーバーにして code generator で TypeScript の型生成を行ったメモをまとめたエントリーです 経緯のメモ…

text-overflow: ellipsis になって欲しい要素の 親要素の flex-item に overflew: hidden をつければ良い

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

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

平均値を出す時とか。入力のあるセル数をカウントできると値を入力するだけになるので便利です。 COUNTIF(範囲, "<>") を使えばOK COUNTIF関数の構文は下記の通り COUNTIF(範囲, 条件) 条件部分に空白以外を表す等しくないを表す比較演算子 <> を指定すればO…

React で jotai を使って local storage に JTW を保存して永続化・リロード時に状態を復帰するのをやってみためも。 (※ サンプルなので local storage に JWT を保存するのはセキュリティ的によろしくないってのは今回考慮していません ) シナリオ ログイン…

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-…

表題のまま。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…

Mac でブラウザの検索フォームやエディターにフォーカスする度に勝手に日本語入力に切り替わってしまう問題が発生したのを解決したメモ 環境 MacOS 12.6 Apple M2 2022 Google 日本語入力 症状 半角英数で入力をしている状態 ブラウザやエディターなど別のア…