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

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

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

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

direnvで親階層の.envrcも複数読み込む

これ、またやってしまった tech-1natsu.hatenablog.com コミッタ名がおかしくなるやつ なんでやってしまったかというと、direnvでgitコミッタ名を管理しているからで、親階層にGitコミッタ名の変数を管理している.envrcを置いている。 その状況下でプロジェ…

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 型」と書かれたものを見かける。 このコードは引数に…

Kyoto.js 15 で「CSS in JSでメディアクエリをパッとやる」というトークをした

Kyoto.js 15に参加した。 発表枠で応募してLT枠という形で出た。けど5分じゃなくだいたい10分位というざっくりした感じで喋った。たぶん10分位で喋れてたと思う(計るの忘れてた)。 しゃべった内容 CSS in JSと書いてから気づいたけど主語が大きすぎると思っ…

React Hooks使って『Hooks can only be called inside the body of a function component.』って怒られる問題

まだalphaリリース(v16.7.0-alpha)のHooksを使っていたらハマった。 『Hooks can only be called inside the body of a function component.』とエラーバウンダリーの画面で怒られてしまう。 状況 親プロジェクトでHooksを用いたライブラリコンポーネントを…

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

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

VS Codeでたまに見えないスペース文字らしきものが混入して文字化けする問題、一時解決した

たまにVS Codeで文字打ってるとエディタ上では可視できない謎の1文字分のスペースらしきものが混入してしまうバグに悩まされていた。 混入していることをしらずにgit pushしたりして、GitHub上で見てみると文字化けしていたりして完全に怒り心頭でとなってい…

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

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

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

VS Codeでjsx,tsx書いてるとformatOnSave(保存時にフォーマットするオプション)が効かない問題

現象 Prettier走ってほしいのに、React書いててファイルがjsxあるいはtsxだとなぜか効かなくて困った。 原因はデフォルトでformatOnSaveをfalseにしていて、言語ごとにtrueにしていたからだった。 解決方法 VS Codeのsettings.jsonでこう書いていたのが原因…

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

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

Pixelaを使って生存記録をつけている

Pixelaというグッドなウェブサービスがある。 pixe.la GitHubの草と同様のコントリビューショングラフを作れるサービス。ユーザ登録からグラフの作成、グラフに草を生やすまで全部cliで完結できていい。 基本的に草のグラフは日々の継続の可視化するために使…

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

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

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

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

Karabiner-elementsでFor Japanese(日本語環境向けの設定)を使うとCommandキー組み合わせのショートカットが効かなくなる問題解決した

タイトルが長い。 MojaveにアップデートしてKarabiner-Elementsを入れてから困っていた。例えばブラウザでリンクを新規タブで開きたいナーっていうときに自分はCommand+クリックでやっていたけど、そういうCommand+[some]な組み合わせのショートカットが一切…

fishシェルでhub browseができない問題解決した

状況 github.com hubをbrewで入れている。 シェルはfish. gitリポジトリ上でhub browseすると exec: "google-chrome": command not found といわれてブラウザが開いてくれない。google-chromeなんてそんなコマンドはない。本来はopenコマンドが呼ばれるはず…

MacのMissionControlの速度をSierra/High Sierra/Mojaveでも高速化する方法

Mojaveに上げた。そしたらMissionControlとExposeのアニメーション速度が激遅に戻ってしまった。 僕は4本指トラックパッドの上下スワイプでこれらを切り替えるようにしているけれど、激遅になった上にかなり大きく指を動かさないとMissionControlあるいはExp…

過去のgitコミットのCommitとAuthor情報を修正する

gitのコミット情報がおかしい git logして履歴みてたりGitHubにpushしたコードをブラウザで眺めたりしてたらサムネイルが出てなかったりメールアドレスがおかしかったりコミッター名が違ってたりしてアレってなったとき。気持ち悪いので修正したい! 修正 .g…

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でやっていくことにした…

fishシェルでrbenvのPATHを通す

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

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

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

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

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