かもメモ

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

TypeScript

TypeScript Promise.allSettled で成功したものだけフィルタリングしたい

typescript: "4.9.5" Promise.allSettled Promise.allSettled() Promise.allSettled() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、入力のすべてのプロミスが決定したとき…

React TypeScript 動的にタグを変えたい

Chakra-UI にあるような as props で動的にタグを変更できるコンポーネントを作りたかった React.createElement を使う方法 import { createElement, FC, ReactNode } from 'react'; type HeadingProps = { as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; c…

TypeScript レスポンシブ時のイベントには MediaQueryListAPI matchMedia が便利だった!

レスポンシブ時の View の変化は基本的に CSS のメディアクエリで行いたいが、 window サイズが大きくなったときにモバイル用のモーダルメニューを閉じるとか、意外とレスポンシブ時に JS でイベントを実行したい時がある window.resize を使った今までやり…

Node.js path.resolve は末尾の `/` が消える仕様になってる

表題の通り。 DB に入っている文字列から末尾に / のあるパスを作りたかったが、最終的に path.resolve を通すと末尾の / が削除される import path from 'path'; path.resolve('/', '/foo/bar/'); // -> /foo/bar The resulting path is normalized and tra…

PHP 配列からいい感じに CSS のクラス名を作りたい

3億年ぶりに古の WordPress 製のサイトを更新する必要があり、PHP のテンプレートで CSS のクラス名を動的に作成する必要があった JavaScript で言うところの classnames のような挙動をさせたい CSS のクラス class="foo bar mofu" のような形 スペース区切…

React TypeScript 改行が含まれれるテキストをいい感じに改行させたい

前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ import { ReactElement, createElement } from 'react'; const newlineRegex = /(\r\n|\r|\n)/g; export const nl2br = (text: string): (string | ReactElemen…

Node.js ファイル名から拡張子を取得したい

正引き表現や . で区切る方法を考えてたけど path を使えば簡単だった path.extname(path) で拡張子を取得できる path.extname で取得できる拡張子は . 始まりの文字列 拡張子が無い場合は空文字列が返される サーチクエリがある場合は拡張子含まれる import…

JavaScript JSON を見やすく出力する

pre とかにデータを JSON にして表示したい時に 1行だと見づらいのいい感じに改行して表示させたい JSON.stringify() のオプションでいい感じに表示できる json-formatter-js とかリッチなライブラリもあるけど、必要最小限なら JSON.stringify(data, null, …

TypeScript Object.entries の型をいい感じにしたい

環境 TypeScript v5 引数のオブジェクトを Record<string, unknown> とするパターン 返り値に as を使わないとタイプエラーになる 返り値 Entries を定義するパターン type Entries<T> = (keyof T extends infer U ? U extends keyof T ? [U, T[U]] : unknown : unknown)[]; expo</t></string,>…

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っぽい