かもメモ

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

TypeScript

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

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

React HTML の HEAD 情報を書き換える react-helmet 使おうとしたら警告が出た件

React で <head> の情報を書き換えるのに react-helmet を使った所 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. という警告が発生してしまいました。 環境 "react": "^17.0.2", "react-helm</head>…

React create-react-app したプロジェクトで paths のエイリアス使おうとして盛大にハマったメモ

create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…

Next.js root ディレクトリをシンプルにしたい。

Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように…

Next.js TypeScript + ESLint + Prettier の環境を作るのだ!

何回も作るのに都度調べるのめんどくなってきたからメモ Next.js のプロジェクトを作る 今いるディレクトリにプロジェクトを作る $ npx create-next-app --use-npm . --use-npm オプションつけないと npm が無いって怒られる。忘れがち… TypeScript 化 $ npm…

Next.js next/image で外部URLの画像を使いたいときにやること

プロトタイプを作っているときなど、ダミー画像で画像生成サービスを使うことがあります。 Next.js の組み込みコンポーネント next/image でダミー画像生成サービスの url を src に設定したらエラーになったので忘れないようにメモ。 next/image の src に…

TypeScrip + ESLint + Prettier + Jest のプロジェクト設定にハマる

新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "typescript": "^4.3.5" "eslint": "^7.30.0", "prettier": "^2.3.2", "jest": "^27.0.6", 最終的にできたもの TL:DR; TypeScript + ESLint+ Prettier の環境を作る TypeScript $ npm i --save…

TypeScript 数字をカンマ区切りの文字列に変換したい

以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 1234567890 => "1,234,567,890" 1234567890.1235 => "1,234,567,890.1235" -1234567 => "-1,2…

Next.js ブラウザ戻る/進む (History.back / History.forward) の時に常にページトップ (スクロール量をリセット) で表示させたい

Next.js で作ったアプリでブラウザの戻る / 進む ( router.back() History.back() / History.forward() ) が実行された際に、最後に見ていた時のスクロール量が保持されるのでスクロール量を 0 にして遷移させたかったのメモ scrollRestoration オプションを…

Next.js × Chakra UI レスポンシブ値を変更できる useBreakpointValue で複数の値を扱いたい時のハマりどころ

デフォルトだと useBreakpointValue が初回レンダリング時に undefined を返すので、分割代入で値を受け取ろうとしたらエラーになる Chakra UI v1.6.4 以降なら defaultBreakpoint オプションを使う。 それ以前なら useBreakpointValue() || defaultValue で…

React × Chakra UI レスポンシブでサイズの変わるボタンを作りたい

Chakra UI の Button コンポーネントの size props は margin や width のような配列形式でレスポンシブ時の値を渡すことができない。 size の値をレスポンシブで変えたい時は `useBreakpointValue()` を使う

TypeScript interface のプロパティの型を取得したい!

オブジェクトがリストになっているデータから、オブジェクト内の id をキーにした Map を作成したい時、id の型を interface から取得したかったのメモ interface interface Iidol { id: number; name: string; tyep: 'cute' | 'cool' | 'sexy' | 'pop'; } 1…

React Warning: Cannot update a component (`Componet`) while rendering a different component.

コンポーネントがレンダリング中に別コンポーネントの state を変更しようとすると Warning: Cannot update a component (`Componet`) while rendering a different component が発生する。 ハマった時は、これもアイカツ!を思うと頑張れる!!

Next.js router.push でリダイレクトしようとしたら No router instance found. なエラーになった

プロトタイプをたくさん作る事になりついに Next.js に入信しました。 今回 user id ごとに表示を切り替える Dynamic Routing をしているページで user id が無効な時 404 にリダイレクトさせようとして次のようなコードを作成しました。 /pages/posts/[uid]…

TypeScript interface, type のプロパティをキーにしたオブジェクトの型をつくりたい

フォームのエラーを作っていて、schema からエラー用のオブジェクトの型を作りたかった。 例えば interface UserInterface { 'name': string; 'age': number; 'image'?: string; } こんな interface や type から下記のようなエラー用のオブジェクトの型を作…

React 条件分岐のある箇所で Hooks を使うとエラーになる

Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. というエラーに出会ったのでメモ。 環境 React ^17.0.1 エラーが発生した経緯 ロード中と完了後に別のコンポーネントを表示したいとか、…

