かもメモ

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

2021-07-01から1ヶ月間の記事一覧

nodenv でインストールしたいバージョンが表示されない時にやること

nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…

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 alias 使おうとして盛大にハマったメモ

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 で…