Tips
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 でインストールをしようとしたのですが、永遠…
VS Code の予測変換割と優秀なのですが、時々それぜんぜん違うねん。ってのが表示されることがあります。 そこで変換しないつもりで改行のエンターキーを押したり、JavaScript だと . とかを入力すると予測変換の1つめが入力されてしまいｲﾗｯとすることが時々…
自動整形してるののメモ 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…
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 …
create-react-app, react-script で作られた React application は内部で dotenv が使われていて、.env で設定した値には、process.env 経由でアクセスができる。 ただし値にはREACT_APP_ のプレフィックスが必要 REACT_APP_ から始まらない値は React appli…
export default Foo されたモジュールを as を使って import したいときのメモ export default されたオブジェクト名を指定するとエラーになる export の場合は問題ないが、export default の場合はエラーになる export // components/Cunter.js export fun…
React の useReducer を使うとき action ごとの処理を分けるのに switch 文を使うことが多いですが、複数の case 内で同じ名前の変数を使いたい時 const で定義するとハマってしまうことがあります。 case 内で同じ名前の変数を const で定義するとエラーに…
Debounce で値を反映したいコンポーネントを作っていて、setTimeout 内で event から渡された event.target を使おうとしたら null になっていてエラーになり、なんもわからん… になってハマっていたのでメモ event.target が null になるコード useDebounce…
create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。 方法としては 1. 必要なパッケージのインストールとファイルの作成 $ npm init $ yarn add -D react-scripts $ yar…
yarn start してホットリドーロしてるターミナルを閉じてしまった。 止める npm script も作ってなかったので、ブラウザのタブを落としても処理が実行されて続けてしまう状態になってしまいました。 owata PID を探して kill する ターミナルでプロセスを探…
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-router-dom を使うと簡単に SPA のルーティングができたのですが、スクロールした状態でページが切り替わると元のスクロール量が残り切り替わったページもスクロールされた状態で描画されしまう問題に直面ました。 windowのスクロールは、VDOMの世界外…
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-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…
SVGな画像を扱う時に、CSSやJSで色などをコントロールしたい場合、inline-svg にするのが扱いやすくて良いです。 create-react-app で作成した React のプロジェクトで eject せずに inline-svg を使えるように出来たのでメモ。 環境 "react": "^16.13.1" "r…
React のプロジェクトに ESlint + Prettier でフォーマットする仕組みを入れたのですが、npm script で lint を走らせようとしたら、パターンマッチしないというエラーが出て少しハマったのでメモ 問題の npm script // package.json "scripts": { "lint": "…
Maps JavaScript API を使って google map を作成していて、オリジナルの Marker (ピン) を作成していました。 SVG 画像を使えれば問題がなかったのですが、諸事情で png で Marker を作成することになったのですが、retina ディスプレイだと荒くなってしま…
API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ JavaScript で .env を使う loadenv を使うと .env ファイルをオ…
TAG の作成 $ git tag -a <tag_name> # コメント付きで作成 $ git tag -a <tag_name> -m 'comment' TAG の確認 $ git tag TAG をリモートに push する $ git push origin <tag_name> # 一度にpush $ git push origin --tags TAG の削除 $ git tag -d <tag_name> # リモートのタグを削除 $ git push or</tag_name></tag_name></tag_name></tag_name>…
パッケージ名が被ってて使えなかったとか、名前がイケてないとか、GitHubのリポジトリ名を変えたいことが時々あります。 リポジトリ名の変更自体は GitHub のサイト上からカンタンにできるのですが、変更すると local のパスが変わってしまうので、パスを合…
複数人で同じブランチに手を入れていて、手元のブランチで変更をコミットして push しようとしたらリモートのブランチが force push とかで先に進んでそのまま push できない状態になっている時の対処方法のメモ --rebase オプションを付けて pull する $ gi…
text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう！
`$ git rebase ` で現在のブランチを親ブランチの先頭 (HEAD) から生えている状態にすれば fast-forward な merge ができるようになる。 GitHub の様なリモートリポジトリの場合は `$ git rebase origin/master` とすればOK
Files: Insert Final Newline にチェックを入れる ツールバー > Code > Preferences > Settings で設定を開く files.insertFinalNewline で検索 チェックボックにチェックを入れる Files: Insert Final Newline [x] When enabled, insert a final new line a…
最初のコミットが rebase しづらいから最初のコミットを空コミットにしたかったり、CI 回すテストしたいから空コミットで push したいような時のアレ。 --allow-empty オプションを使う $ git commit --allow-empty -m :sparkles: (完) ノンプログラマーなMa…
数値で計算しているシートから QUERY や IMPORTRANGE を使ってデータを取ってきて、SELECT文で必要な絡むだけにした上で単位を付けたりフォーマットして表示したい。 元のデータ例 シート名 販売目標 A B C D E 1 エリア 消費量 (kl, 2016) 目標売上量 (kl) …
