かもメモ

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

JavaScript

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

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

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

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

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 なプロジェクトがサクッと作れてすごく凄い!!

JavaScript ファイル名 (文字列) から拡張子を取得したい

拡張子を含むファイル名の文字列から、拡張子とか拡張子を除いたファイル名を取得する方法のメモ 拡張子の始まりの位置を特定すれば拡張子とファイル名に分解できる 拡張子とは何かを考える 拡張子は . から始まる 文字列の一番最後に出現する . 以降が拡張…

TypeScript JEST 引数を取る関数のエラーになる場合のテストにハマったメモ

JEST で引数を取る関数のエラーの発生をテストする場合は expect 内で関数が実行されるように、テストする関数を無記名関数などでラップする必要がある

React TypeScript いつも使う設定のボイラーテンプレート作った

毎回 ESLint と Prettier の設定書いて、パスエイリアスの設定して、なんやかんや設定して…とメンドーなので create-react-app --template typescript ベースでゆるゆるな自分用ボイラーテンプレート作りました。 ボイラーテンプレート やったこと ESLint は…

JavaScript よくあるランダムな文字列を生成するやつのメモ

ハンズオンとかチュートリアルでよく出てくる欄ラムな文字列を作る処理をちゃんとみてみようと思った export const getRandomString = (n: number): string => { const S = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; return Array…

TypeScript interface のプロパティを引数に取る関数を定義したい

例えば次ようなサインアップフォームのフィールドの値を引数に取るバリデーションを行う関数あるとして、この関数の型を別途定義したい interface SignUp { username: string; email: string; password: string; } const validation = ({ username, email, p…

React Material UI テキストフィールドを readonly にしたい

Material UI の <TextField /> コンポーネントは出力時にいい感じに div で囲ってくれるからか、直接 readonly 属性を渡しても設定されなかった。 @mui/material@5.2.7 NG: <TextField /> に readonly 属性を渡しても readonly な状態にはならない disabled は効くけど readonly は効か</textfield></textfield>…

React + TypeScript import 順をキレイにしたい

eslint-plugin-unused-imports と eslint-plugin-import プラグインを使うといい感じにできる

ts-node で path alias が効かないにハマる

結論 tsconfig-paths を使って ts-node, ts-node-dev に -r tsconfig-paths/register オプションを渡してあげれば OK