Astro製サイトのランタイムをBunに移行した

ごきげんよう。そしてお久しぶり。このサイトの技術構成に関して、前回の記事から以下三点の更新があったので紹介する。

• Bunの採用
• 画像処理の簡素化・レスポンシブ対応
• リンクカード内の画像の取り扱い変更

Bunの採用

Node.js / pnpmに代わり、ランタイム / パッケージマネージャにBunを採用した。速い（らしい）。エンジンがV8じゃない（JavaScriptCore）。TypeScriptを直接（追加パッケージなしで）実行できる。いいことばかり。

Say goodbye to Node: Bun migration by haxibami · Pull Request #373 · haxibami/haxibami.net

Limitations Wrangler cannot run on bun runtime (with bunx --bun), until bun implements performance.markResourceTiming (Implement performance.markResourceTiming oven-sh/bun#8867) 🐛 BUG: Error when...

github.com

移行にあたってつまづいた点はZennのスクラップにまとめた。必要なだいたいの処理は完全にBunのランタイムで（--bunオプション付きで）実行できるが、WranglerでCloudflareにデプロイする処理だけはうまくいかなかった。いつか直るといいね。

画像処理の簡素化・レスポンシブ対応

以前の実装では<Image />コンポーネントを使い、なにやらガタガタと自前で画像をimportする処理を書いたが、Astro 4.2の変更に伴って不要になった。より簡単に、remarkプラグインで画像ノードにいくつかのパラメータ（=<Image />のオプション）を渡しておけば、その通りに画像を最適化してくれる。これに関連して以下の二つのプラグインを書いた。両者あわせて、パラメータの受け渡しに加え、画像読み込み待ちのプレースホルダーの取得なども行っている。

• remark-astro-image-opt
  • 画像の幅と高さを取得、レスポンシブ画像用にwidths, sizesなどのパラメータを渡す
    • これが<Image />のオプション
  • プレースホルダー（base64）を生成、パラメータとして埋め込む
    • こちらはあとで独自の画像コンポーネントに置き換える際に利用
• rehype-astro-image-figure
  • <p>を<figure>に変更（これだけはremarkではできない）

ちなみに「独自の画像コンポーネントに置き換え」とあるが、以前の実装で行っていた<img>から<Image />への置き換えとは異なる。あくまで画像の親要素（Markdownの文法上、独立した画像は必ず<p>要素を親に持つ）に着目し、ざっくり言えば<p><slot /></p>を<figure><slot /></figure>に置き換える処理を行っている。^{1 2}

リンクカード内の画像の取り扱い変更

以前の実装では、リンクカード内のOG画像はすべてbase64形式で埋め込まれていたが、この方法にはドキュメント本体のサイズが肥大化するという問題があった（完全に見落としていた）。代わって、画像が要求される度にpublic/.cache/embed以下にキャッシュを作る方針に変更した。おそらくはもっとよい方法もあるのだろうが……