かもメモ

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

TypeScript

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

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 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 プラグインを使うといい感じにできる

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

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

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…

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…

TypeScript Event.target, Event.currentTarget の型がむずい!

TypeScript で addEventListener のコールバック関数で Event.target, Event.currentTarget を使おうとしたら結構めんどかったのでメモ Event.target と Event.currentTarget の違い これはそもそも JavaScript の違いですが、Event.target はイベントが発生…

TypeScript Union 型に含まれる値かどうか判定したい

例えばフォーム送信で取り扱う name 属性は決まっているから name 属性が Union型が用意されていて、何かしらのイベントから event.target.name のような引数を渡された時に、フォームで取り扱う name 属性かどうかの型判定をしたいような場合。 type FieldN…

TypeScript CDN の jQuery を使いたい

テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました!!!! CDN から読み込まれている j…

Webpack Babel で TypeScript を ES5 にトランスパイルしたい

JS と CSS を HTML テンプレートで読み込んでという化石な環境で開発をしています。 前回は SCSS だけ webpack でビルドする環境を作りました。 今回は Vanilla JS でブラウザ対応を考えながら書くのは流石に DX が最悪なので最低限のトランスパイルできる環…

TypeScript React JSX.Element にハマる

TypeScript React の FC, VFC という型は過渡期で将来的に変更になる可能性があるからコンポーネントの返す型は JSX.Element にした方が良いという記事を読んで新しいプロジェクトでは JSX.Element を使うようにしたのですが、そこでハマったことのメモ null…

TypeScript React forwardRef の型をがんばる

react-hook-form というライブラリを使ってフォームを作っていたのですが、input や textarea が Atom レベルのコンポーネントになっており、ライブラリの都合で ref を渡す必要があったので forwardRef の型を頑張ったメモ。 "react": "17.0.2" "typescript…

TypeScrip 配列から値の Union 型を作りたい

const soleil = ['星宮いちご', '霧矢あおい', '紫吹蘭'] みたいな配列から '星宮いちご' | '霧矢あおい' | '紫吹蘭' という配列の値の Union 型が作りたい。 typeof list[number] で配列の値の Union 型が作れる! const soleil = ['星宮いちご', '霧矢あお…

Next.js SVG ファイルを React component として import したい!

create-react-app した React アプリでは何もしなくても SVG ファイルを import { ReactComponent as MySVGImage } from './svg/my-image.svg'; で読み込みコンポーネントとして扱うことができました。 Next.js でも同じことができると思ったのですが、creat…

React カスタム hook で返すデフォルト引数のある関数の型をいい感じに書きたい。

React hooks では custom hooks を多用するのですが、custom hook で返す関数がデフォルト引数を取る時の型をいい感じに書きたかったのメモ。 デフォルト引数を取る関数を返す Custom Hook こんな Hooks の型をいい感じに書きたい export const useCount = (…

Next で MSW (Mock Service Worker) を使うのメモ

バックエンドの API がまだできてないプロジェクトで Next のフロントを作成することになり開発中の API との通信に噂の MSW を使ってみることにしました。 Next.js 特有の問題でちょいハマりしたので導入完了したところまでのメモ。 MSW (Mock Service Work…

Svelte TypeScript ファイルを .svelte テンプレートでインポートしたらエラーになった

Svelte 公式の TypeScript 化したプロジェクトで、.svelte テンプレート内で自作の TypeScript ファイルをインポートしたらコンパイルエラーになってしまいました。 Svelte の TypeScript 化 公式のテンプレート README に書かれているスクリプトを実行した…

Svelte 子コンポーネントのスタイルを親コンポーネントで指定したい

LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定…

TypeScript FormData.entries() で取得したフォームデータの型を interface から作成したい

TypeScript な React のフォームを作成していて new FormData() で取得したフォーム内容のデータの型を送信する形式の interface から作成したかったのメモ type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; で Object.entries() したときの型が…