知見

チームについての私見を書いた

経験から得た物事の芯を書き出すという試みをしている。 チームのリーダーをやったり、エンジニアリングマネージャーをやった経験から今回はチームについて。 scrapbox.io 最近は思考をScrapboxに書き出している。

Playwrightで2FA(二要素認証)が必要なサイトをテストする

2FA: two-factor authentication = 二要素認証/2要素認証 この記事では以下、2FAで記載する。 E2Eとセキュア問題 E2Eテストするサイトがログインが必要かつ2FAが必須というサイトが当たり前になりつつある。 で、E2Eテストするときにヘッドレスブラウザ上で…

React hooks エラーハンドリング やりかた

タイトルが雑だし、こんな記事を書くのも変な話だけど、意外と書かれているのが少ない気がしたので書いておく。2023年以降になったらプラクティスがまた変わってるかもしれないけどそれはそのとき。 久しぶりにカスタムHooks書いていて、「Hooksの内部処理な…

他所のサイトのDOM elementに生えているEventListenerを調べる方法

人様のフロントエンドのDOMをいじるのが好きで、Listenerを調べたくなるときがある。 やり方知らなかったのだけど、ググったらあった。 stackoverflow.com Chrome限定になるけど謎のAPIがdevtoolsに生えていて、これで click だの mousemove だのリスナーが…

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

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

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

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

直接依存していない内部で利用しているライブラリが脆弱性を抱えているときにyarnで手動対応する方法について

タイトルが長い。しかもパッとわからない。 ので以下のストーリーを理解されたい。 ストーリー 脆弱性があると言われている GitHubでセキュリティアラートをONにしていると依存しているライブラリに脆弱性があったときにこんな感じに教えてくれる。 そしてDe…

Sentryにエラーレポートが送信される手前でなにかやりたい、あるいは200KB制限によるレポートロストの回避

タイトルどおり。 アプリケーションでエラーが出た場合にSentryにエラーレポートを飛ばしていたのだけど、送信する手前でなんかごにょごにょやりたくなったので調べた。 beforeSend Sentryのドキュメント、ものすごく目的のものを見つけづらい。 docs.sentry…

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

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

JavaScriptのオブジェクトのキーを角カッコ[brackets]で囲う記法について

オブジェクトのキーが [ ] ←これ に囲われている 見かけたことはありますか?僕はあります。 const obj = { [a]: 'foo' } こういうやつ たまに見かけるけど頻繁には見ないのであんまり書くことも少なくて、ついどういう挙動だったか忘れてしまうシリーズ。 …

オブジェクトの特定プロパティが両方存在するかチェックするときの速度について調べていた

経緯 github.com react-loopsというHooksを使ってJSXでForループをやるというアプローチのライブラリが出ていたので見ていた。 実装どうやってるんだろうな〜って思ってソース見てたらなんかPropsオブジェクトのプロパティをチェックしていて、あんまり見な…

React hooksで再レンダリングを防ぐためにイベントハンドラをメモ化するとハンドラの外側にある変数参照値もメモされてしまう問題について

タイトルが長い! 3行 useCallback(()=> ,[])とかuseEffect(()=>,[])みたいにハンドラをメモる ムダな再レンダリングが起こるのを防ぎたい イベントハンドラ内で外部変数(例えばconst [state, setState] = useState()のstate)を参照する イベントが起こるた…

React Hooksのメモ化のための第二引数の配列にオブジェクトを突っ込んだときの挙動について

