JavaScript
creat-react-app, react-scripts で作った React の開発環境で react-scripts start (npm start) で起動する localhost のポート番号を変更したい時 .env ファイルにポート番号の指定を書く .env PORT=8080 これで $ npm startすると localhost:8080 でアプ…
Redis との接続 const Redis = require('ioredis'); const redis = new Redis(); // docker などで動かしている場合は port host を指定する const redis = new Redis(6379, 'redis'); // 使用する db を指定する場合は、 オプションを使用 const redis = ne…
JWT token の勉強をしていて、Redis で token を管理しているという話を教えてもらったので Redis を使うだけの環境を作ってみていました。 Docker で環境を構築します 構成 / |- /api (express) | |- Dockerfile |- /redis |- docker-compose.yml docker-co…
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…
ゲームとか音楽プレイヤーを作っていて requestAnimationFrame でループ処理をしていたのですが、FPS や BPM で処理を実行できるようにしたかったのでやってみてたメモ requestAnimationFrame 基本のループ let requestID; function loop(now = 0) { // 処理…
自動整形してるののメモ 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…
state を扱っていると配列の操作をする機会が多いのですが配列から値を取り出す時の slice と splice 似てる。 Array.prototype.slice arr.slice([begin[, end]]) slice は取り出す位置 (begin) から終了位置 (end) までの要素を取り出す。 戻り値は取り出さ…
setTimeout を同期的に使いたい場合、setTimeout は Promise を返さないので async / await を使って呼び出したい場合は Promise を返す関数にしてやればOK Promise を返し内部で setTimeout する関数にすればOK const sleep = (callback, delay = 1000) => …
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…
delete メソッドとかで Array.filter みたいな感じで、 state の中から特定のプロパティを削除して新しいオブジェクトを返したい。 1. Object.assign() で オブジェクトをコピーして delete JavaScript の delete 演算子は破壊的なので、 Object.assign() で…
React の useReducer を使うとき action ごとの処理を分けるのに switch 文を使うことが多いですが、複数の case 内で同じ名前の変数を使いたい時 const で定義するとハマってしまうことがあります。 case 内で同じ名前の変数を const で定義するとエラーに…
Debounce で値を反映したいコンポーネントを作っていて、setTimeout 内で event から渡された event.target を使おうとしたら null になっていてエラーになり、なんもわからん… になってハマっていたのでメモ event.target が null になるコード useDebounce…
運用している blog にリンク切れのものがそこそこあるので、リストアップして欲しいという依頼を受けてやってみた知見のメモ 方針 記事 URL から記事内容を取得 記事内から a タグを取得 a タグの リンク先にアクセスしてリンク切れになっているものをファイ…
create-react-app 内で使われている react-scripts を使って必要な部分だけを自分で設定する react プロジェクトを作成することができます。 方法としては 1. 必要なパッケージのインストールとファイルの作成 $ npm init $ yarn add -D react-scripts $ yar…
再帰内で使う値を先に生成して使いたかったので、再帰関数をカリー化 したいと思ってやってみたのでメモ。 カリー化 (currying)とゎ？ 1. カリー化した callback 関数を再帰関数に渡すパターン const curry = (func, validFunc) => { return (arg, callback)…
今スクールに通っていて、JavaScriptで何か作れって課題の一貫で React の学習も兼ねて じゃんけんアプリ 作ったので、折角だから Netlify で公開してみました。 JAN=KEN GOGO! ５歳児らしいネーミングです!! Netlify 「Get start for free」 で GitHub アカ…
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-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 ファイルをオ…
build したディレクトリを削除したいとか rm -rf コマンドを npm script で呼ぶ # package.json "scripts": { "cleanup": "rm -rf build" } rimraf を使う rm コマンドがない環境だと上記は使えないので $ npm install --save-dev rimraf # package.json "sc…
環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…
create-react-app を使わずに自分で独自に作成していたプロジェクトにテストとして Jest を導入したけど、テストコマンドを走らせると SyntaxError: Unexpected identifier が出てハマってしまったのでメモ。 構成 |- /tests | |- setup.enzyme.js | |- App.…
