全然書いた記憶はなかったんですが、昔の僕は逆FizzBuzz という問題に挑戦してました。 逆FizzBuzzを解いてみた - Panda Noir この解答コードがもうちょいシンプルに書けたので載せておきます おさらい: 逆FizzBuzzとは? [1,2,3,4,5,…] のように並んだ数列が…

「善は急げ」はよく知られています。しかし、実は続きがあるそうです。それが「悪は延べよ」です。 悪は延べよの意味は、「悪いと思う事は、一事延期せよ、そうすれば事情がやがて変化して、行なわないで済むようになることもある。」とのことです。 プログ…

以前pubsub パターンのベタープラクティスを考えたんですが、よく考えたらイベント名を設定する必要なかったです。 これでよさそう↓ class PubSub<Payload extends unknown[]> { private listeners: ((...payload: Payload) => void)[] = []; subscribe(callback: (...payload: Payload)</payload>…

(vim + mini.comment 編と書いたが、別に他パターンを書く予定はない) 割と手間取ったのでメモとして残しておきます。他の人の参考にもなりそうなので 結構無理やりな方法を取ったので、もっとスマートなやり方がありそうですが… ポイント: hooks.pre で fil…

実際にシンタックスハイライトされてるところ const Component = () => { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(n => n+1)}>{count} times clicked!</button> ); }; ↑ こんな感じで、tsx がハイライトされます！！！！ やり方: 以下のコードを…

MGS(マジ業務使いのシェルスクリプト)がまあまああるのでまとめる。いま思いついたものだけ書いてるが、思い出したら追記するかも。 説明 コマンド スペース埋め出力から特定列を抜き出す | awk '{print $1}' 先頭から特定の文字までのみ表示 | cut -f 1 -d …

結論: localeCompare を使う a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}) 参考: https://stackoverflow.com/a/65687141 localeCompare は IE11 でも使えるので、使えない心配はほぼありません。 しかし、locale とついているため…

lua でファイル管理したいなぁ…という気分になったので乗り換えることにしました。今のところそんなに違いは感じてないです (まだ書き換えてる途中なので以下の記述はミスってるかもしれないです) migration guide そもそも、 packer.nvim でインストールす…

公式の RSS リーダーウィジェットだと単一の RSS しか購読できないので、複数の RSS を読めるウィジェットを実装しました。 RSS リーダーウィジェットの追加方法 手っ取り早くウィジェットが欲しい人は以下の手順でどうぞ AiScript App ウィジェットを追加 A…

以下のアウトラインに沿って記事本文を考えてください - まずアウトラインを考える - 肉付けしてもらう - 修正をする - という記事がChatGPT によって生成されていたっていうオチにしたい こんにちは、ChatGPTです。今回は、記事のアウトラインを考え、肉付…

何に使えるかは全然わからないですが発見したのでメモ。 まず循環参照を持った配列を定義します。 const a = []; a[0] = a; a[1] = 0; これの flat を呼ぶと面白いことが起きます。 console.log(a.flat()); // [ <ref *1> [ [Circular *1], 0 ], 0, 0 ] console.log(</ref>…

tl;dr ChatGPT にお題を考えてもらって実装するというサイクルが結構いい感じにハマる 「やる気だけはあります！」という人がいます(ネットでしか見たことないけど)。こういう人はおそらく本当にやってみたいんだと思いますが、その先のロードマップが見えて…

{}.a?.(console.log('hoge')) ↑この時 console.log('hoge') は評価されない。つまりログに hoge と出力されない {a:()=>{}}.a?.(console.log('hoge')) ↑この時は console.log('hoge') も評価される。ログに当然 hoge と表示される。 || 演算子や && 演算子は…

結論: (トップレベルで関数を宣言するときに限り)function かアロー関数かは好みの問題。 アロー関数が出てきた当初と状況が変わってきた www.pandanoir.info 2016年に「function よりアロー関数を使うべき(function は適切な場面でのみ使うべき)」という記…

小技。 「一時的な変数を useRef で定義したい」といった時に便利なテクニックです。 { const prevValue = useRef(value); useEffect(() => { if (prevValue.current === value) return; // 変化したタイミングで行う処理 prevValue.current = value; }, [va…

最新と最古を比較 結構長くなったので最初にどーんと比較。 …いうほど変わってないか? 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 ランタイムの解説として不適切な箇所があります。jest ランタイム難しい… 時間があるときに直そうと思ってるんですが時間が取れません… とりあえず本記事を参考にしないでください。 本文 毎…