かもメモ

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

Tips

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…

JavaScript margin 含めた width / height を取得したい

要素マージンを含めた 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, paeseFloat が NaN になるとき 0 を返したい

JavaScript の parseInt, parseFloat は 10px とか単位がある文字列でもいい感じに数値変換して返してくれますが、空文字列 "" の時 NaN が返されます。その後の計算でエラーになることも多いので NaN の代わりに 0 を返したいときのメモ 空文字や undefined…

CSS Modules やっていき

CSS Modules とゎ? ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…

webpack css-loader と style-loader の違いについて学んだ

CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…

Ruby GiHub のブランチをブランチを指定して gem で読み込ませたい

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

TypeScript で SCSS の変数を使いたい!にハマる 😇

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

React create-react-app したアプリで 開発時 (development) と build する時 (production) とで env を切り替えたい

create-react-app で作った React アプリで yarn start での開発時と yarn build でビルドした時に使う環境変数を切り替えたい。 .env のファイル名で自動的に切り替わる create-react-app で作られたファイルにある .gitignore を見ると次のように設定され…

Serverless で再 deploy したらエラーになった

一度 AWS に deploy してた Serverless 化したアプリを再デプロイしようとしたらエラーになってしまったのメモ。 $ sls deploy で再デプロイしようとしたらエラーになってロールバックされてしまった。 $ sls deploy # … Serverless Error -----------------…

Mac Capslock を解除するショートカット

Fn + Tab で Capslock / Capslock の解除が出来る。 Fn + Tab おわり。 使ってるお安い HHKB が時々 Capslock になった状態で Shift キーが押されたままになってしまう症状が出る。 Shift が押されたままの状態が解除できないから Capslock も解除できなくて…

Node.js + TypeScript nodemon + ts-node で変更が watch されず ホットリロードされないにハマる

Express を TypeScript で作成していて開発中は nodemon で ts-node を使って変更を監視してホットリロードさせたかったのですが、ファイル変更が watch されない問題にハマったのでメモ。 構成 /project_root |- /src | |- index.ts |- package.json |- nod…

VS Code ESLint 拡張が Parsing error: Cannot read file エラー config ファイルが読み込めない問題にハマる

VS Code に入れてある ESLint 拡張が TypeScript ファイルの一行目で次のようなエラーを出てしまうことがありました。 Parsing error: Cannot read file '/users/kikiki/MyApp/tsconfig.json'.eslint tsconfig.json が第一階層にないとこのエラーが出るっぽ…

React localhost でも https で動かしたい

create-react-app, react-scripts で作った React アプリを外部ライブラリやAPIの都合で localhost の時も https で動かしたい時のメモ .env に HTTPS=true を設定すればOK HTTPS=true のオプション付きで起動すれば localhost も https で起動できるようで…

Git マージコミットを残したまま rebase したい。

別 PR で機能を取り込んだりしたマージコミットのあるブランチでマージコミットを残したまま rebase したい時のメモ git rebase -i だとマージコミットが消えてしまう e.g. $ git log --graph --oneline * f3084e4 (HEAD -> master) 時はきた! * defc249 ね…

Python zsh で仮想環境 venv に入れない?にハマる

Python の venv で作成した仮想環境に入れない問題にハマったのでメモ venv Python v3.3 から標準機能として取り入れられた仮想環境 venv 内では pip でインストールされるパッケージが仮想環境ごと別にすることができる 仮想環境の作成 $ python -m venv te…

TypeScrip スプレッド構文で配列に変換しようとしたらエラーになった

TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。 Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIterat</htmlmetaelement>…

Ruby bundle install gb のエラーにハマる

Rails のプロジェクトのローカル環境を作っていて bundle install したら pg の箇所でエラーが発生したのでメモ 環境 Mac OS Catalina (10.15.6) ruby 2.7.1 (rbenv) postgresql を brew install 済み エラー内容 $ bundle install # … 略 Installing pg 1.2…

GAS SpreadSheet range 「Exception: 範囲の行数には 1 以上を指定してください。」にハマる

1行目にカラム名を入れてある SpreadSheet で1行目以下を使った GAS を書いていてうまく動作してなかったメモ。 エラー箇所を探す Slack連携で使っているスクリプトだったので、各関数をまずは単独で動くモックのスクリプトに変換しました。 次に怪しい箇所…

MySQL CREATE TABLE timestamp 型のカラムの default 値を NULL にしようとしてハマる

Docker の MySQL で build 時にデータベースとテーブルを作ろうとしていたのですが、エラーが発生してコンテナが起動できなくなっていました。 原因を調べてみた結果どうやらテーブル作成でエラーが出ていたのが原因でした。 MySQL v5.7 エラーの発生した CR…

JavaScript axios エラー時にもレスポンスを使いたい。

axios で API に接続している時 status 400 などでレスポンスが返ってくると catch 節で取得できるのですが、その際にも API から返される値を使いたい時のメモ e.g. status 400 が返される時 API (Express) router.post('/api', (req, res) => { // … 処理 …

Git 削除されたファイルのログをみたい

チーム開発とかしてると、参照したいファイルが削除されてたりとか結構あります。 GitHub でも削除されたファイルは探すのが困難なので、logからコミットハッシュを探してきて最終状態や削除された経緯を探したい。 git log -- -- キーワードに続けて探した…

JavaScript axios Content-Type の設定にはハマる

axios で express のAPI にリクエストを投げていて何故かうまく値が取れなくてハマってしまったのでメモ。 Express のAPI const express = require('express'); const app = express(); const Joi = require('@hapi/joi'); const validation = (data) => { c…

React SPA docker 上の API にアクセスで CORS が出た!! にハマる

Docker で構築したバックエンド (localhost:3000)に Docker に積んでいない create-react-app (localhost:8080) で作成した React アプリからアクセスしようとしたら次のようなエラーにってしまいました。 Access to XMLHttpRequest at 'http://localhost:30…

React create-react-app npm start で起動する localhost のポート番号変えたい

creat-react-app, react-scripts で作った React の開発環境で react-scripts start (npm start) で起動する localhost のポート番号を変更したい時 .env ファイルにポート番号の指定を書く .env PORT=8080 これで $ npm startすると localhost:8080 でアプ…

JavaScript catch したエラーをエラーの種類で別の処理にしたい

1つの catch 節でエラーをキャッチして、エラーの種類で処理を変えたい場合のメモ。 e.g. function verify(token) { try { // 期限切れの場合 `TokenExpiredError` の例外が発生 const verified = jwt.verify(token, process.env.TOKEN_SECRET); // revoke …

JavaScript Express async function の UnhandledPromiseRejectionWarning にハマる。

Express で簡単な JWT の API を作って実験していた際に middleware を async function に変更したら UnhandledPromiseRejectionWarning が出るようになってハマってしまったのでメモ UnhandledPromiseRejectionWarning になったコード // router const rout…

PHP 定数を文字列展開させたい。

久々に PHP 書いてます。 なんも覚えてねぇ… PHP は定数は文字列展開できない。 PHP " (ダブルコーテーション) な文字列なら下記のように変数を文字列展開できるかと思います。 "INSERT INTO users (id, name …)"; 定数は展開されない… …

Mac OS Catalina PHP インストールにハマる (phpenv諦めてphpbrew)

Mac OS Catalina にアップデートして Composer を使おうとしたら動作しなくなっていました… ( Catalina 開発トラブル多すぎない?) PHPを再インストールしたら動くという情報を目にしたので、折角なので phpenv でインストールをしようとしたのですが、永遠…