最新と最古を比較 結構長くなったので最初にどーんと比較。 …いうほど変わってないか? 2020年 5月 入社直後 一番最初。HHKB を買った、デスクを買った以外はほぼ大学のときと同じ構成だった気がする。 https://twitter.com/le_panda_noir/status/12659581376…

インターフェイスは何かと何かの境界。 UI はユーザーとソフトウェアの間のインターフェイス。ソフトウェアは UI を通じて表示したりユーザーからアクションを受け取ったりする。 キーボードはユーザーと PC のインターフェイス。ユーザーはキーボードを叩く…

タイトルのとおりです。 作ったもの tsserver には、ファイルを移動させると相対パスを自動で修正する機能があります。 例えば A.tsx を B.tsx にリネームすると、A.tsx を import していた箇所が自動で修正されます。 import {Component} from './component…

去年の → 2021年を振り返る - Panda Noir 仕事、趣味、プライベートについて書くぞい。 仕事 テックリードという肩書きを思う存分振りかざして仕事した ずっと JS ファイルを TS に置き換える件を進めてた テストもたくさん書いた。スナップショットテストも…

In short: ES2017 が動く環境を対象にビルドするなら 例として ES2017 が動く環境を対象にビルドを考える。 tsconfig の target に es2017 を指定 tsconfig の lib に es2017 を指定 dom も必要であれば加える 他の機能、例えば Array.prototype.flat が欲し…

