かもメモ

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

TypeScript

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() したときの型が…

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 …