かもメモ

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

TypeScript

OpenStreetMap + React Leaflet で地図を表示したメモ

最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leafl…

Next.js SSG したサイトを別ドメインから参照させててハマった

あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイ…

TypeScript React クリップボードにコピーする hooks とコンポーネント作ってみた

navigator.clipboard.writeText を使ってクリップボードに任意のテキストをコピーさせることができる

ES2023 JavaScript 配列から特定の要素を削除するのに toSpliced が便利

フロントエンドでやることはだいたい配列の操作だと感じてます。 その中でも元の配列を非破壊に特定のインデックスの要素を配列から削除するのが意外と面倒でした 今まで方法 1. filter で削除する要素を取り除く const result = array.filter((item) => ite…

Vercel Next.js 環境ごとに title, favicon を変えたい

Vercel にホストした Next.js のアプリがあり、local環境、preview (ステージング)、本番環境 があり開発中の確認で今どれを見ているのかドメインを見なくても解るように title と favicon を変更して判別しやすいようにした 環境を判定する Vercel の previ…

Next.js 構造化されたパンくずリストを作りたい

昨年メディアのような SEO が大切になる Next.js の案件があり、ページの構造を表すパンくずリスト (BreadcrumbList) も重要なのでちゃんと構造化されたものを作ってみたのでそのメモ。 構成 Next.js v13 (Pages Router) React v18 TypeScript v5.2 パンくず…

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 プラグ…

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

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

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

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

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

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

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…

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

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

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…

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 は近いうちにリプレイスする必要がありそう

Hasura を GraphQL サーバーに使って code generator で TypeScript の型生成をするまでのメモ

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

React jotai で localStorage を使って state を永続化するコンポーネント作ってみたのメモ

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

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…