import { setupServer } from 'msw/lib/node'; import { rest } from 'msw'; type ArticleResponse = { title: string; id: string }; setupServer( rest.post('/article', (_req, res, ctx) => res( ctx.json({ title: 'mocked article', id: 'id' } satisf…

debug の出力には文字数制限があります。それを回避する方法について紹介します。 in short: debug ではなく prettyDOM(baseElement)) を使う const { debug } = render(<HelloWorld />); debug(); ↓ import { prettyDOM } from '@testing-library/react'; const { baseEle</helloworld>…

useRef<Readonly<HTMLElement>>(null) とすれば ref.current.innerHTML = '' などを禁止できる。つまり、setter として ref を使わないという意思表示になる。 まあ、setAttribute とか appendChild は防げないので完璧ではないですが</readonly<htmlelement>

短いコードのほうが読みやすい傾向はあります。しかしながら、 短くて誤読しやすいコードよりは、長いけど誤読しないコードのほうが可読性が高いです。 今回はその話をします。 「短ければ可読性が高い」というのは勘違い 短くても可読性が低いコードはあり…

const Component = () => <div data-foo={xxx} /> みたいに色々な値を data-attribute に渡してみました。 結果: undefined, null: そもそも追加されない NaN: ワーニングが出る そのほか: 文字列に変換されて値としてセットされる 検証に使ったデモがこちら</div>

JSON.stringify(undefined) は undefined です。 以上です。 JSON.stringify(undefined) の結果は？— panda noir (@le_panda_noir) 2022年1月20日 正答率10%。みんな undefined を渡したときの挙動を知らなかったっぽいですね(僕も知りませんでした) 補足 JS…

コールバックrefの実装方法によって ref が渡されるタイミングが異なります。 インライン関数で渡した場合(<element ref={(ref) => {}} />): 再レンダリングされるたびに呼び出される メモ化したり、クラスのメンバーに格納して各レンダリングで同じものを渡した場合: マウント時と</element>…

In short: 関数が reference を返す場合(useRef の返り値など)は返り値のみにジェネリクスを使っても問題ない fetch のような返り値が引数の内容によって決まるケースでも(型安全性は犠牲になるが)使うことがある。 ジェネリクスの一般的な用途 そもそもジェ…

結論: 以下を .git/hooks/post-checkout に追加 #!/bin/sh PREV_BRANCH=`git reflog show -q | head -n1 | awk '{print $6}'` CACHE_DIR=~/.cache/my_project_node_modules mkdir -p $CACHE_DIR prev_node_modules_cache="$CACHE_DIR/$(git show $PREV_BRANC…

毎回どれを使えばいいのかわからなくなるのでまとめました。 今回紹介したサンプルはこちらのリポジトリにまとめてあります。 jest-mock-demo (この記事では純粋に jest について書きたいので、サンプルは TS ではなく JS で書かれています。ts-jest が絡ん…

(めっちゃ短いけど、ちょいちょい調べるので) useLayoutEffect は componentDidMount や componentDidUpdate と同じフェーズで実行されるということに注意してください 引用元: フック API リファレンス useLayoutEffect 逆に言えば、componentDidMount と c…

最近のYouTube君がよく使うこのUIパターン、名前ついてるのか気になってる(フロート型で下スワイプで消せて上部にバーがついてるやつ) pic.twitter.com/EJeLQ8wSoS— クロパンダ (@le_panda_noir) 2022年8月12日 ↑これを CSS + JS で作りました。フロートカー…

https://github.com/Fieldscope/flux-hooks を参考にしつつ、型をつけたり型推論が効きやすいように調整したりしてます。 export const useFluxStore = < TStore extends ReduceStore<TState, unknown>, TState = ReturnType<TStore['getState']> >( store: TStore, reducer: (store: TStore) => T</tstore['getstate']></tstate,>…

"再利用可能になった" はわかる。テストを書きやすいように書くと自然とそうなるから。でも、"再利用可能にしよう" がわからない。YAGNI(You ain't gonna need it)に反しているし、モジュールの安定度を上げる行為だからもっと慎重になるべきだ。そもそも、…

FlexiSpot e8を買ったのでレビュー 結論 メチャ最高 スタンディングがとにかく楽 上げ下げがボタン一つでできて楽 グラつきもない とりあえず不満点はほぼない。価格も高すぎるって訳でもない。心なしか腰痛も治ってる気がする。 (腰痛が改善してもマイナス…

jest.resetModules() などの関係でこのエラーが出ることがあります。そういうときにごり押すハックを編み出したので紹介します。 jest.mock('react', () => jest.requireActual('react')); それがこちらです。こうすることで jest.resetModules や jest.isol…

スーパーで買い物をしたとき、店員さんがまずカゴに詰めてくれます。店員さんは気を遣って下に重いもの、上に軽いものというように積んでくれますが、カゴはFILO(先入れ後出し)なので、上から順にカバンに詰めると今度は下に軽いもの、上に重いものが来てし…

さて、タイトルにある通りです。「32文字以下かつアンダースコアを1つ以上含むか」を正規表現だけで判定してみましょう！ (もちろん str.length <= 32 && str.includes('_') で判定できるしそうすべきなので、この記事に実用性はありません) 解答: さて早速…

スナップショットテストとは? レンダリングした結果のDOM構造をテキストベースで書き出し、その結果が前回と変わっていないかをチェックするテストです。DOM構造が一切変化してないことを保証できます。 スナップショットテストの意義 A. コードを変更した時…

無限のQAリソースで出来ること 無限のQAリソースと無限の時間さえあれば、こんなことができます！ 躊躇なくライブラリをアップデートできる (なぜならQAリソースが無限だから) 抜本的なリファクタリングができる (なぜならQAリソースが(略)) アーキテクチャ…

tl; dr アプリ開発でコーナーケースを網羅する必要はない。 まず正常系を一通りテストするのが最重要。 競プロでは「関数がインプットに対して正しくアウトプットできているか?」に意識が向きがちだが、この意識はアプリ開発には向かないんじゃないか?という…

結論: AST を作って、それを元にコードをフォーマットしているから、プログラムの動作は一切変わらない 結論をもう書いたので、意味が分かった人はここより下は不要。ちょっとだけ用語とかの解説をする。 そもそも AST とは? AST とは Abstract Syntax Tree …

NODE_OPTIONS="--trace-warnings" をつけて run すれば OK $ NODE_OPTIONS="--trace-warnings" npm run lint 以上。

いちいち「Alexa、リビングの電気をつけて」みたいに言うの、かったるくないですか?僕は仕事で使ってるMacの充電器をスマートプラグで管理してるので、いちいち「Alexa、充電つけて」と言わないと充電ができません。これが地味に面倒だったので、スマホのホ…

結論: iPad は4本指で上にスワイプするとホーム画面に戻る便利機能があります。これをブラウザで行うと touchstart → touchmove → touchcancel の順で発火します。 touchend が永遠に発火しません。 結論で言いたいことは完結してるので、以下はその補足説明…