Tips
nodenv install --list でインストールしたいバージョンが見当たらない nodenv で新しい node のバージョンをインストーしようとしてインストール可能なリストを表示… $ nodenv install --list インストールしたいバージョンが表示されない… nodenv がアップ…
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>…
以前ゼロパディングで桁数を合わせる方法のメモを書いていましたが、三桁ごとにカンマ区切りのフォーマットもよくやるよな〜と思ったのでやり方のメモ。 こんなの 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 で…
Chakra UI の Button コンポーネントの size props は margin や width のような配列形式でレスポンシブ時の値を渡すことができない。 size の値をレスポンシブで変えたい時は `useBreakpointValue()` を使う
コンポーネントがレンダリング中に別コンポーネントの state を変更しようとすると Warning: Cannot update a component (`Componet`) while rendering a different component が発生する。 ハマった時は、これもアイカツ！を思うと頑張れる!!
例えば都道府県別の飲食店のリストみたいなものがあって、都道府県別のカテゴリー別で店舗数を出したいみたいな時、都道府県とカテゴリーと複数のカラムでグルーピングする必要があります。 シート名店舗リスト A B C 1 店舗名 都道府県 カテゴリー 2 店舗 A…
GitHub に新しくリポジトリを作って、README に出てくる通りローカルリポジトリの remote に登録して push しようとしたら Repository not found. なエラーになってしまったので解決方法のメモ。 と言っても状況はそれぞれのマシンの ssh の設定とかで変わる…
UTF-8 なのにスプレッドシート変換で日本語が文字化けする時は、ファイルの先頭に日本語の文字を入れると上手くいくかも！
Cloud Firestore のタイムスタンプ型は firebase.firestore.TImestamp オブジェクトなので Date と思って扱うとエラーになるし、seconds プロパティを new Date() すると別の日付になってしまうので注意！
昨年末から G's Academy という自分のプロダクトを作れるようになろう的なスクールでプログラミングのチューターをしています。 チューターをしている中で意外なトラップを発見したのでメモとして残しておきます。 Mac デスクトップを iCloud 同期設定をして…
コードのフォーマット揃ってないとʕ•ﻌ•ʔﾑｷｯってなっちゃうけど、手作業でフォーマットするのは面倒くさいダメ人間です。 ./vscode/settings.json に "editor.formatOnSave": true を指定していたのだけど、保存時に Prettier が効かなくなってたので動くよう…
PM っぽいことをしてて SpreadSheet を触るばかりの日々を過ごしています。 お久しぶりに SpreadSheet で他のシートからの参照をしててエラーになってしまったのでメモ。 IMPORTRANGE で外部のシートを読み込もうとしたら 循環依存が検出されました。 という…
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 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 reflog を使う git reflog で直近の変更がずら〜っと表示されるので、戻したい位置を選んでもとに戻すことができる $ git reflog 94677f475 (HEAD) HEAD@{0}: rebase (continue) (finish): XXXXX 94677f47…
2020年最後なのでネタ投稿です。 charCodeAt を使って A-Z の文字コードを作る charCodeAt() メソッドは、指定された位置にある UTF-16 コードユニットを表す 0 から 65535 までの整数を返します。 cf. String.prototype.charCodeAt() - JavaScript | MDN 'A…
typo の達人なので git commit --amend $ git commit --amend 修正するコミットメッセージを直接渡したいときは $ git commit --amend -m "message" amend … 修正する 英語ちから is 無 だからすぐ忘れる… おわり わかばちゃんと学ぶ Git使い方入門作者:湊川…
開発環境アップデートしたからコマンド実行して〜って言われてやろうとしたら 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…
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 環境を作っていて 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 のアップデートがあって再起動してからターミナルで GitHub などに push や pull しようとする度にパスフレーズを尋ねられるようになってしまいました。 $ git pull origin master Enter passphrase for key '/Users/<username>/.ssh/id_rsa': 毎回入れるのはメン</username>…
存在しないディレクトリ内にディレクトリを作ろうとしたらエラーになる $ 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…
要素マージンを含めた width / height を取得するのがちょいと大変だったのでメモ。 html { font-size: 16px; } .div { margin: 0.3rem 0.2rem; // 4.8px 3.2px 相当 border: .3rem solid #000; // 4.8px 相当 width: 6.2rem; // 99.2px 相当 height: 6.2rem…
JavaScript の parseInt, parseFloat は 10px とか単位がある文字列でもいい感じに数値変換して返してくれますが、空文字列 "" の時 NaN が返されます。その後の計算でエラーになることも多いので NaN の代わりに 0 を返したいときのメモ 空文字や undefined…
CSS Modules とゎ？ ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…
CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…
Gemfile で読み込んでいる GitHub のリポジトリをPR出してるブランチで問題ないか確認したい Gemfile gem 'aikatsu', git: "git://github.com/<username>/aikatsu.git" branch: <branch_name> で指定すればOK Gemfile gem 'aikatsu', git: "git://github.com/<username>/aikatsu.git", branch:</username></branch_name></username>…
SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…
