かもメモ

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

TypeScript Object を Object.keys() を使ったループの型エラーにハマる

TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで co…

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

TypeScript Readonly と as const

TypeScript なんもわからん… Readonly と as const がよく判らなかったから調べたメモ Readonly TypeScriptの型システムでは、インターフェース上の個々のプロパティをreadonlyとしてマークすることができます。これにより、関数的に作業することができます(…

Docker AWS DynamoDB local 環境作った

サーバレスの Lambda 入門しました。 ほぼPythonだけでサーバーレスアプリをつくろう (技術の泉シリーズ(NextPublishing))作者:長谷場 潤也,安田 譲発売日: 2019/08/30メディア: オンデマンド (ペーパーバック) この本によると AWS の Lambda は実行ごとに…

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

React TypeScript useState に型を設定したい

React の useState で返される state の型を指定したい useState<型>(initial value) で state に型を強制できる type IdolType = 'cute' | 'cool' | 'pop' | 'sexy'; const [type, setType] = useState<IdolType>('cute'); setType('foo'); // => Argument of type '"</idoltype>…

さくらのレンタルサーバーに直接 Laravel をインストールする

こちらの Laravel の環境をつくる勉強会に参加してしました。localで作った環境を さくらのレンタルサーバー にアップするというものだったので、ssh でサーバーに入って直接環境を作れないか試して見たメモ ssh でさくらのレンタルサーバーに接続する方法は…

Docker nginx + PHP7 + MySQL8 で Laravel 触れる環境つくってみた

構成 /-- docker-compose.yaml |- /docker | |- /php | |- /nginx | |- /mysql | |- /data # MySQLのデータの永続化 |- /laravel # Laravel アプリがインストールされるディレクトリ 使い方 https://github.com/KiKiKi-KiKi/docker-laravel からコードをDLし…

React axios でファイルアップロードしたい

フロントを React バックエンドを PHP で作成していて、ファイルのアップロードを試してみたのでメモ File を扱うコンポーネント React では、<input type="file" /> は値がユーザだけが設定できるものでありプログラムでは操作できないため、常に非制御コンポーネントです。 cf. …

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…

PHP 7 変数に値がなければデフォルト値を設定したい。

PHP

PHP で変数のデフォルト値を設定したい時 false の場合デフォルト値を使う 'default' $var = false ?: 'default'; // => 'default' $var = 0 ?: 'default'; // => 'default' $var = '' ?: 'de…

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

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

Docker Nginx + PHP + MySQL + Redis な環境作った。

Docker 一年生なので、雰囲気で作っています。 構成 /-- docker-compose.yml |- /web | |- /html … web root |- /mysql | |- Dockerfile | |- my.conf | |- /init | |- 1_dd.sql … DB 初期化 |- /nginx | |- nginx.conf | |- /log | |- access.log | |- erro…

生PHPで application/jsonで送られたデータを取得したい

Content-Type application/json で送られてくるデータを生 PHP で取得する場合のメモ フレームワーク使ってたら、この方法を使うことは無さそうだけど、メモとして… こんな感じのフロントから送られるデータを扱いたい const data = { email: 'example@examp…

JavaScript (SPA) PHP axios でフォームデータを送る時に気をつけること

$_POST や filter_input でデータを取得しているようなPHPのバックエンドにフォームデータを axios で送信する時 Content-Type を application/x-www-form-urlencoded にするだけでは上手くいきません。 ‍♀️ Content-Type: application/x-www-form-urlencode…

PHP 名前空間 (namespace)付きのメソッドを可変関数 (文字列) で呼び出したいハマる

PHP

PHP で FastRoute を使って API のモックを作っていていました。 cf. GitHub - nikic/FastRoute: Fast request router for PHP addRoute('GET', '/api', 'handler'); }); // Fetch method and URI from somewhere …

React Hooks forwardRef を使わずに子コンポーネントにrefを渡す

React で子コンポーネントを ref で触りたい時、forwardRef APIを使うように言われます。 例えばボタンをクリックしたらフォーカスされるインプットフィールドだとこんな感じ。 import React, { useRef } from 'react'; const InputField = React.forwardRef…

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

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

React 文字列を改行付きにして出力したい

APIからエラーの時、改行コード付きの文字列が返ってくるので、改行を <br> に変換して出力したかったのメモ 例えばこんな文字列を改行させて表示させたい const msg = "星宮いちご\n霧矢あおい\n紫吹蘭"; タグが入っていても文字列は文字列として出力される 改…

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 (node.js) ioredis 使ってみたのメモ

Redis との接続 const Redis = require('ioredis'); const redis = new Redis(); // docker などで動かしている場合は port host を指定する const redis = new Redis(6379, 'redis'); // 使用する db を指定する場合は、 オプションを使用 const redis = ne…

Expresss ioredis で Redis 入門した

JWT token の勉強をしていて、Redis で token を管理しているという話を教えてもらったので Redis を使うだけの環境を作ってみていました。 Docker で環境を構築します 構成 / |- /api (express) | |- Dockerfile |- /redis |- docker-compose.yml docker-co…

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…