/ddddddiary

なんとなく実行環境で何が起きてたかのイメージはできたが、まだぼんやりしている。

---

• 
  • 俺のトップアーティストがおしゃれインディー女子すぎる件
    • 口内環境は最悪なのに
• 
  • ベース、アメリカ、プログラミング、そして動物

しばらく作ってた機能をリリースしたらとんでもない勢いですべての API のレイテンシが50倍ぐらい悪化した。すぐロールバックしたので本番影響はほぼなかった（なくあってくれ）。原因はほぼ確定してて、新しく作ったクエリで DB を2万行ぐらいフルスキャンしてたということ、そして一番問題なのはこれが1秒に60回ぐらい呼び出される API だったってことなんだよな。とんでもない頻度でフルスキャンし続けることによっておそらく DB の実行環境で様々なことが起こり（ここの解像度上げたい）、それに引きずられてすべての読み取りが激遅になったのではないか。

うーん。本番環境ぐらいのデータ規模で本番環境ぐらいの頻度で事前にテストできてたら気づけてたんだろうな（ただリードレプリカとかはない）。とにかく QPS がヤバい API であることを念頭に置いて、実行計画をちゃんと読んでおくべきではあったし、ユーザのいない時間帯にこっそりクエリ走らせて負荷試験もするべきだったのか。というか、そもそも API の QPS 気にしてなかったのがまずいな。それが一番まずかったかもしれん。

API を生やす仕事。早く上がって映画館で「天使のたまご」見る。傑作すぎる。素晴らしい。

---

• いい機会なので、新しく生やした API で運用・監視に必要な諸々の指標をちゃんと取る練習をしたい。そのためには、ウチだと Datadog とか Sentry とか GCP のプロファイラとか Cloud Monitoring みたいな、すでに使ってるツールについて詳しくなる必要がある。
• まずは Sentry について濃厚に調べてけっこう解像度が上がる。明日は Datadog について調べる。そもそも（今どきっぽい用語だと）オブザーバビリティの全体像とか監視の基本みたいな話がかなり怪しいので、まじでこれとかこれとか読むべきだ。実際になにかを作ってる時より、なにかについて調べて詳しくなってる時間のほうが好きかもしれない。
• あと、ソフトウェアそのものより、どっちかというとこういう運用の基盤みたいなの作る仕事したくなってきたんだけど、こういうのなんていうんだろう。プラットフォームエンジニアリング？

歯医者に行った。お前は今こういう状態ですと見せられた写真はとんでもない有様で（例えるならパチンコ屋の灰皿、サイレントヒルの裏世界）普通に恥ずかしかった。

仕事が順調に進む。今作ってる機能のフロントエンドは全部書き終わったので、あとは PR 分割してレビュー出して終わり。残るはサーバサイド。なんか色々やることあってめんどくさいんだよな。なんか口内に違和感があり2週間ぐらい歯医者行きたいと思い続けてる。しかし思い続けてるだけで次の一歩が踏み出せない（？）。明日は絶対に歯医者予約する。予約できたら100点

---

• なんとなくもう useSWR 使わずに use と素の fetch だけで Suspense しつつデータ取れんじゃないかと思って試してみたら、簡単にできた（型は適当）。この useFetch をコンポーネントの中で使うとサスペンドしてくれる。

  • const promiseCache = new Map<string, Promise<unknown>>();
    
    const useFetch = (key: string,　fetcher: () => Promise<unknown>): unknown => {		
        if (!promiseCache.has(key)) {
      	const promise = fetcher()
      	promiseCache.set(key, promise);
        }
        return use(promiseCache.get(key) as Promise<unknown>);
        };　
    

  • 肝は Promise をスコープ外にキャッシュしておく必要があるところだ。キャッシュしないと無限再レンダリング地獄になる。なぜそうなるのかについてはここが詳しい。まあこんなもんでいいだろ。外部依存なんて使わなければ使わないほど良い。
• せっかくだからライブラリ使わずに Context だけで状態管理するか、って思ったけど selector 的なものを素の React でどう書けばいいのかわからない。
  • AI に聞いたら useSyncExternalStore を使えばいいらしいんだけど、ほんまか？この hooks のこと全然知らない…
    • こういうかんじになるのかなぁ
  • こんな useSyncExternalStore の使い方が