Tips
久しぶりに 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…
create-react-app で作った React アプリで yarn start での開発時と yarn build でビルドした時に使う環境変数を切り替えたい。 .env のファイル名で自動的に切り替わる create-react-app で作られたファイルにある .gitignore を見ると次のように設定され…
一度 AWS に deploy してた Serverless 化したアプリを再デプロイしようとしたらエラーになってしまったのメモ。 $ sls deploy で再デプロイしようとしたらエラーになってロールバックされてしまった。 $ sls deploy # … Serverless Error -----------------…
Fn + Tab で Capslock / Capslock の解除が出来る。 Fn + Tab おわり。 使ってるお安い HHKB が時々 Capslock になった状態で Shift キーが押されたままになってしまう症状が出る。 Shift が押されたままの状態が解除できないから Capslock も解除できなくて…
Express を TypeScript で作成していて開発中は nodemon で ts-node を使って変更を監視してホットリロードさせたかったのですが、ファイル変更が watch されない問題にハマったのでメモ。 構成 /project_root |- /src | |- index.ts |- package.json |- nod…
VS Code に入れてある ESLint 拡張が TypeScript ファイルの一行目で次のようなエラーを出てしまうことがありました。 Parsing error: Cannot read file '/users/kikiki/MyApp/tsconfig.json'.eslint tsconfig.json が第一階層にないとこのエラーが出るっぽ…
create-react-app, react-scripts で作った React アプリを外部ライブラリやAPIの都合で localhost の時も https で動かしたい時のメモ .env に HTTPS=true を設定すればOK HTTPS=true のオプション付きで起動すれば localhost も https で起動できるようで…
別 PR で機能を取り込んだりしたマージコミットのあるブランチでマージコミットを残したまま rebase したい時のメモ git rebase -i だとマージコミットが消えてしまう e.g. $ git log --graph --oneline * f3084e4 (HEAD -> master) 時はきた！ * defc249 ね…
Python の venv で作成した仮想環境に入れない問題にハマったのでメモ venv Python v3.3 から標準機能として取り入れられた仮想環境 venv 内では pip でインストールされるパッケージが仮想環境ごと別にすることができる 仮想環境の作成 $ python -m venv te…
TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。 Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIterat</htmlmetaelement>…
Rails のプロジェクトのローカル環境を作っていて bundle install したら pg の箇所でエラーが発生したのでメモ 環境 Mac OS Catalina (10.15.6) ruby 2.7.1 (rbenv) postgresql を brew install 済み エラー内容 $ bundle install # … 略 Installing pg 1.2…
1行目にカラム名を入れてある SpreadSheet で1行目以下を使った GAS を書いていてうまく動作してなかったメモ。 エラー箇所を探す Slack連携で使っているスクリプトだったので、各関数をまずは単独で動くモックのスクリプトに変換しました。 次に怪しい箇所…
Docker の MySQL で build 時にデータベースとテーブルを作ろうとしていたのですが、エラーが発生してコンテナが起動できなくなっていました。 原因を調べてみた結果どうやらテーブル作成でエラーが出ていたのが原因でした。 MySQL v5.7 エラーの発生した CR…
axios で API に接続している時 status 400 などでレスポンスが返ってくると catch 節で取得できるのですが、その際にも API から返される値を使いたい時のメモ e.g. status 400 が返される時 API (Express) router.post('/api', (req, res) => { // … 処理 …
チーム開発とかしてると、参照したいファイルが削除されてたりとか結構あります。 GitHub でも削除されたファイルは探すのが困難なので、logからコミットハッシュを探してきて最終状態や削除された経緯を探したい。 git log -- -- キーワードに続けて探した…
axios で express のAPI にリクエストを投げていて何故かうまく値が取れなくてハマってしまったのでメモ。 Express のAPI const express = require('express'); const app = express(); const Joi = require('@hapi/joi'); const validation = (data) => { c…
Docker で構築したバックエンド (localhost:3000)に Docker に積んでいない create-react-app (localhost:8080) で作成した React アプリからアクセスしようとしたら次のようなエラーにってしまいました。 Access to XMLHttpRequest at 'http://localhost:30…
creat-react-app, react-scripts で作った React の開発環境で react-scripts start (npm start) で起動する localhost のポート番号を変更したい時 .env ファイルにポート番号の指定を書く .env PORT=8080 これで $ npm startすると localhost:8080 でアプ…
1つの catch 節でエラーをキャッチして、エラーの種類で処理を変えたい場合のメモ。 e.g. function verify(token) { try { // 期限切れの場合 `TokenExpiredError` の例外が発生 const verified = jwt.verify(token, process.env.TOKEN_SECRET); // revoke …
Express で簡単な JWT の API を作って実験していた際に middleware を async function に変更したら UnhandledPromiseRejectionWarning が出るようになってハマってしまったのでメモ UnhandledPromiseRejectionWarning になったコード // router const rout…
久々に PHP 書いてます。 なんも覚えてねぇ… PHP は定数は文字列展開できない。 PHP " (ダブルコーテーション) な文字列なら下記のように変数を文字列展開できるかと思います。 "INSERT INTO users (id, name …)"; 定数は展開されない… …
Mac OS Catalina にアップデートして Composer を使おうとしたら動作しなくなっていました… ( Catalina 開発トラブル多すぎない？) PHPを再インストールしたら動くという情報を目にしたので、折角なので phpenv でインストールをしようとしたのですが、永遠…
