かもメモ

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

Git リモートリポジトリを変更する時のメモ

git remote set-url origin で変更すればOK ₍ ᐢ. ̫ .ᐢ ₎

MacOS Monterey スクリーンショットの保存先を変更する

デフォルトだとデスクトップにスクリーンショットが保存されるのでスクリーンショット用のディレクトリに保存するようにしたい スクリーンショットの保存先を変更 defaults write com.apple.screencapture location <保存先> でスクリーンショットの保存先を…

Prettier JS はシングルクォーテーションで CSS はダブルクォーテーションにしたい

自動で JS, CSS の整形をしてくれる Prettier とても便利で愛用しています。 同じクオートの設定を JS の時は ' (Single Quote), CSS の時は " (Double Quote) とで分けたい時のメモ overrides, files を使って設定の場合分けができる .prettierrc.json { "s…

npm WARN config init.author.name Use `--init-author-name` instead.

Node.js のバージョンを上げて npm コマンドを使ったら次のような warning が表示された npm WARN config init.author.name Use `--init-author-name` instead. npm WARN config init.author.email Use `--init-author-email` instead. npm WARN config init…

Google SpreadSheet ArrayFormula の中で IsDate が意図したとおりに動かないにハマる

下記のようなデータフォーマットが揃っていないスプレッドシートが有り日付が入っている場合のみ加工した値を出力させたかった A B 文字列 aaa 数値 123 日付 2022/01/01 存在しない日付 2000/2/30 空白 日付 1938/11/30 文字列 bbb ArrayFormula 内で IsDat…

CSS Chrome コンテンツの領域外に無限にスクロールしてしまうのを防ぐ

領域外への無限スクロールは `overscroll-behavior-y: none;` を body に付けると抑制できるっぽい!

Mac log ファイルの中身を空にしたい

Docker とかで動かしてるプロジェクトの log ファイルがすぐ巨大になるので定期的に空にしたい。巨大ファイルだとファイル開いて中身を消すのは大変なのでコマンドで楽したい。 echo -n > ./path/to/file でファイルの中身を空にできる $ echo -n > ./docker…

WordPress SSL 化のメモ

化石のような WordPress サイトのアップデート案件があり付随して SSL 化されてなかったので SSL 化したのでログとしてのメモ。 1. テーマ内にハードコーディングされている URI を修正する OGP設定や CDN などテーマ内にハードコーディングされている http …

Docker compose 起動時に環境変数が読み込まれないにハマる

docker compose build したら環境変数が読み込まれない現象が発生しましたのでメモ 構成 /root |- /app |- docker-compose.yml |- .env .env にある環境変数を docker-compose.yml で読み込んで environment でコンテナに渡すようにしていました。 .env は d…

Rollup require がバンドルされないにハマる

Rollup を使って JS をビルドしていたのですが CommonJS 形式の require が解決されずそのまま出力されてしまう問題にハマったのでメモ 環境 rollup v2.77.2 @rollup/plugin-node-resolve v13.3.0 @rollup/plugin-commonjs v22.0.1 rollup.config.js import …

Gulp + Rollup で webサイト用の JS をビルドしたい

10年くらい前に作った WEB サイトの改修案件が発生して、構成が古すぎて手に負えなくなっていたのでコレを気にビルド環境を見直しました。 元のものが Grunt で JS を結合したり SCSS をビルドしている構成だったので Grunt を Gulp に置き換え、SCSS のビル…

Mac VSCode 折返し設定 (Word Wrap) が無視されてしまう問題

`editor.accessibilitySupport` が `on` になっていると折り返し (`editor.wordWrap`) の指定が無視される

Docker コンテナで cp コマンドで omitting directory

Docker コンテナのセットアップでディレクトリをコピーさせようとしたら cp: -r not specified; omitting directory というエラーが発生した $ docker compose exec app cp assets /var/www/html/assets cp: -r not specified; omitting directory 'assets' …

GraphQL 複数の型が含まれる配列の Schema を定義したい

GraphQL で A 又は B が含まれる配列を返す schema を作成したかったのでメモ A型 または Bの型を返す Union Type を作成する Union Type が含まれる配列の型を作成する 1. A型 または Bの型を返す Union Type を作成する union キーワードで定義する Union …

Proxy 設定されている社用マシンで Firebase ログインが大変だったメモ

お手伝いしているプログラミングスクールで Firebase を使う講義の際に Proxy 設定がされている社用 PC の方の環境で盛大にハマりどころがあったのでメモ。 Windows 環境は扱った経験がないので適当な記述になっているかと思います。ご了承ください。 1. npm…

