メモ

最近はナレッジをScrapboxに書き溜めています

マネジメント・メンタリティ・広義のエンジニアリングに関するナレッジ類を最近はScrapboxのほうに書いている。 scrapbox.io EM(エンジニアリングマネージャー)の経験則や思考など、GPTに聞いたら出てくるような出てこないような不定な物事は書けるときに…

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

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

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

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

nodeパッケージマネージャーの管理をcorepackに移行した&設定メモ

前置き この記事は2023-02-18 corepack@0.16.0 時点でのメモです corepackの進化に伴いこの記事は陳腐化する可能性が高いです。 移行した Node.js自体はasdfで管理しているのだけど、npmはnodeに付いてくるやつを使いyarnとpnpmはhomebrewで粗雑にインスト…

fishシェルで特定のコマンドがあるときのif文を書く

dotfilesの中にあるconfig書いているときに、「ビルトインじゃないコマンドを持っている環境の場合にこうしたい」みたいな気持ちになったのだけど、fishでいまいち書き方がわからなかったので調べた。 if…? if構文がこれなんだけど、『コマンドがあるとき』…

SolidJSの面白いところ、気になるところ

スマホのブラウザタブにいつなんで開いたかはわからないのだけどSolidJSのページがあって、妙に閉じずに見たほうがいいような気がしたので調べたり触ったりした。 とりあえず2022-03-13現在のメモを書く。なおバージョンはv1.3.0が最新なので1系について。 …

USキーボードでWindowsのキーバインドをMacと同じにしたかった

未完シリーズ。敗北したけど書いておく。 tl;dr Windows keybind hotkeys · GitHub 成果物。 で、結局うまく快適にならなかった。 このブログ書いてるときにこういうのを見つけてしまったので、これを使うのが早そうだけど疲れたので触ってない。たぶんこう…

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

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

TypeScriptでPromiseの返り値の型をNonNullableにする

表題の欲求が発生して、ハマったので色々調べていた結果のメモ。 こういう感じだった。 gist.github.com ようは、Utility型を使ってPromiseの返り値をゲットしてNonNullableにしてPromiseに戻す というそれだけのはなし。ConditionalTypeの解説はここではし…

Auto AssignでPullRequestのreviewers, assigneesを自動割り当てする

チームのGitHubリポジトリへPRを出すときに毎回ポチポチReviewerとAssigneeをクリックするのがダルすぎたのでなんとかしたくて設定した。 要求事項としては 対象のリストのメンバーの全員をPRが作成されるたびにreviewerに自動アサイン PRのassigneeにはPRの…

VS Codeで複数行選択して各行にカーソルを置くやつ

なぜか憶えられなくていっつもやりかた忘れるので書いておくシリーズ これをやるショートカット ⌘+Shift+Lで できる。 環境によってはShift+Option+Iでもできるかもしれない。 終わり。

styled-componentsに独自のpropsを生やして値を渡したら怒られたときのメモ

2行 独自に生やしたpropsをまるごと渡してはいけない 分割代入でdomのattributesに定義がないpropsを間引く エラーメッセージ なんかこういう2種類のやつを言われる React does not recognize the `isAvailable` prop on a DOM element. If you intentionall…

ZEITのnow(v2)でデプロイしたらドメインaliasを最新のデプロイに追従させる

nowでホスティングしていて、例えば『hogefuga-goyani001m.now.sh』みたいなユニークURLにaliasを貼って『awesome.hogefuga.jp』でドメイン設定してあるとする。 なんか変更があってnowコマンドで再度デプロイすると新しく『hogefuga-gree002w.now.sh』のよ…

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

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

chrome dev toolsのコンソールに出力されたオブジェクトをコピーする方法

tl;dr オブジェクトを右クリックしてStore as Global Variableをクリック copy(temp1) ⌘+Vでペーストできる! これをこうして… コピペできた ありがとうstackoverflow stackoverflow.com 手法はここに書いてあることが全て…。 Failed to save to temp variab…

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で継承したinterfaceのプロパティを一部上書きする方法

やっていいかは別として バグの原因になるとか、OOPに反するとかいろいろあるけれど、interfaceをextendsして継承元にあるプロパティを一部だけ上書きして別のプロパティにしたいみたいな気持ちになることがある(と思う)。 おさらい interface Aがあってそれ…

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…

React Hooks(proposal)の予習をしたので自分用のメモをさらす

Hooksのalphaがきてやいのやいの言ってるので自分も追っておきますかということで予習。 この記事はReact v16.7.0-alpha時点の仕様と学習メモなので、Stableリリースされた時点でこの記事を参照にするのはよくないです。おそらくAPI変更が行われるはずなので…

Alfredのクリップボード機能で不要なものを単体で消す

AlfredのPowerPack買うとクリップボード拡張がついてきて、まあ要するにクリップボードの履歴が使えるようになる。 使っているとたまに ミスってコピーした 別にいいけどできればあんまり残しておきたくないようなものをコピーしてしまった 設定からアプリ拒…

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

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

fishでrange(範囲指定)展開したかったけど諦めた

$ echo {1..200} みたいなブレースで囲うrange展開をしたかったんですよ自分は。 結論 fishではシュッとやるの無理っぽいので echo (seq 200) でやる。自分はシュッとやりたかった。 そういうわけで例えば連番フォルダをfishでつくりたいときは mkdir hoge(s…

fishシェルでmkdir hoge && cd $_したかったけど面倒だった

結論 bashにはこういう文化があって便利。 shuzo-kino.hateblo.jp fishでもやりたかったけど、なんだか面倒だったので&& cd $_形式でやるのは諦めた。 qiita.com のでこの方のQiita記事のものを使わせていただいてこれからはmkcd hogeでやっていくことにした…

TypeScriptでReact.createRef()に型定義をわたす

React Refsとは https://reactjs.org/docs/refs-and-the-dom.html ReactでDOMを参照するアレ. この記事ではv16.3から実装されたReact.createRef()を使うrefsのことを指している。 そんなプロパティないとか怒られる 型がない 例えばこういう風にinputタグにr…

JavaScriptでオブジェクトの分割代入をするとき変数名を別の名前にする

オブジェクトの分割代入(Destructuring assignment)をするときに、変数名を自分の好きな名前に変更したいと思って調べたら、方法があった。 MDN developer.mozilla.org 異なる名前を持つ変数への代入 var o = {p: 42, q: true}; var {p: foo, q: bar} = o; c…

Node.jsのアップデートをするとnpmのグローバルモジュールが消える

タイトルのことで困っていた。 僕はNode.jsのパッケージマネージャにnodebrewを使っているのだけど、先日使おうと思ったノードモジュールが動かなかったのでNodeのバージョンかもしれないと思ってv8.4.0からv9.5.0に変えた。それでその時に気付いたけどタイ…