かもメモ

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

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 のエイリアス使おうとして盛大にハマったメモ

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 から下記のようなエラー用のオブジェクトの型を作…

Google SpreadSheet 複数のカラムでグルーピングしたい。ついでに複数カラムで並び替えたい

例えば都道府県別の飲食店のリストみたいなものがあって、都道府県別のカテゴリー別で店舗数を出したいみたいな時、都道府県とカテゴリーと複数のカラムでグルーピングする必要があります。 シート名店舗リスト A B C 1 店舗名 都道府県 カテゴリー 2 店舗 A…

GitHub remote branch が Repository not found になるにハマる

GitHub に新しくリポジトリを作って、README に出てくる通りローカルリポジトリの remote に登録して push しようとしたら Repository not found. なエラーになってしまったので解決方法のメモ。 と言っても状況はそれぞれのマシンの ssh の設定とかで変わる…

Google SpreadSheet UTF-8 な CSV をスプレッドシートで開いたら日本語が文字化けするときのTIPS

UTF-8 なのにスプレッドシート変換で日本語が文字化けする時は、ファイルの先頭に日本語の文字を入れると上手くいくかも!

Python3 要素が n の配列を生成したい

データを突っ込む初期値として [0, 0, 0] とか [[], [], []] みたいな配列を作りたい * n で要素を繰り返した配列が作れる data = [0] * 3 # [0, 0, 0] * n する配列の要素全てが n 回繰り返される data = [1, 2, 3] * 3 # [1, 2, 3, 1, 2, 3, 1, 2, 3] 要素…

MySQL 1回のクエリで取れたデータを別々の条件別にカウントしたい

SELECT 全体のレコード数, 条件A の総数, 条件B の総数 FROM テーブル WHERE 条件 GROUP BY カラム こんな感じで特定の条件でグループ化したデータをグルーピングされた中で、さらに条件別に数を出したい。 例えばユーザーの購入レコードがあって、ユーザー…

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

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

環境構築 macOS Big Sur : Git の設定と GitHub への SSH 接続

新しいMacに Git の設定やり直したのを書き忘れてたので思い出しながらメモ。 環境 Intel Mac macOS Big Sur Homebrew インストール済み Git のインストール Xcode の Xcode Command Line Tools をインストールする ターミナルで git --version コマンドを叩…

JavaScrip HTML5 input type="datetime-local" の値を設定したい

JavaScript (React) で <input type="datetime-local" /> の値を設定するメモ datetime-local の value は yyyy-MM-ddThh:mm の形で指定する 表示される日付と時刻の書式は実際の value とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーの…

今更の Firebase Cloud Firestore 。タイムスタンプ周りのメモ

Cloud Firestore のタイムスタンプ型は firebase.firestore.TImestamp オブジェクトなので Date と思って扱うとエラーになるし、seconds プロパティを new Date() すると別の日付になってしまうので注意!

Mac デスクトップを iCloud 同期しているときの TIPS

昨年末から G's Academy という自分のプロダクトを作れるようになろう的なスクールでプログラミングのチューターをしています。 チューターをしている中で意外なトラップを発見したのでメモとして残しておきます。 Mac デスクトップを iCloud 同期設定をして…

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

VSCode 保存時に Prettier の自動フォーマットが効かなくなった件

コードのフォーマット揃ってないとʕ•ﻌ•ʔムキッってなっちゃうけど、手作業でフォーマットするのは面倒くさいダメ人間です。 ./vscode/settings.json に "editor.formatOnSave": true を指定していたのだけど、保存時に Prettier が効かなくなってたので動くよう…

環境構築 macOS Big Sur : vim をカラフルにしたい

git で開くエディタに色がついてなかった。設定方法すぐ忘れるのでメモ。 環境 macOS Big Sur zsh vim vim にカラースキームを適応する方法 調べると ~/.vim/colors 内にカラースキームのファイルを置いて .vimrc で指定すればOKっぽい。 自分の環境はこのデ…