React vite 環境変数を使うメモ

vite React プロジェクトで .env に書いた環境変数を使うメモ 環境変数は VITE_ prefix を使う VITE_ から始まる変数名でないと vite アプリからアクセスできない 環境変数が誤ってクライアントに漏れてしまうことを防ぐために、VITE_ から始まる変数のみが …

docker-compose.yml で定義した変数を Dockerfile に渡したい

docker-compose.yml は環境変数を .env からよしなに取ってこれるので、同じ環境変数を Dockerfile に渡したいときのメモ。(すぐ忘れるからこれだけ書き残しておく) build 内に arg: で定義した変数を Dockerfile 内で改めて ARG 変数名 とすれば OK .env MY…

Docker WordPress コンテナから MySQL コマンドが使いたい

三畳紀ぶりに WordPress の案件があって触ってます。 20世紀みたいに PHP 環境を local に作るのつらすぎるので docker を使ってい環境構築していたのですが、WordPress のコンテナから mysql コマンドが使えなかったので使えるようにしたメモ Docker WordPr…

sed 置換の正規表現内で変数を使いたい

docker で環境を作っていて docker compose build 時に設定ファイルに環境変数から取得した値を自動で設定したかった。ファイルの変更は sed コマンドを使えば良さそうだったので置換の正規表現に環境変数を展開して置換できれば良さそうです。 変数を使う場…

Vite React コンポーネントへのパスを変数にして Dynamic import したい

https://chaika.hatenablog.com/entry/2022/07/19/083000 React.lazy と import() を使えばコンポーネントを Dynamic import することができます。 例えば何種類下のアイコンの中で必要なコンポーネントだけ読み込みたいような場合、コンポーネントへのパス…

React.lazy でコンポーネントを Dynamic import してみる

環境 - react@18.1.0 - vite@2.9.9 - typescript@4.6.4 React.lazy Reacy.lazy を使うと import() で読み込んだコンポーネントを通常のコンポーネントとして扱うことができる 下記の方法でコンポーネントを Dynamic import できる // component export defau…

リストの中から特定の index の前後を n 件の範囲のデータを取得したい。

Pagination みたいにリストの中から常に n 件の値を取得する方法を考えてみた。(車輪の再発明) 要件 リストが n 件以上ある時は 常に n 件 表示する current を中心として前後に n / 2 件づつの範囲を取る 偶数件の範囲を取る場合は後ろの方を 1 件多くする …

React Tailwind CSS v3 クラス名を動的に作ったらクラスが適応されない?にハマる

v3.0から搭載された Just-in-Time engine はコード中を検索してマッチしたスタイルだけを出力する賢い仕組みだけど、クラス名の途中に変数が含まれた状態だとマッチせずスタイルが出力されない

Vite React + MSW モックサーバーへのリクエストが `net::ERR_FAILED` になる件

Vite で作成した React (TypeScript) のプロジェクトで MSW (Mock Service Worker) を使って開発環境で API へのリクエストにモックを返すようにしたいと思っていたのですが React からのリクエストがことごとく net::ERR_FAILED [MSW] Failed to mock a "PO…

今更の TypeScript enum 型になっているプロパティの値ってどう指定するの?

Enum はエミューじゃない。エミューは Emu だった!

React (TypeScript) 画像をプレビューするコンポーネント作ってみた

Twitter みたいに画像を投稿できるフォームでは input[type="file"] を使いますがデフォルトでは選択した画像のファイル名が表示されるだけなので、何の画像を選択したかプレビューができたほうが便利です。 割とフォーム作成の際に必要になるので思いつきで…

TypeScript 特定のキーを持つオブジェクトの型

オブジェクトの特定のプロパティの値をアップデートをする関数を作成していました interface Todo { name: string; description: string; } const todo: Todo = { name: "", description: "" }; const update = (arg: {name?: string; description?: string}…

AWS Amplify GraphQL API で TypeScript の型が生成されないにハマる

TypeScript 用にするには `amplify configure codegen` で設定ファイルを先に生成しておく必要があった

Firebase Hosting に Google Domains で取った独自ドメインを割り当てる

Firebase Hosting で公開するサイトに GoogleDomains で取った独自ドメインを割り当てたメモ 前提 Firebase でプロジェクトを作成済み Google Domains で独自ドメインを取得済み 1. Firebase Hosting でカスタムドメインの設定を行う Hosting → 「カスタムド…

Tips AWS Amplify のプロジェクトが削除できなくなった

AWS-CLI で `aws amplify delete-backend-environment --app-id --environment-name ` コマンドを実行すれば AWS コンソールから削除できない Amplify の環境を削除できた