Zenn

Tailwind CSS で未定義のクラスを指定したら絶対エラーにしたい

この記事の概要 Tailwind CSS v4 を前提として、「未定義のクラスを指定した際に Lint エラーになるようにする」を eslint のプラグインで実現する。 私が知っている中で最も著名なプラグインは eslint-plugin-tailwindcss なのだが、Tailwind CSS v4 対応がまだベータ版である。 そのため今回は主に eslint-plugin-better-tailwindcss を使っていく。 環境 Tailwind CSS: v4.11.1 eslint: v9.32.0 typescript-eslint: v8.38.0 e...
Zenn

memlab でメモリリークに立ち向かってみた

! 最初にお詫びですが、結局メモリリークを根絶しきれていない可能性があります。 モチベーション VRoid Studio で作ったモデルをウェブサイト上で展示するためのスクリプトを自分用に作っているのですが、three.js のリソース破棄が難しすぎます。 どうしてもメモリリークしている気がしてならないので調べようと思い、情報を集めた結果、memlab を使うと良いらしいので使ってみました。 https://facebook.github.io/memlab/ memlab そのものについては公式サイトをご参照ください。 memlab を使う 調査対象の概要 ウェブサイト上...
Zenn

Fluid Compute が無効でも関数インスタンスの再利用は起こる

この記事の内容 Vercel の Fluid Compute を有効にするとリクエスト間で関数インスタンスを共有することになります。 それによって、たとえばグローバル変数が共有されるようになるので、今まで起こり得なかった漏洩が起こるようになるのではないか? という説を耳にしました。 そこで、そもそも従来のサーバーレス関数ならグローバル変数は共有されないのか? という点を検証しました。 実際に試したこと 環境 Next.js 15.3.3 デプロイ先は Vercel の Hobby Plan 実装 下記のような Route Handler を作りました。 src/ap...
Zenn

【Astro】コミュニティ製の便利かもしれないツール紹介(Astro Open Graph, @studiocms/cfetch)

Astro 公式ブログではコミュニティ製の便利なツールが紹介されています。 https://astro.build/blog/whats-new-april-2025/#tips--tools その中から Astro Open Graph(morinokami/astro-og)と @studiocms/cfetch を紹介します。 Astro Open Graph https://github.com/morinokami/astro-og Astro の Dev toolbar で Open Graph の見た目を確認できるようにする integration です。 インストール...
Zenn

Cloudflare Pages にデプロイした静的アセットは消してもすぐには消えない

結論 Cloudflare Pages にデプロイした静的アセットは、消した後も最大一週間は消えない仕様がある。 実際にあったこと プライベートで Astro 製の静的サイトを Cloudflare Pages にデプロイしている。 先日あるページを削除したのだが、そのページの URL を直接開くと普通に表示されていることに気づいた。 キャッシュを疑ってキャッシュをすべてパージしてみたのだが、それでも消えない。 問い合わせてみたところ、下記ページを示され仕様であるとの回答を得た。 https://developers.cloudflare.com/pages/configurat...

React で lodash.throttle みたいなことをしたい

もう少し具体的に言うと、親コンポーネントから子コンポーネントに渡した関数を、子は自由に実行するのだが、実際にその関数が実行されるのは最大で 1 秒に 1 回にしたい。

Pagefind で検索機能を付ける

Pagefind で Hugo 製のブログに検索機能を付けて Cloudflare Pages でデプロイする。

最近仕事で使ったテクニック

仕事で使ったテクニックを個人のブログに記しておかないと退職時に失ってしまうので書き写しておく。「ブラウザが webp をサポートしているかどうか判定」、「画像が読み込み終わったことを検知する」、「IntersectionObserver を使うための React hook」について。

reg-suit で画像比較する

Figma のデザインと実際に実装した結果を機械的に比較したかったので、reg-suit で比較することにした。

wrangler で cron 実行の Cloudflare Workers を作る

『Cloudflare Workers を使って Cloudflare Pages の古いデプロイを自動削除する』という記事を去年書いたが、この内容を wrangler で作り直す。