かもメモ

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

Tips

npm パッケージの依存しているパッケージを知りたいぞい!

npm パッケージを使っていてライブラリのアップデートが速いものは、新しくなった方法を試そうとしたら依存しているパッケージが変更になっていたりでハマってしまうことが割とあります。 このパッケージが依存してるライブラリ何?が知りたい時のメモ npm v…

Git リモートブランチのチェックアウトがエラーになる時のメモ

PR確認でリモートのブランチにチェックアウトしようとしたらエラーになってチェックアウトできなくなった。 $ git checkout -b feature/foo origin/feature/foo fatal: 'origin/feature/foo' is not a commit and a branch 'feature/foo' cannot be created …

npm 上位階層にある node_modules を使った npm-script を実行したい

今回も文章量に対して大変地味なエントリーです! 一つのリポジトリ内にあるディレクトリで別々に sass をコンパイルしなければならないプロジェクトがあり、ディレクトリごとにコンパイルするためのパッケージをインストールするのは管理面でも避けたかった…

チーム開発するリポジトリで node のバージョンを揃えたい

チームでフロントの開発する時に node のバージョンが異なっているとインストールされるパッケージのバージョンとか依存とかで面倒なことになる可能性があるので揃えておくのが良いと思っています。 〇〇のバージョンをインストールしてください。とお願いし…

Markdown テーブルの中に | を書きたい

GitHub の PR や issue, wiki といったマークダウンでテーブルの中に Pick<Interface, 'foo' | 'bar'> とか a || b みたいに | を書きたい事が稀にあります。そのまま書くとコードで囲っても | がテーブルの区切りと判断されてしまうので、どうやったらテーブルのコンテンツに | が使え</interface,>…

Git ログのツリーをいい感じに見れるエイリアスを設定したらいい感じになった!

Git で logを見る時に開発中は git log --oneline でほぼ事足りていたのですが、 色々やるようになって tree 表示 GUI だと遅いのでターミナルでいい感じに表示したくなって設定を追加しました。 Git tree をいい感じに表示するエイリアス # 今いるブランチ…

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

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

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

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()` を使う

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

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

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

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

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

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

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

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

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

GAS SpreadSheet IMPORTRANGE で 外部シートを読み込もうとして 循環依存が検出されました。なエラーにハマる

PM っぽいことをしてて SpreadSheet を触るばかりの日々を過ごしています。 お久しぶりに SpreadSheet で他のシートからの参照をしててエラーになってしまったのでメモ。 IMPORTRANGE で外部のシートを読み込もうとしたら 循環依存が検出されました。 という…

GAS SpreadSheet 複数のシートのデータをまとめて表示したい

1日目, 2日目, 3日目のイベント情報のデータがあってそれぞれ別のシートにあるから全体を見れるように 1つのシートで表示したいみたいなケース day1 A B C D 1 id name day action 2 1 星宮いちご day1 xxx 3 2 霧矢あおい day1 xxx 4 3 紫吹蘭 day1 xxx day…

firebase firebase init で Error Failed to list Firebase projects. になる

久々に Firebase Hosting を使おうとしてしたら firebase init の Project Setup で 既にあるプロジェクトを使おうと思い Use an existing project を選択すると Error: Failed to list Firebase projects. See firebase-debug.log for more info. になって…

Git 間違って rebase しちゃったのを元に戻したい

git rebase しくじった時。 私はよくしくじる! git reflog を使う git reflog で直近の変更がずら〜っと表示されるので、戻したい位置を選んでもとに戻すことができる $ git reflog 94677f475 (HEAD) HEAD@{0}: rebase (continue) (finish): XXXXX 94677f47…

JavaScript で おしえて A to Z

2020年最後なのでネタ投稿です。 charCodeAt を使って A-Z の文字コードを作る charCodeAt() メソッドは、指定された位置にある UTF-16 コードユニットを表す 0 から 65535 までの整数を返します。 cf. String.prototype.charCodeAt() - JavaScript | MDN 'A…

Git 直前のコミットメッセージを編集したい

typo の達人なので git commit --amend $ git commit --amend 修正するコミットメッセージを直接渡したいときは $ git commit --amend -m "message" amend … 修正する 英語ちから is 無 だからすぐ忘れる… おわり わかばちゃんと学ぶ Git使い方入門作者:湊川…

Homebrew brew update で Error: homebrew-core is a shallow clone

開発環境アップデートしたからコマンド実行して〜って言われてやろうとしたら brew update でエラーになった。 $ brew update Error: homebrew-core is a shallow clone. To `brew update` first run: git -C "/usr/local/Homebrew/Library/Taps/homebrew/ho…

React v17 create-react-app で作ったアプリで ESLint に怒られまくった

npx create-react-app で React のアプリを作ったら v17 系になっていました。 今までのプロジェクトで使っていた ESLint の設定を持ってきたらエラーになる部分があったのでメモ react 17.0.1 react-scripts 4.0.1 eslint 7.14.0 eslint-plugin-react 7.21.…

webpack v5 npx webpack-dev-server で dev server が動かないにハマる

久しぶりに webpack 環境を作っていて web-pack-dev-server を動かそうとしてハマったのでメモ package.json "devDependencies": { "webpack": "^5.6.0", "webpack-cli": "^4.2.0", "webpack-dev-server": "^3.11.0" }, Error: Cannot find module 'webpack-…

Mac OS Catalina ターミナルで SSH 接続しようとしたら毎回パスフレーズをきかれるようになった

Mac のアップデートがあって再起動してからターミナルで GitHub などに push や pull しようとする度にパスフレーズを尋ねられるようになってしまいました。 $ git pull origin master Enter passphrase for key '/Users/<username>/.ssh/id_rsa': 毎回入れるのはメン</username>…

mkdir 階層化したディレクトリを一発で作りたい。

存在しないディレクトリ内にディレクトリを作ろうとしたらエラーになる $ mkdir .github/workflows mkdir: .github: No such file or directory p オプションを使う $ mkdir -p .github/workflows $ ls -a -n ... drwxr-xr-x 3 501 20 96 11 4 04:06 .github…