JavaScript, Node.js 先に作っておいた変数を named export したい

default exports は好きな名前で import できてしまうから極力 named exports / import にしたほうが良いと教えてもらったので、先に変数が作られてる場合どうするんだろう?と思い調べて見たメモ。 ESModules の named exports exports // foo.ts export co…

Firebase Cloud Firestore で複数の OrderBy で 9 FAILED_PRECONDITION: The query requires an index なエラーになった

Cloud Firestore からデータを取ってこようとしたら次のようなエラーが返ってきた。 { error: { code: 9, details: "The query requires an index. You can create it here: https://console.firebase.google.com/v1/r/project/<projectName>/firestore/indexes?...", mes</projectname>…

Express な API でエラーハンドリングするよ

TypeScript な Express でAPI作ってエラーを返す処理を都度書いているとめんどいので、エラーハンドリングして返すようにしたメモ エラーハンドリングのミドルウェアはルーティングより後に書く 上から順番にルーティングにマッチしていくか見ていって、該当…

TypeScript で SCSS の変数を使いたい!にハマる 😇

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

Serverless でも DynamoDB を使いたい!

前回までのあらすじ TypeScript な Express を aws-serverless-express で Serverless 化して AWS Lambda にデプロイしました。 データベースを使えるように AWS の DynamoDB に接続できるようにしてみたメモ。 serverless.yml に DynamoDB の設定を追加する…

TypeScript な Express を aws-seveless-express で Serverless にして AWS Lambda にデプロイするまでの記録

TL;DR AWS も Lambda も自分で調べて〜なレベル感なのでなんも分かってません。 とりあえずガチャガチャやってみて、動いてるんじゃね?となったので、そこまでもプロセスをまとめただけのエントリーになります。なので、たぶん超長い記事になってると思いま…

TypeScript Express 開発環境のテンプレート作った。

はい。 Setup $ npm install # dev 用環境変数ファイル $ cp .env/.env.sample .env/.env.dev # prod 用環境変数ファイル $ cp .env/.env.sample .env/.env.prod Development /src 内の TypeScript を監視してホットリロードする開発モードです。 $ npm run …

Webpack build 時に環境にに応じた .env を読み込ませたい

前回までのあらすじ resolve.alias を使って環境毎に別のファイルを読み込ませる事ができました。 今回は .env を環境に毎に process.env に入れてビルドする方法をやってみましたの Tofu on Fire dotenv-webpack プラグインを使う dotenv-webpack プラグイ…

Webpack TypeScript な Express アプリを環境ごとに変数を埋め込んで build したい。

前回までのあらすじ Express を TypeScript で書いて webpack で build する構成で作成していて、環境毎に切り替えたい情報を直接バンドルして build したいと思いやって見たメモ。 WHY? webpack をビルドする際に mode や process.env で環境変数を渡せるの…

TypeScript で Express 開発環境を作るぞぃ!

ほぼコレを参考にしています 構成 /app |- /dist # build されたアプリの出力先 |- /src | |- index.ts # express entrypoint |- /webpack | |- base.config.js # 共通設定 | |- dev.config.js | |- prod.config.js |- nodemon.json |- package.json |- tsco…

Node.js + TypeScript nodemon + ts-node で変更が watch されず ホットリロードされないにハマる

Express を TypeScript で作成していて開発中は nodemon で ts-node を使って変更を監視してホットリロードさせたかったのですが、ファイル変更が watch されない問題にハマったのでメモ。 構成 /project_root |- /src | |- index.ts |- package.json |- nod…

VS Code ESLint 拡張が Parsing error: Cannot read file エラー config ファイルが読み込めない問題にハマる

VS Code に入れてある ESLint 拡張が TypeScript ファイルの一行目で次のようなエラーを出てしまうことがありました。 Parsing error: Cannot read file '/users/kikiki/MyApp/tsconfig.json'.eslint tsconfig.json が第一階層にないとこのエラーが出るっぽ…

TypeScript Object を Object.keys() を使ったループの型エラーにハマる

TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで co…

TypeScript Readonly と as const

TypeScript なんもわからん… Readonly と as const がよく判らなかったから調べたメモ Readonly TypeScriptの型システムでは、インターフェース上の個々のプロパティをreadonlyとしてマークすることができます。これにより、関数的に作業することができます(…