今日のハマったこと

シェルスクリプトで受け取った引数をnodeに渡すときダブルクオートで囲わないと引数が壊れる

タイトルがわかりにくすぎる。 なに cliツールを書いている。 bin/cli はシェルスクリプト。 bin/cli hogefuga --arg='volume 30' みたいなのコマンドを打ったときこのシェルスクリプトを経由して ./script.js $@ $@ の記述で、nodeのスクリプトに引数を横流…

2021-03-15

テスト書いてて、なんでかmockしてるメソッドのところで Cannot read property 'apply' of undefined って言われて困っていた。 散々悩んでよく見たら write が wrtie になっていただけだった。 しょうもなさすぎで声も出んとはこのこと。

yarn workspacesのnoHoistがうまくされないときあるいはnoHoist設定の罠

yarn workspacesでmonorepoを構成しているときに特定のpackageだけhoistの対象外にしたいというときがある。 そういうときにどうすればよいかというと、noHoistオプションを単に使えばいいのだけどなぜかちゃんと書いてあるつもりなのにnoHoistが効かなくて…

yarn workspacesのnoHoistがうまくされないときあるいはnoHoist設定の罠

yarn workspacesでmonorepoを構成しているときに特定のpackageだけhoistの対象外にしたいというときがある。 そういうときにどうすればよいかというと、noHoistオプションを単に使えばいいのだけどなぜかちゃんと書いてあるつもりなのにnoHoistが効かなくて…

Reactコンポーネントをsvg要素の内側に表示する

SVGの内側にコンポーネントを表示させようとして、やったらハマった。 普通にできるものだと勘違いしていたけれど、SVGの内側にはSVGが描画できるタグしか通常描画できない。なぜならSVGはSVG空間だから…。 結論 foreignObjectを使う。 developer.mozilla.or…

TypeScriptで"ユニオン型あるいはなにかしらの型"を表現する方法について

型定義書いていて『Union型に当てはまる場合はそのどれかだが、どれにも当てはまらなかったら"この型"』みたいなものを書きたくなるときがある。 例えば type UnionA = 'tarou' | 'jirou' | 'saburou' というUnion型があって、このUnionA型に当てはまらなか…

create-react-appのv2で開発しているページで読み込み時に一瞬CSSが適用されていないページが描画される問題(FOUC)が起こる

タイトルが長いシリーズ いつからかCRA2で開発しているページの読み込み時に一瞬スタイルが適用されていない素のHTMLのページが見えてチラつく現象(FOUC)が起こって困っていた。 v2.1.6を待つ github.com Issueあった どうやらv2.1.3までは起こってなかった…

fish-nvmだけ使ってたらenv: node: No such file or directoryと怒られた

気づくまで fishシェル環境にするついでにnodebrew使うのをやめてnvmに移行した。nvmはそのままでは使えないので自分はfish-nvmを使っていた。 ふとしたときからVSCodeのGit連携機能が使えなくなってしまったり、ターミナルでwhich nodeとかやってもenv: nod…

fishシェルでrbenvのPATHを通す

zshからfishに移行していて、rbenvの移行で手こずったのでメモ 結論 fisher rbenv は使わない このプラグインメンテ止まってるっぽい ので、公式のreadmeに従って ~/.config/fish/config.fish に # rbenv set -x PATH $HOME/.rbenv/bin $PATH status --is-in…

.envファイルで配列ライクな環境変数を持ってJSでArray展開する

3行 .envファイルで 配列ライクに環境変数を持って JSで配列として展開したい .env書く CLIENT_ORIGIN='http://localhost:3000 http://192.168.0.99:3000' localhostとIPアドレスの2種類を持った環境変数を例に 文字列で半角スペース空けでもつ。 これをJSで…

TypeScriptのmapped typesでネストされた型もすべてオプショナルにする

partial<T> TSのmapped typesを利用して提供されている便利な型partial<T>がある type Partial<T> = { [P in keyof T]?: T[P]; }; これが提供されているので 例えば以下のようなfoo型のプロパティをすべてオプショナル(?:の形式)にしたかったらこうすればよい。 inter</t></t></t>…

axiosのparamsに階層の深いネストしたオブジェクトを渡したい

