かもメモ

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

2023-01-01から1年間の記事一覧

Google Spreadsheet VLOOKUP と ARRAYFORMULA でシートから検索した行の値を自動的に取得しする

やりかを良く忘れるのでメモ 特定のセルの値と合致 / 含む、行を探してその中からあるセルの値を取得する(VLOOKUP) 上記の処理を列全体で実行する (ARRAYFORMULA) 他のシートから検索した値と合致した行の値を取得する (VLOOKUP) =VLOOKUP(検索キー, 範囲, …

Node.js URL を作りたくて path.join を使うと https:// が https:/ に変換されてしまう

SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…

Vite React (TypeScript) vite-plugin-svgr で SVG をコンポーネントとして扱う

vite-plugin-svgr プラグインがアップデートされ設定などが変わっていたので改めてメモ 環境 vite-plugin-svgr 4.2.0 Vite 4.4.9 TypeScript 5.1.6 vite-plugin-svgr v3 → v4 結論は最下部にあります。お急ぎの方は途中スキップしてください! Before プラグ…

Git squash merge された PR に依存する PR を Fast Forward に rebase する Tips

ある PR A の変更に依存した PR B を作った時、main ブランチに squash マージする戦略のリポジトリだとマージされた PR A のコミットは 1 つになっており、RR B のマージ先が main に向いた時、コミットの履歴が異なるので PR A のコミットがそのまま表示さ…

JavaScript 配列からランダムに要素を取り出したい

配列からランダムに n 個の要素を取り出したい要件を実装したのでメモ 要件 配列からランダムに n 個の要素を取り出す 取り出す要素に被りがないこと 方針 配列をシャッフルする .slide(0, n) で要素を取り出す Math.random() * array.index のような形で配…

Vercel プレビュー環境かどうか判別したい!

Vercel にデプロイした Next.js のアプリで 本番環境 (production) と 開発環境 (development) / プレビュー (preview) とで アナリティクスなどを出し分けけしたく NODE_ENV で判別していたのですが、プレビュー時に本番環境と同じになってしまう問題にハマ…

Next.js dev サーバーでも https したい

Next.js を使ったサイトを開発していて、外部の API を叩いたり CDN のリンクを使ったりするので本番環境と同じ https (TLS)で開発できたほうが環境差によるバグを早めに発見できるので開発環境も https にしたかった 公式のドキュメントに server.js を使っ…

TypeScript Array.filter の型もいい感じにフィルタリングしたい

API から取得したデータが string | undefined のリストだったので filter で typeof === 'string' のものだけにしたのだけフィルター後の配列の型がうまく行かなかったのでメモ 問題: 型情報がフィルタリングされない const data = ['星宮いちご', '霧矢あ…

Next.js link タグで stylesheet を追加するときは next/document を使う

Next.js link タグで stylesheet を追加するときは next/head ではなく next/document の を使う

React checkbox の checked と defaultChecked

React で checkbox の状態を別のところにある label で制御していて warning が出ていた const Component = () => { const [isActive, setIsActive] = useState<boolean>(true); const handleOnActive = () => setIsActive(true); const handleDeActive = () => setIs</boolean>…

Mac M2 VSCode アウトデント (⌘ + [) が効かない問題

VSCode で開発を子なっている際にアウトデント⌘ + [ が効かない・キーボードショートカット設定で ⌘ + [ を押しても [ が無視されて ⌘ だけ入力されて設定できない現象に長らく悩んでいました。今回この現象が解決したので忘れないようにメモ 環境 Mac M2 20…

Mac HHKB 唐突に shift が押されたままになる問題

HHKB で Shift Lock がかかった場合は左右のShiftを同時に押すと解除できる

CSS スマートフォンでタップされたエリアがハイライトされるのを消したい

スマートフォンでリンクやボタンをタップした際に clickable なエリアがハイライトされます (iOS Safari だとグレー / Android for Chrome だと青) これ 通常のリンクやボタンはそのままで良いのですが、モーダルのエリア外をタップした際にモーダルを閉じさ…

npm / yarn npm script でオプションを渡す方法の違いのメモ

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

続・フロントエンド開発環境: チーム開発するリポジトリで node のバージョンを揃えたい

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

yarn v4 独自の GitHub package が 404 になってしまう問題にハマる

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

Firebase Authentication GoogleAuthProvider ログアウトしても別の Google アカウントを選択できないにハマる

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

GitHub ビルド成功のバッジを README に表示させたい

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

Vite + TypeScript のプロジェクトに Jest x GitHub actions PR 時に coverage レポートを出力させたい

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 が生成さ…

Git merge commit を残して rebase したい

git

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

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 × React Testing Library テスト内のイベントが state の更新を待ってくれないにハマる

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

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

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

React 国際化対応 i18next-browser-languagedetector 使うと言語の永続化がめちゃめちゃ簡単だった!

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

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` を読み込んで使う

Jest × React Testing Library × msw で fetch を使ってるコンポーネントのテストでエラーになった

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

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

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