かもメモ

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

JavaScript

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 })

TypeScript default import にハマる

default import と `* as` を使った namespace import な default import とで CommonJS のモジュールのインポートのされ方が異なる。

Vite + React のプロジェクトでは require が使えない? Uncaught ReferenceError: require is not defined

Vite の DEV モードはネイティブESMを利用しているので CommonJS の require は使えない。代わりに import や Dynamic import を使えばOK

今更の React 18 ReactDOM の render の使い方が変わった

React v18 では `ReactDOM.render` ではなく `createRoot` を使って root オブジェクトを作成する ``` import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('app')!); root.render(); ```

React の再レンダリングについてのメモ

props を受け取る子コンポーネントは React.memo した上で props で渡される関数やオブジェクトが useCallback, useMemo でメモ化されてないと親コンポーネントの再描画時に再描画される。 依存関係がないコンポーネントはラッパーコンポーネントを作り chil…

Vite + React (TypeScript) のプロジェクトに ESLint と Prettier を導入する。

前回までのあらすじ。Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。結論から言えば VIte だからという事は特になく、`create-react-app` で作成したプロジ…

Vite + React で path alias を使いたい!

`vite-tsconfig-paths` プラグインを使うのが簡単でオススメ! `tsconfig.json` にパスエイリアスの設定を書いて、`vite.config.ts` にはプラグインを読み込ませるだけにできるのでパスエイリアスの設定が一元化できます。

今更の Vite で React + TypeScript のプロジェクト作ってみた

`npm create vite@latest ` コマンドを実行すれば CLI で React + TypeScript なプロジェクトがサクッと作れてすごく凄い!!