かもメモ

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

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

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

今更の React v18 : children の扱いが変わった (TypeScript)

React v18 では暗黙的に props に含まれていた `children` は、使用するなら明示的に props の型を定義する必要がある。`React.VFC` は `React.FC` と同じになったので非推奨になった。

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 ファイル名 (文字列) から拡張子を取得したい

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

Sass の変数で CSS のカスタムプロパティ(変数)を定義したい

Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ Sass の変数を #{} で囲ってあげればOK $textColor: #000; $backgroundColor: #FFF; // カスタムプロパティを定義 :root { --text-color: #{$textColor}; --background-color: #…

CSS 今更のダークモード入門

ダークモード…やってこなかったので今更の入門したのでメモ。 prefers-color-scheme を使う prefers-color-scheme をメディアクエリの中で使用することでデバイスのダークモード/ライトモードの設定を識別できます。 light ... ユーザーがシステムに、明色の…

Docker コンテナ内の MySQL にコンテナ外からアクセスできないにハマる ERROR 1045 (28000): Access denied

docker-compose で作成した MySQL にコンテナ外から mysql コマンドでアクセスしようとしたら Access denied になるにハマったのメモ。※ 本エントリーは経過と事象のメモで詳しく調べてはいません。 環境 Mac OS 11.6 Docker desktop 4.5.0 MySQL 8.0.28 (Ho…

GitHub コマンドラインでパスワード認証がエラーになった

ある組織のリポジトリで開発環境を作っていて submodule が設定されていたので初期化しようとしたら GitHub のパスワードを聞かれてエラーになったのでメモ $ git submodule update --init Submodule 'tools/common' (https://github.com/ORG_NAME/REPO) reg…

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

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

React TypeScript children の型のメモ

React の children の型は React.ReactNode が JSX.Element を内包しているので React.ReactNode を使えば良さそう

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 Material UI のインラインスタイルで型エラーにハマる

Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /></div>…

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

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

Docker Postgres DB コンテナが起動しないにハマる

Django の docker 環境をクイックスタートのドキュメントを参考に作っていたけど DB にしていされていた Postgres のコンテナが起動しなかった。 docker-compose.yml version: '3' services: # 略 db: image: postgres restart: always # 永続化 volumes: - …

brew pyenv から anyenv の pyenv に乗り換えたら python インストールでエラーになるようになった

brew pyenv を消して anyenv の pyenv で Python をインストールしようとしたら BUILD FAILED というエラーが出るようになってしまった… 環境 MacOS Big Sur (11.6.1) anyenv 1.1.2 pyenv 2.2.3-1-g423de9ae 結論 Xcode のバージョンが古かったので最新の v1…

Mac ファイルコピーする時にゴニョゴニョ変更したい

チーム作業してると開発が進むにつれて追加や変更が頻発する環境変数の扱いが悩ましいです。 .env.sample のようなキーだけ書かれたファイルを git 管理することが多いのですが、これをリネームする際にファイルに書かれている内容をゴニョゴニョしたい事が…

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

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

Git submodule が最新に更新されない件

$ git submodule update update やし最新に更新されるやろ…っておもったら最新にならなかった。diff をみたら最新でないコミットハッシュからチェックアウトされていました。 なんもわからん… 全 submodule を強制的にする $ git submodule foreach git pull…

Makefile で .env (環境変数)を読み込んで使いたい

make コマンドに .env にある環境変数を渡したい include .env で読み込める Makefile に include .env を書くだけで .env 内の環境変数が使える .env SECRET_KEY=HoshimiyaIchigo Makefile include .env test: echo ${SECRET_KEY} $ make test echo Hoshim…

JavaScript day.js, date-fns で実在する日付かどうか判定したい

Moment.js くんが卒業してからフロントエンドでの日付操作には day.js か date-fns を使っていました。 今回年・月・日が別々の select ボックスで日付を選択する UI があり 2月31日のような存在しない日付が選べてしまうので、存在しない日付を判定しようと…

React TypeScript で作ったアプリがビルドできないにハマる

npx create-react-app --template typescript で作成した TypeScript の React アプリでビルド時に初めて出会うエラーになってしまったのでメモ "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.1.2", build 時に Could not find a required…

MacOS Big Sur Skitch 画面キャプチャしたいのに壁紙だけがキャプチャされる

画面のキャプチャに矢印や文字を直接書き込める Skitch というアプリをよく使っています。 Skitch - 撮る。描き込む。共有するSkitch仕事効率化無料 ブラウザやコードをキャプチャしようとしたらなぜか背景画像だけがキャプチャされてしまう様になってしまい…

Sass mixin の中で呼び出される @content に引数を渡したい

Tailwind の md:flex みたいなレスポンシブのクラスみないな prefix のあるクラスと楽に作れる mixin を作りたかった 環境 sass: 1.42.1 (Dart Sass) レスポンシブ用の prefix を付けたクラスを生成する _breakpoints.scss $breakpoints: ( xzs: 0, xs: 23.3…

Day.js 日付が期間内かどうか判定したい

day.js の isBetween プラグインを使う IsBetween IsBetween adds .isBetween() API to returns a boolean indicating if a date is between two other dates. cf. IsBetween · Day.js npm i datjs で既にインストールされているので、別途プラグインを impo…

TypeScript 配列の値がキーになる型を作りたい

環境: "typescript": "^4.4.4" {[key in Union]: value type} で定義できる // この配列の値がキーになるオブジェクトの型を作りたい const luminas = ['OzoraAkari', 'HikamiSumire', 'ShinjoHinaki'] as const; type LuminasValues = typeof luminas[numbe…