2021-07-01から1ヶ月間の記事一覧
nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…
TypeScript な React のフォームを作成していて new FormData() で取得したフォーム内容のデータの型を送信する形式の interface から作成したかったのメモ type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; で Object.entries() したときの型が…
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>…
create-react-app で作った TypeScript の React アプリで Next.js でやって便利だと感じたパスのエイリアス設定しようとして盛大にハマったのでメモ。 ゴール create-react-app --template teypescript で作った TypeScript の React アプリで /src ディレ…
Next.js でプロジェクトを作ると root ディレクトリに routing をするための /pages が作られるのでコンポーネントなどのファイルを作ろうとすると root にディレクトリが増えてしまっていって見通しがあまりよろしくないので、react のプロジェクトのように…
何回も作るのに都度調べるのめんどくなってきたからメモ Next.js のプロジェクトを作る 今いるディレクトリにプロジェクトを作る $ npx create-next-app --use-npm . --use-npm オプションつけないと npm が無いって怒られる。忘れがち… TypeScript 化 $ npm…
プロトタイプを作っているときなど、ダミー画像で画像生成サービスを使うことがあります。 Next.js の組み込みコンポーネント next/image でダミー画像生成サービスの url を src に設定したらエラーになったので忘れないようにメモ。 next/image の src に…
新規に作ろうとして環境作るまでに盛大にハマったのでメモ 環境 "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…
以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 1234567890 => "1,234,567,890" 1234567890.1235 => "1,234,567,890.1235" -1234567 => "-1,2…
Next.js で作ったアプリでブラウザの戻る / 進む ( router.back() History.back() / History.forward() ) が実行された際に、最後に見ていた時のスクロール量が保持されるのでスクロール量を 0 にして遷移させたかったのメモ scrollRestoration オプションを…
デフォルトだと useBreakpointValue が初回レンダリング時に undefined を返すので、分割代入で値を受け取ろうとしたらエラーになる Chakra UI v1.6.4 以降なら defaultBreakpoint オプションを使う。 それ以前なら useBreakpointValue() || defaultValue で…
