Localhost Open Graph DebuggerをHonoでリプレイスしました

Localhost Open Graph Debuggerはローカルで開発中のページのOpen GraphタグやSNSでの表示のされ方を確認できるGoogle Chrome拡張機能です。 拡張機能を実行するとメタタグやog:imageをog.nullnull.devで一時的にホストし、一意のURLを発行します。 そしてそのURLをSNSやチャットアプリが提供しているデバッグツールに入力することで確認ができる、という仕組みです。

2021年にリリースしてからバックエンドのフレームワークはExpress.js→Laravel、ホスティング先はEC2→HEROKUと変わってきましたが、無料で運用したかったこととデザインが若干古臭くなってきたため拡張機能とバックエンドの両方を新しく作り直すことにしました。

主な技術スタック

バックエンド

• Figma
• CloudFlare ( Pages, Workers, D1, R2 )
• Hono
• React
• TypeScript
• Storybook
• Biome.js
• Vanilla Extract
• UVCanvas
• Zod
• Vite
• Tabler Icons

拡張機能

• Figma
• React
• TypeScript
• Storybook
• Tabler Icons
• StyleX
• Biome.js
• Radix UI
• Vite

今まで使用したことのないものをいくつか取り入れてみましたが、特にHono、Biome、CloudFlare周りのサービスは開発体験が良かったので今後も機会があれば積極的に使用して行きたいと思います。

Type safeなCSS-in-JSはVanilla ExtractとStyleXの両方を使ってみたもののフレームワークやバンドラー周りでまだ解決されていない問題が残っているようで実務で使うにはまだ少し怖いなという印象です。 StyleXは今年中にはver1.0.0になりそうなのでそのタイミングでまた触ってみたいと思います。