かもメモ

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

JavaScript

JavaScript 文章を縦書きにしたくなる時あるよね

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

AWS Amplify で node.js v18 系を使いたいにハマったログ

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

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…

JavaScript Fetch でステータスコードを使ってエラーハンドリングしたい

Next.js の api を使って非同期処理のモックを作っていて Fetch API だとステータスコードが 200 系以外でもエラーが発生しないみたいだったのでステータスコードでエラーハンドリングできるようにしたメモ 環境 node.js v18.14.0 Next.js 13.2.4 React 18.2…

React 👻 jotai を使うと localStorage を使った永続化が簡単だった件について

jotai の atomWithStorage を使うと直接 localStorage に state を保存できる!

React 👻 jotai 👻 Provider 完全に理解した!

前回までのあらすじ React の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global …

React 軽量状態管理ライブラリ👻 jotai 👻 さわってみた!

普段 React の状態管理には Recoil を愛用しています jotai という Recoil ライクな軽量ライブラリがあると聞いたので試してみました jotai @reduxjs/toolkit vs jotai vs react-redux vs recoil vs redux | npm trends この記事を書いた時点では Recoil 23…

Next.js ESLint で TypeScript のエラーを表示するようにしたい

1. Next.js はデフォルトでは TypeScript のエラーが `npm run lint` では表示されない 2. ミニマムな TypeScript のエラーを表示させるには `@typescript-eslint/eslint-plugin` をインストールして `.eslintrc.json` にルールを追加する 3. 使用するルール…

TypeScript Next.js ESLint NextPage<PageProst> で missing in props validation エラーになる

チーム開発してる Next.js のプロジェクトで ページのコンポーネントの型を PageComponent: NextPage<PagePropsType> = ({ property }) => {} と書くと 'property' is missing in props というエラーが表示されると報告があり調べてたメモ 環境 Next.js 13.2.1 eslint ^8.34</pagepropstype>…

TypeScript 定数を値に持つ配列で array.includes(value) しようとしたら Type error になる件

配列に含まれている値かチェックしたい時は 1. `array.some()` を使う 2. `array.includes()` を使う場合、定数の配列なら関数の引数を `any` にしておく とおぼえておけば良さそうです 個人的には `array.some()` で良いんじゃないかな〜という印象です

TwiPla から参加者のリストを CSV でダウンロードするやつ作った

Twitter アカウントでイベントとか合同の募集できる TwiPla で参加者が多いと連絡とか進捗管理など大変になるので参加者のリストをサクッとCSV でダウンロードできると便利だよな〜と思い昔スクリプトを描いていたのでこちらにもメモとして残しておきます Tw…

JavaScript 通常の input[type="text"] で妥当な日付を入力させたい

日付の入力は input[type="date"] がデバイスの選択 UI が表示され存在しない日付が選ばれることもなく使いやすいと思っているのですが、今回 PC のブラウザはカレンダーが表示されたりしなかったり、入力が同じ input の中で年月日別になってたりするのが使…

npm パッケージをアップデートしたい

npm outdated から手動で uninstall -> install するか npm-check-updates パッケージを使って一括でアップデートするのが楽そう

TypeScript 配列から Falsy な値をフィルタリングしたい…したかった…

JavaScript で配列から Falsy な値をフィルターする際に Array.filter(Boolean) をよく使っていたのですが TypeScript だと型がうまく推論されなかったので TypeScript で配列から Falsy な値を取り除く方法を調べてたメモ 結論 TypeScript には is はあるが…

Vite index.html を移動させて開発ディレクトリを作りたいときの Tips

Vite Vanilla JS で静的サイトを作るテンプレートを作成していて index.html を移動させると色々大変だったのでメモを残しておく 作ったもの デフォルトの Vite プロジェクト $ npm create vite@latest ✔ Project name: … <Project Name> ✔ Select a framework: › Vanilla </project>…

React マークダウンを HTML 変換するライブラリ試してみた

マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-pa…

React vanilla-extract 使ってみたのメモ

今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っ…

TIL: 冪等性、参照透過性、純粋関数 についてのメモ

勉強会で 読みやすいコードのガイドライン をやっていて冪等であるのがよい。と書かれていたのですが冪等についてふわふわした感覚だったので調べたメモ。 ⚠ しっかり調べた訳ではないので解釈が間違っている可能性があります :pray: 冪等性 idempotency, id…

React シンプルな tooltip コンポーネント作ってみた

React の勘を取り戻す素振りで tooltip コンポーネントを作ってみた。(車輪の再発明) hover で表示するシンプルな tooltip tooltip と表示する対象を同じ div で囲ってしまって親要素の hover で tooltip を表示させる // Tooltip.tsx import { FC, ReactNod…

Prettier JS はシングルクォーテーションで CSS はダブルクォーテーションにしたい

自動で JS, CSS の整形をしてくれる Prettier とても便利で愛用しています。 同じクオートの設定を JS の時は ' (Single Quote), CSS の時は " (Double Quote) とで分けたい時のメモ overrides, files を使って設定の場合分けができる .prettierrc.json { "s…

npm WARN config init.author.name Use `--init-author-name` instead.

Node.js のバージョンを上げて npm コマンドを使ったら次のような warning が表示された npm WARN config init.author.name Use `--init-author-name` instead. npm WARN config init.author.email Use `--init-author-email` instead. npm WARN config init…

Rollup require がバンドルされないにハマる

Rollup を使って JS をビルドしていたのですが CommonJS 形式の require が解決されずそのまま出力されてしまう問題にハマったのでメモ 環境 rollup v2.77.2 @rollup/plugin-node-resolve v13.3.0 @rollup/plugin-commonjs v22.0.1 rollup.config.js import …

Gulp + Rollup で webサイト用の JS をビルドしたい

10年くらい前に作った WEB サイトの改修案件が発生して、構成が古すぎて手に負えなくなっていたのでコレを気にビルド環境を見直しました。 元のものが Grunt で JS を結合したり SCSS をビルドしている構成だったので Grunt を Gulp に置き換え、SCSS のビル…

React vite 環境変数を使うメモ

vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが …

React.lazy でコンポーネントを Dynamic import してみる

環境 - react@18.1.0 - vite@2.9.9 - typescript@4.6.4 React.lazy Reacy.lazy を使うと import() で読み込んだコンポーネントを通常のコンポーネントとして扱うことができる 下記の方法でコンポーネントを Dynamic import できる // component export defau…

リストの中から特定の index の前後を n 件の範囲のデータを取得したい。

Pagination みたいにリストの中から常に n 件の値を取得する方法を考えてみた。(車輪の再発明) 要件 リストが n 件以上ある時は 常に n 件 表示する current を中心として前後に n / 2 件づつの範囲を取る 偶数件の範囲を取る場合は後ろの方を 1 件多くする …

Node.js Express のレスポンスで Unhandled Promise Rejection エラーが発生

✗ res.json({ …data }).sendStatus(200) ○ res.status(200).json({ …data })