Tips
props を受け取る子コンポーネントは React.memo した上で props で渡される関数やオブジェクトが useCallback, useMemo でメモ化されてないと親コンポーネントの再描画時に再描画される。 依存関係がないコンポーネントはラッパーコンポーネントを作り chil…
拡張子を含むファイル名の文字列から、拡張子とか拡張子を除いたファイル名を取得する方法のメモ 拡張子の始まりの位置を特定すれば拡張子とファイル名に分解できる 拡張子とは何かを考える 拡張子は . から始まる 文字列の一番最後に出現する . 以降が拡張…
Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ Sass の変数を #{} で囲ってあげればOK $textColor: #000; $backgroundColor: #FFF; // カスタムプロパティを定義 :root { --text-color: #{$textColor}; --background-color: #…
docker-compose で作成した MySQL にコンテナ外から mysql コマンドでアクセスしようとしたら Access denied になるにハマったのメモ。※ 本エントリーは経過と事象のメモで詳しく調べてはいません。 環境 Mac OS 11.6 Docker desktop 4.5.0 MySQL 8.0.28 (Ho…
ある組織のリポジトリで開発環境を作っていて submodule が設定されていたので初期化しようとしたら GitHub のパスワードを聞かれてエラーになったのでメモ $ git submodule update --init Submodule 'tools/common' (https://github.com/ORG_NAME/REPO) reg…
Django の docker 環境をクイックスタートのドキュメントを参考に作っていたけど DB にしていされていた Postgres のコンテナが起動しなかった。 docker-compose.yml version: '3' services: # 略 db: image: postgres restart: always # 永続化 volumes: - …
brew pyenv を消して anyenv の pyenv で Python をインストールしようとしたら BUILD FAILED というエラーが出るようになってしまった… 環境 MacOS Big Sur (11.6.1) anyenv 1.1.2 pyenv 2.2.3-1-g423de9ae 結論 Xcode のバージョンが古かったので最新の v1…
チーム作業してると開発が進むにつれて追加や変更が頻発する環境変数の扱いが悩ましいです。 .env.sample のようなキーだけ書かれたファイルを git 管理することが多いのですが、これをリネームする際にファイルに書かれている内容をゴニョゴニョしたい事が…
結論 tsconfig-paths を使って ts-node, ts-node-dev に -r tsconfig-paths/register オプションを渡してあげれば OK
$ git submodule update update やし最新に更新されるやろ…っておもったら最新にならなかった。diff をみたら最新でないコミットハッシュからチェックアウトされていました。 なんもわからん… 全 submodule を強制的にする $ git submodule foreach git pull…
make コマンドに .env にある環境変数を渡したい include .env で読み込める Makefile に include .env を書くだけで .env 内の環境変数が使える .env SECRET_KEY=HoshimiyaIchigo Makefile include .env test: echo ${SECRET_KEY} $ make test echo Hoshim…
Moment.js くんが卒業してからフロントエンドでの日付操作には day.js か date-fns を使っていました。 今回年・月・日が別々の select ボックスで日付を選択する UI があり 2月31日のような存在しない日付が選べてしまうので、存在しない日付を判定しようと…
npx create-react-app --template typescript で作成した TypeScript の React アプリでビルド時に初めて出会うエラーになってしまったのでメモ "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.1.2", build 時に Could not find a required…
画面のキャプチャに矢印や文字を直接書き込める Skitch というアプリをよく使っています。 Skitch - 撮る。描き込む。共有するSkitch仕事効率化無料 ブラウザやコードをキャプチャしようとしたらなぜか背景画像だけがキャプチャされてしまう様になってしまい…
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている j…
npm パッケージを使っていてライブラリのアップデートが速いものは、新しくなった方法を試そうとしたら依存しているパッケージが変更になっていたりでハマってしまうことが割とあります。 このパッケージが依存してるライブラリ何？が知りたい時のメモ npm v…
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 …
今回も文章量に対して大変地味なエントリーです！ 一つのリポジトリ内にあるディレクトリで別々に sass をコンパイルしなければならないプロジェクトがあり、ディレクトリごとにコンパイルするためのパッケージをインストールするのは管理面でも避けたかった…
チームでフロントの開発する時に node のバージョンが異なっているとインストールされるパッケージのバージョンとか依存とかで面倒なことになる可能性があるので揃えておくのが良いと思っています。 〇〇のバージョンをインストールしてください。とお願いし…
GitHub の PR や issue, wiki といったマークダウンでテーブルの中に Pick<Interface, 'foo' | 'bar'> とか a || b みたいに | を書きたい事が稀にあります。そのまま書くとコードで囲っても | がテーブルの区切りと判断されてしまうので、どうやったらテーブルのコンテンツに | が使え</interface,>…
Git で logを見る時に開発中は git log --oneline でほぼ事足りていたのですが、 色々やるようになって tree 表示 GUI だと遅いのでターミナルでいい感じに表示したくなって設定を追加しました。 Git tree をいい感じに表示するエイリアス # 今いるブランチ…
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 の設定とかで変わる…
