TypeScript
GraphQL で A 又は B が含まれる配列を返す schema を作成したかったのでメモ A型 または Bの型を返す Union Type を作成する Union Type が含まれる配列の型を作成する 1. A型 または Bの型を返す Union Type を作成する union キーワードで定義する Union …
vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが …
環境 - react@18.1.0 - vite@2.9.9 - typescript@4.6.4 React.lazy Reacy.lazy を使うと import() で読み込んだコンポーネントを通常のコンポーネントとして扱うことができる 下記の方法でコンポーネントを Dynamic import できる // component export defau…
Pagination みたいにリストの中から常に n 件の値を取得する方法を考えてみた。(車輪の再発明) 要件 リストが n 件以上ある時は 常に n 件 表示する current を中心として前後に n / 2 件づつの範囲を取る 偶数件の範囲を取る場合は後ろの方を 1 件多くする …
v3.0から搭載された Just-in-Time engine はコード中を検索してマッチしたスタイルだけを出力する賢い仕組みだけど、クラス名の途中に変数が含まれた状態だとマッチせずスタイルが出力されない
Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "PO…
Enum はエミューじゃない。エミューは Emu だった！
Twitter みたいに画像を投稿できるフォームでは input[type="file"] を使いますがデフォルトでは選択した画像のファイル名が表示されるだけなので、何の画像を選択したかプレビューができたほうが便利です。 割とフォーム作成の際に必要になるので思いつきで…
オブジェクトの特定のプロパティの値をアップデートをする関数を作成していました interface Todo { name: string; description: string; } const todo: Todo = { name: "", description: "" }; const update = (arg: {name?: string; description?: string}…
TypeScript 用にするには `amplify configure codegen` で設定ファイルを先に生成しておく必要があった
1. vite-plugin-svgr プラグインを使う 2. .svg の型定義ファイルを作成する
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 (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 で型を生成できるまでのメモ。千里の道も一歩から！
default import と `* as` を使った namespace import な default import とで CommonJS のモジュールのインポートのされ方が異なる。
`environment` オブジェクトでLambdaの環境変数が設定できる。dotenv を使えば .env ファイルから環境変数を埋め込むことができた
初めての AWS CDK です。AWS 関連は経験がまだ全然なくやったことのログ的なエントリーとなります。 AWS CDK って何? AWS Cloud Development Kit (AWS CDK) は、使い慣れたプログラミング言語を使用してクラウドアプリケーションリソースを定義するためのオ…
Vite の DEV モードはネイティブESMを利用しているので CommonJS の require は使えない。代わりに import や Dynamic import を使えばOK
React v18 では `ReactDOM.render` ではなく `createRoot` を使って root オブジェクトを作成する ``` import { createRoot } from 'react-dom/client'; const root = createRoot(document.getElementById('app')!); root.render(); ```
props を受け取る子コンポーネントは React.memo した上で props で渡される関数やオブジェクトが useCallback, useMemo でメモ化されてないと親コンポーネントの再描画時に再描画される。 依存関係がないコンポーネントはラッパーコンポーネントを作り chil…
React v18 では暗黙的に props に含まれていた `children` は、使用するなら明示的に props の型を定義する必要がある。`React.VFC` は `React.FC` と同じになったので非推奨になった。
前回までのあらすじ。Vite で React (TypeScript) のプロジェクトを作ってパスエイリアスの設定をいい感じにしました 今回はいつもの ESLint と Prettier を導入します。結論から言えば VIte だからという事は特になく、`create-react-app` で作成したプロジ…
`vite-tsconfig-paths` プラグインを使うのが簡単でオススメ！ `tsconfig.json` にパスエイリアスの設定を書いて、`vite.config.ts` にはプラグインを読み込ませるだけにできるのでパスエイリアスの設定が一元化できます。
`npm create vite@latest ` コマンドを実行すれば CLI で React + TypeScript なプロジェクトがサクッと作れてすごく凄い!!
JEST で引数を取る関数のエラーの発生をテストする場合は expect 内で関数が実行されるように、テストする関数を無記名関数などでラップする必要がある
毎回 ESLint と Prettier の設定書いて、パスエイリアスの設定して、なんやかんや設定して…とメンドーなので create-react-app --template typescript ベースでゆるゆるな自分用ボイラーテンプレート作りました。 ボイラーテンプレート やったこと ESLint は…
ハンズオンとかチュートリアルでよく出てくる欄ラムな文字列を作る処理をちゃんとみてみようと思った export const getRandomString = (n: number): string => { const S = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; return Array…
例えば次ようなサインアップフォームのフィールドの値を引数に取るバリデーションを行う関数あるとして、この関数の型を別途定義したい interface SignUp { username: string; email: string; password: string; } const validation = ({ username, email, p…
Material UI の <TextField /> コンポーネントは出力時にいい感じに div で囲ってくれるからか、直接 readonly 属性を渡しても設定されなかった。 @mui/material@5.2.7 NG: <TextField /> に readonly 属性を渡しても readonly な状態にはならない disabled は効くけど readonly は効か</textfield></textfield>…
Material ui の Modal のサンプルを TypeScript にコピペしたら JSX でインラインスタイルの指定に CSS のオブジェクトを渡している箇所で形エラーになってしまった const style = { // インラインスタイルに使う CSS }; const MyComponent = () => { return <div style={style} /></div>…
