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

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

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

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

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…

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

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

『react-use-event-listeners』というカスタムフックをリリースしました

しました。 www.npmjs.com いますぐ yarn add react-use-event-listeners これはなに ReactのhooksスタイルでDOMに対してaddEventListenerするやつです。 Reactで合成イベント(SyntheticEvent)ではないイベントを使いたいときにaddEventListenerでイベント登…

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

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

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]な組み合わせのショートカットが一切…