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

React localhost でも https で動かしたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript Express async function の UnhandledPromiseRejectionWarning にハマる。

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

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

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

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

VS Code の予測変換割と優秀なのですが、時々それぜんぜん違うねん。ってのが表示されることがあります。 そこで変換しないつもりで改行のエンターキーを押したり、JavaScript だと . とかを入力すると予測変換の1つめが入力されてしまいｲﾗｯとすることが時々…

VS Code エンターで予測変換候補が入力されてるの止めたい。

自動整形してるののメモ ESLint install $ yarn add -D eslint eslint: ^7.1.0 generate config file 対話式で設定ファイル .eslintrc.js を作成できる $ yarn eslint --init ? How would you like to use ESLint? ❯ To check syntax and find problems ? Wh…

ESLint + Prettier で JavaScript と CSS を自動フォーマットするぞ

React で form を作っていたら次のような Warning が発生しました。 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide …

React Warning: A component is changing an uncontrolled input になったとき

create-react-app, react-script で作られた React application は内部で dotenv が使われていて、.env で設定した値には、process.env 経由でアクセスができる。 ただし値にはREACT_APP_ のプレフィックスが必要 REACT_APP_ から始まらない値は React appli…

React create-react-app したアプリ内で .env を使いたい

export default Foo されたモジュールを as を使って import したいときのメモ export default されたオブジェクト名を指定するとエラーになる export の場合は問題ないが、export default の場合はエラーになる export // components/Cunter.js export fun…

JavaScript export default されたものを as で import したい

React の useReducer を使うとき action ごとの処理を分けるのに switch 文を使うことが多いですが、複数の case 内で同じ名前の変数を使いたい時 const で定義するとハマってしまうことがあります。 case 内で同じ名前の変数を const で定義するとエラーに…

JavaScript switch 文の中でも const したい！

Debounce で値を反映したいコンポーネントを作っていて、setTimeout 内で event から渡された event.target を使おうとしたら null になっていてエラーになり、なんもわからん… になってハマっていたのでメモ event.target が null になるコード useDebounce…

React hooks event.target を setTimeout 内で使おうとしたらnullなんだけど、にハマる

create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。 方法としては 1. 必要なパッケージのインストールとファイルの作成 $ npm init $ yarn add -D react-scripts $ yar…

React npm init + react-scripts で react プロジェクトを作った時の罠

yarn start してホットリドーロしてるターミナルを閉じてしまった。 止める npm script も作ってなかったので、ブラウザのタブを落としても処理が実行されて続けてしまう状態になってしまいました。 owata PID を探して kill する ターミナルでプロセスを探…

npm run してるターミナルを閉じてしまった時の対処法

JSX で <pre> の内容を書いていてもそのままでは、改行が消えてしまいます。 function Pre() { return ( <pre> Hoshimiya Ichigo Kirija Aoi Shibuki Ran </pre> ); } 👇出力: 改行は無視される <pre>Hoshimiya Ichigo Kirija Aoi Shibuki Ran</pre> JavaScript の Template literals `{}`</pre>…

React JSX の <pre> の中で改行したい

React-router-dom を使うと簡単に SPA のルーティングができたのですが、スクロールした状態でページが切り替わると元のスクロール量が残り切り替わったページもスクロールされた状態で描画されしまう問題に直面ました。 windowのスクロールは、VDOMの世界外…

React Hooks React-router-dom ページ遷移した時にページのスクロール位置をリセットしたい

React-router-dom を使っナビゲーションを作っていた際に下記の warning が表示されてしまいました。 React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spe…

React-router-dom の <Switch> で React does not recognize the `computedMatch` prop on a DOM element. な警告が出る

react-scripts で作成したプロジェクトで init で下記のようなオプションを選択して .eslintrc.js を作成しました。 $ yarn eslint --init ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your projec…

ESlint module.exports が no-undef なエラーになるとき

SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…

React create-react-app したプロジェクトで inline-svg を使いたい