JavaScript
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leafl…
あるプロジェクトで Page routing の Next.js を SSG で作成したサイトを Vercel でホスティングしたものを CloudFront と Lambda@Edge を使って別ドメインの URL からサイトを表示させるようにしていた。 図で書くとこんな感じ CloudFront を使った別ドメイ…
navigator.clipboard.writeText を使ってクリップボードに任意のテキストをコピーさせることができる
フロントエンドでやることはだいたい配列の操作だと感じてます。 その中でも元の配列を非破壊に特定のインデックスの要素を配列から削除するのが意外と面倒でした 今まで方法 1. filter で削除する要素を取り除く const result = array.filter((item) => ite…
昨年メディアのような SEO が大切になる Next.js の案件があり、ページの構造を表すパンくずリスト (BreadcrumbList) も重要なのでちゃんと構造化されたものを作ってみたのでそのメモ。 構成 Next.js v13 (Pages Router) React v18 TypeScript v5.2 パンくず…
SSG 時にパスをドメインから始まるものに変更したいという要件があって、path.join でドメインとパスを合体させてハマってしまったのでメモ 環境 Node.js v18.18 path.join に URL を渡すとhttps:// が https:/ になってしまう http://, https:// から始まる…
配列からランダムに n 個の要素を取り出したい要件を実装したのでメモ 要件 配列からランダムに n 個の要素を取り出す 取り出す要素に被りがないこと 方針 配列をシャッフルする .slide(0, n) で要素を取り出す Math.random() * array.index のような形で配…
Next.js を使ったサイトを開発していて、外部の API を叩いたり CDN のリンクを使ったりするので本番環境と同じ https (TLS)で開発できたほうが環境差によるバグを早めに発見できるので開発環境も https にしたかった 公式のドキュメントに server.js を使っ…
API から取得したデータが string | undefined のリストだったので filter で typeof === 'string' のものだけにしたのだけフィルター後の配列の型がうまく行かなかったのでメモ 問題: 型情報がフィルタリングされない const data = ['星宮いちご', '霧矢あ…
Next.js link タグで stylesheet を追加するときは next/head ではなく next/document の を使う
React で checkbox の状態を別のところにある label で制御していて warning が出ていた const Component = () => { const [isActive, setIsActive] = useState<boolean>(true); const handleOnActive = () => setIsActive(true); const handleDeActive = () => setIs</boolean>…
any 型で入ってきたデータのプロパティにアクセスしようとすると ESLint に怒られるので object 型だと判定したかった value.foo => Unsafe member access .foo on an `any` value. eslint@typescript-eslint/no-unsafe-member-access JavaScript の Object …
Jest を使ったテストをしていて axios を使っているコンポーネントのテストで下記のようなエラーになった SyntaxError: Cannot use import statement outside a module > 1 | import axios from 'axios'; | ^ SyntaxError: Cannot use import statement outs…
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` を読み込んで使う
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 オブジェクトで扱えるようになる!
突然漢詩を Twitter に投稿したくなったときに縦書きを自分で作るの大変だから変換できると漢詩投稿しやすいね。 と思って ChatGPT に聞きながら縦書きに変換するコード作ってみた
AWS Linux:2 で Node.js v18 系を使いたい場合は `nvm use 18` コマンドを実行させるのが良さそう
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…
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) で debounce な処理を作っていて timer を useRef で作った ref オブジェクトに格納しようとしたらエラーになった 環境 React 18.2.0 TypeScript 4.9.5 ref.current への代入で型エラー Cannot assign to 'current' because it is a read…
Next.js の api を使って非同期処理のモックを作っていて Fetch API だとステータスコードが 200 系以外でもエラーが発生しないみたいだったのでステータスコードでエラーハンドリングできるようにしたメモ 環境 node.js v18.14.0 Next.js 13.2.4 React 18.2…
jotai の atomWithStorage を使うと直接 localStorage に state を保存できる!
前回までのあらすじ React の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global …