表題どおり paramsにネストの深いオブジェクトを設定してGETメソッドでサーバーとやりとりしたかった。 普通にやるとJSONにされるのでサーバーで受け取ったとき string になってしまってオブジェクトとして取り扱えない。 qsを使ってparamsSerializerに設定…

TypeScriptのコンパイル時に『Cannot find name 'EventListenerOrEventListenerObject'.』と怒られる

Firebase Cloud FunctionsをTSで書いて使おうとしていて $ firebase init functions したあとにとりあえずHello Worldしようと思ってハマった。 以下のgetting-startedをのindex.tsをコピーして github.com $ firebase deploy --only functions したところts…

Reactでフォームの外側あるいは別コンポーネントのbuttonからsubmitする

FormikというReactのフォームライブラリがあり、それでFormを組んでいてハマったのでメモ。 github.com 欲求 Formの中にButtonを配置せず、『外側にサブミットボタンを配置したい』 ようはフォームの外側にonSubmitなボタンコンポーネントを作って、それを押…

jsdomを使ってテストしていたらたまに[Symbol(SameObject caches)]と言われてテストが落ちる

なんだか、とりとめもない、解決したけど結局よくわからなかったことを書いておく。これはメモ書きです。 jsdomを使ってDOMの様子を再現するテストを書いていてハマった。テストライブラリはAVAでやっているのでAVAを例に書く。 こんな感じのことを言われた …

jsdomを使ってMutationObserverをテストする方法

github.com JavaScriptでブラウザのAPIを使ったコードをテストするときはjsdomを使うと思う。大抵のDOMのAPIは揃ってるのでテストできるけどMutationObserverをテストしようとしたところjsdomはMutationObserverを持ってないのでテストできなくて困った。「M…

CSS variablesで変数をマイナス値で出力したい

(当記事は2018-01-20現在の情報です、仕様が変わって情報が古くなっているかもしれません) CSS variablesを触っていて、定義した変数の値をマイナス値(negative value)で扱いたかった。 こんな感じでいけるだろうと思ったが… :root {--block-position-top: 5…

JavaScriptでオブジェクトの値(value)を条件で絞り込んで新規オブジェクトを作りたい

タイトルわかりにくいシリーズ 元オブジェクトから条件に合うvalueのものだけを絞り込んだ新規オブジェクトを作りたい。 const dataObject = { hoge: 'hoge', fuga: 'fuga', piyo: 'piyo', empty: '', none: '', gogo: 'gogo' } // ↓ 空文字('')じゃないもの…

Array.prototype.map()で非同期処理する方法

Async/Await使ったりしている中でハマった。 結論 ここを読む。 2ality.com そしてPromise.allでラップする。 async function AsyncFetch(urls) { const fetchArray = urls.map( url => fetch(url) ); return Promise.all(fetchArray); } こういう感じ。 Fet…

JavaScriptのFetch APIで返ってきたものをDOMとして扱う

結論から fetch(url) .then(res => res.text()) .then(text => new DOMParser().parseFromString(text, "text/html")) 返ってきた値にnew DOMParser().parseFromString(text, "text/html"))する!! 経緯 XMLHttpRequestと似たものにFetchAPIがある。 develo…

babel+webpackな環境でESM(import構文)とCJS(module.exports構文)を混在させると『Cannot assign to read only property ‘exports’ of object ‘#<Object>’』と怒られる

前提 babel6以降 babel-plugin-transform-runtime をつかってポリフィルしている webpack2以降 自分がこういう構成なので…ほかにもなにか条件下あるかもしれない エラー内容 Cannot assign to read only property ‘exports’ of object ‘#<Object>’ webpackのコンパイ</object>…

gulp+Browsersyncな開発環境でwatchしてリロードは効くのに内容が反映されない、キャッシュを切ると反映されるという現象が起きた

めっちゃ特定条件下だけどうまく動かなくて困っていた。 Local by Flywheel gulp: v3.9.1 browsersync: v2.18 gulpベースのWPの開発キットを使っている。Local by Flywheel(以下Local)でWPのサイトをプロビジョニングして、gulpベースの開発キットで.phpをwa…