タイトルが長い。 useEffectとかuseMemoとかの第一引数に渡した関数を発火させるかどうかの条件指定とも言える第二引数の配列にオブジェクトをまるごと入れたらどうなるのか というはなし。 勘違いしそうなので最初に説明しておくと、 useMemo(()=> someFunc…

@typescript-eslintを使ってTypeScriptでもESLintする@2019

MSのTSチームがESLintを推進させ始めた まだ完璧ではないがだいぶ安定してきてそろそろTSでも現実的にESLintできるようになってきた気がする プロジェクト単位で**ESLintでTypeScriptの面倒をみる方法 typescript-eslint @typescript-eslint/parser https://…

TypeScriptでみかける"is"というキーワードについて

TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに const isString = (arg: any): arg is string => typeof arg === "string"; のように「引数 is 型」と書かれたものを見かける。 このコードは引数に…

yamlのanchorで継承(extend)して繰り返し書いている部分を減らすメモ

JSばっかやってて.yml書くことはあまりないのだけど、CircleCIのコンフィグとかはyaml記述なので書いていく必要がある。 それで、CircleCIのコンフィグを書いていると、pathとか、複数のjobでそれぞれ同じようなことばかり書いている部分があってDRYじゃない…

TypeScriptで関数の返り値を型に変換する(ReturnTypeを使う)

あるfunctionが返す値から型を作りたかった。 たとえば const foo = ()=> { return { foo: 1, fooo: 2, foooo: 3 } } という関数があって、返り値のオブジェクトの内容で型を定義したかった。 この返り値を直接活かして型に変換して type Foo = { foo: numbe…

ターミナルでBrace(波括弧)を展開する

あいかわらず自分はfish-shell使っていて、よくわかってないのでよく困ったりしている。 きょうはBrace…波括弧{}の展開をしたかったけどfish: Mismatched bracketsといわれて困っていた。 どういうことをやりたいのか $ echo x{boy, girl, man, lady} xboy x…

.(js|ts)拡張子のReactファイルだとVS Codeでシンタックスハイライトや補完が効かない問題、あるいは.(jsx|tsx)で書くべきか否か

タイトルが長い。 VS CodeでReact書いてるとき、ファイル拡張子が.jsではシンタックスハイライトや補完が効かない問題がある。.jsx にするとちゃんと補完が効いてくれるようになって助かる。 でもみんながみんなVS Code使ってるわけじゃないし、GitHubみてる…

VS Codeでcommand+D(⌘+D)で文字選択しすぎてしまったとき戻る方法

エディタで⌘+Dで単語選択するけど、同じ単語5つのうち4つまでを選択したいような場面がたまにある。でも⌘+D押しすぎてしまって、5つ全部選択してしまった〜みたいなことが起こっていて地味に困っていた。 カーソル操作のUndoをやりたい 自分は主にVSCodeを使…

https時代のgitアカウントを使い分ける方法のメモ

時代はhttps https://help.github.com/articles/set-up-git/ GitHubではhttps推奨になっているし… httpsのほうがclone速度はやいし… まとめに書くけどhttpsにすると覚えることが1個だけでラク SSHでアカウントを使い分けるときはどうしていたか ~/.ssh/confi…

react-virtualizedでTwitter/FBみたいな無限スクロールのタイムラインをつくる知見

を書いたんですよ qiita.com DEMO そういうわけでなんとなくこっちにもリンクを貼っている次第です。 余談 モバイルアプリによくある引っ張って更新するPulltoRefreshという文化があるんですが、アレ実装しようとしたらRVの仕様に足元を取られてとにかく厳し…

Node.js Expressのエラーハンドリング&next()の知見

主にExpress v4でのはなし。 Expressでのエラー処理全然わからなくて困っていたけど、ちょっとわかってきた気がするのでメモついでに書く。 Expressのミドルウェアのだいたいの挙動はわかっている くらいの人向けを想定して書いている。 便利なモジュール bo…

npm link なにが便利か

tl;dr 手元で開発中のモジュールをローカルの別のプロジェクトで使いたいときに便利 いまあなたは『my-great-module』というすごい便利なモジュールを作っているとする すごい便利なモジュールなのだけど一部未完成なのでnpmにパブリッシュするのはまだため…

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…

ESLint(あるいはTSLint)とPrettierを併用する

[追記:] TypeScriptでESLintを使う方法も書きました tech-1natsu.hatenablog.com TSLintではなくESLintを使いたい方はこちらもあとで読んでみてください。 なお JS with ESLint TS with TSLint この構成をお求めの方は当記事(下記)です。 Prettier導入するに…

最近書いたES2015+を駆使したJavaScriptのFizzBuzz③

tech-1natsu.hatenablog.com ↑前回 前回、とにかく短縮という気持ちでやっていたけど、わかりやすさという面を考慮すると全然わかりにくかったので、可読性も意識してちょっと変えた。 可読性考慮したFizzBuzz // range関数 const range = (start, end) => […

最近書いたES2015+を駆使したJavaScriptのFizzBuzz②

昨日書いたFizzBuzz、今日も書いて改善した。 これは昨日のFizzBuzz。 function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(…

最近書いたES2015+を駆使したJavaScriptのFizzBuzz

function fizzbuzz(num) { return num%3 === 0 ? num%5 === 0 ? 'fizzbuzz!' : 'fizz~' : num%5 === 0 ? 'buzz~' : num } // range関数 function range(start, end) { return [...Array(1 + end - start)].map((v, i) => start + i); } const oneHundredArra…