メモ

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に変えた。それでその時に気付いたけどタイ…

Netlifyには連携先のリポジトリURLを格納している環境変数がある

Netlifyはデプロイ時にprocess.envにREPOSITORY_URLというキーでgitリポジトリを格納している。 process.env.REPOSITORY_URL // 連携先がGitHubならGitHubのリポジトリURLが入っている なのでNetlifyでのビルド時だけリポジトリURLを参照してなんかやりたい…

Chrome DevToolsであれどうやるんだっけのメモ

DevToolsの便利APIリファレンスどこ コマンドライン API リファレンス | Tools for Web Developers | Google Developers イベントを探したり調査したい イベントの監視 | Tools for Web Developers | Google Developers やってる様子 Get and debug event li…