Uncategorized
画像のCLSが0.25超えてたのでaspect-ratioで押さえ込んだ記録新着!!
Lighthouse回してもスコアがずっと赤いままで、CLSが0.25を超えています。RenderingタブでLayout Shift Regionsを有効にしてリロードすると、画像コンポーネントの読み込みが完了したタイ […]
Server ComponentとTanStack Query、結局どっちでfetchするか新着!!
App RouterでデータフェッチをServer Componentに寄せる構成とTanStack Queryを併用しているんですけど、この境界線を曖昧にしたまま進めていたら、最近その影響がコードに出てきちゃいました。 […]
axiosでアクセストークン自動リフレッシュの無限ループを防ぐ
トークンベース認証のSPAで、アクセストークンの有効期限切れをaxiosのレスポンスインターセプターで検知して、自動でリフレッシュする処理を入れたんです。最初に書いたコードが想定通り動かず、むしろリクエストが無限に飛び続 […]
Viteで本番だけログインできない。VITE_の付け忘れとimport.meta.envの誤解だった
Vercelにデプロイしたら、ビルドは成功したのに本番環境でログインボタンを押しても一切反応しなかった現象がありました。 コンソールを開いてみると次のようなエラーが出ていました。 undefinedのsplitメソッドを […]
CIでたまに落ちるFlaky Test。isMountedをやめてAbortControllerで直した
これまで、ローカルでは再現しないのでマシンスペックのせいかと思って再実行で済ませてましたが、調べてみたらコード側に原因があったのでメモします。 修正が必要そうなのは、Reactコンポーネントのデータ取得後のレンダリング待 […]
addEventListener消し忘れでブラウザが落ちた？DevToolsでメモリリーク修正記録
ポートフォリオ用のSPAを触っていたところ、しばらく経ったところでファンが回り出して動作が重くなり、最終的にブラウザごと落ちました。 DOM要素がたかが数百程度のポートフォリオサイトなのに、何かがリソースを食いつぶしてい […]
Next.jsでブラウザAPI使おうとして「window is not defined」って怒られたら
Next.jsで開発してると必ず出くわすエラーです。 最初のうちはもちろん、もう知ってるはずなのに、ついwindow.localStorageと書いちゃってまたこのエラーが出ちゃうことも珍しくないです。 一応、モジュール […]
justify-contentに頼らない「Flexbox×margin: auto」で手軽レイアウト
Webサイト作ってるとき、レイアウト調整といえば、大抵Flexboxを使っています。 でも実装しているときに気づくのが、親要素（Flexコンテナ）にてjustify-contentだけで配置しようとしすぎちゃう点。 それ […]
inputのフォーカス外れ？コンポーネント内のコンポーネント定義のバグ
プロジェクトで、検索フォームコンポーネントを作成していたのですが、テキスト入力欄に文字を入力するたびに、謎のフォーカス外れが発生してました。 こんな感じです。ユーザーからしたら単純なバグでは済まない、明らかにUXが損なっ […]
Next.jsのHydration Errorに、useEffect以外で3つのやり方で回避する
Next.jsで開発しているとよく遭遇するあのエラー。 Hydration Errorです。サーバー側のレンダリング結果とクライアント側の結果がズレたときに出るやつです。 とりあえずuseEffectという力技はやめて、 […]