かもメモ

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

TypeScript

GraphQL 複数の型が含まれる配列の Schema を定義したい

GraphQL で A 又は B が含まれる配列を返す schema を作成したかったのでメモ A型 または Bの型を返す Union Type を作成する Union Type が含まれる配列の型を作成する 1. A型 または Bの型を返す Union Type を作成する union キーワードで定義する Union …

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 件多くする …

React Tailwind CSS v3 クラス名を動的に作ったらクラスが適応されない?にハマる

v3.0から搭載された Just-in-Time engine はコード中を検索してマッチしたスタイルだけを出力する賢い仕組みだけど、クラス名の途中に変数が含まれた状態だとマッチせずスタイルが出力されない

Vite React + MSW モックサーバーへのリクエストが `net::ERR_FAILED` になる件

Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "PO…

今更の TypeScript enum 型になっているプロパティの値ってどう指定するの?

Enum はエミューじゃない。エミューは Emu だった!

React (TypeScript) 画像をプレビューするコンポーネント作ってみた

Twitter みたいに画像を投稿できるフォームでは input[type="file"] を使いますがデフォルトでは選択した画像のファイル名が表示されるだけなので、何の画像を選択したかプレビューができたほうが便利です。 割とフォーム作成の際に必要になるので思いつきで…

TypeScript 特定のキーを持つオブジェクトの型

オブジェクトの特定のプロパティの値をアップデートをする関数を作成していました interface Todo { name: string; description: string; } const todo: Todo = { name: "", description: "" }; const update = (arg: {name?: string; description?: string}…

AWS Amplify GraphQL API で TypeScript の型が生成されないにハマる

TypeScript 用にするには `amplify configure codegen` で設定ファイルを先に生成しておく必要があった

Vite React (TypeScript) で SVG を ReactComponent として扱いたい

1. vite-plugin-svgr プラグインを使う 2. .svg の型定義ファイルを作成する

Express (TypeScript) で立てた GraphQLサーバーでセッションを使うメモ

Express (TypeScript) で作った local 開発用に立てた実験用サーバーに express-session モジュールを使ってセッションを使えるようにしたのメモ 環境 express@4.18.1 graphql@16.5.0 express-graphql@0.12.0 express-session@1.17.3 typescript@4.7.2 expre…

Express GraphQL サーバーから返すエラーに独自フィールドを追加したい

Express (TypeScript) で作成した GraphQL サーバーがエラーを返す際に message 以外の独自フィールドを追加してみたメモ express@4.18.1 graphql@15.8.0 express-graphql@0.12.0 typescript@4.7.2 Express GraphQL サーバー Mutation で username を引数に…

初めての GraphQL。Code Generator で型を生成するまでのメモ

GraphQL Code Generator で型を生成できるまでのメモ。千里の道も一歩から!

TypeScript default import にハマる

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

AWS CDK で作った Lambda に .env ファイルで環境変数を設定したい

`environment` オブジェクトでLambdaの環境変数が設定できる。dotenv を使えば .env ファイルから環境変数を埋め込むことができた

AWS CDK で TypeScript な Lambda をデプロイしたい

初めての AWS CDK です。AWS 関連は経験がまだ全然なくやったことのログ的なエントリーとなります。 AWS CDK って何? AWS Cloud Development Kit (AWS CDK) は、使い慣れたプログラミング言語を使用してクラウドアプリケーションリソースを定義するためのオ…

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…

今更の 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>…