オモコロのアーカイブサイトをリニューアルしました

オモコロアーカイブをリニューアルしました。

リポジトリも公開しています。

iOS で PWA のインストールプロンプトが表示されてないっぽいですが、それ以外は大丈夫かなと。

ストアで公開するかは考え中です、お金がないので多分しないです。

以下蛇足です。

今回は主に以下の技術で実装してみました。

• React v19
• Next.js v15
• SWR
• nuqs
• Serwist
• Prisma
• Vercel Postgres
• Docker
• ESLint v9

React や Next.js の最新版については特に書くこともないかなと。

Next.js については公式ドキュメントが記述が追いついていないせいでちょくちょく足を引っ張られましたが。

SWR については、本当は TanStack Query で実装すべきだとは思ったんですが、Static な画面かつ動的なクエリパラメーターの組み合わせ方でどうしても挙動が安定せず、しぶしぶ SWR にしました。

やっぱり無限スクロール系は SWR も TanStack Query も微妙に挙動が怪しいというか、キャッシュとの兼ね合いがややこしすぎるというか、多分自分の認識不足だとは思うんですが…。

そういう意味では nuqs は比較的直感的に使用できて良いですね。

ただ shallow ルーティング周りや、画面遷移ができない点は注意が必要ですね。

PWA については next-pwa ではなく Serwist というパッケージを使用しました。

どうやら今もっともメジャーなパッケージらしく、ドキュメントもしっかりまとまっていてほぼ迷うことなく実装できました。

ただ PWA 自体がかなり下火感あるのがなんとも…まぁアプリ自体がもう限界だよなーとは口が避けても言えませんが…。

そして DB 周りでは Prisma × Vercel Postgres のテッパンコンビで構成しつつ、今回はめんどくさがらずローカル環境を Docker で構成してみました。

別に Docker で作らなくとも、Vercel Postgres に環境を作ってしまえば済む話ではあったんですが、いつまでも逃げるのはいかんなと思い一念発起。（大げさ）

Docker って当たり前ですけど、環境さえ作れてしまえば楽なんですが、環境を作るまでがめんどくさいですよねぇ…。

とくに Prisma と Next.js を組み合わせた場合、環境変数をどう持つかという問題はずーっと頭を悩ませてきます。

今回はリポジトリの README にスクリプトの詳細を書いておいたので、気になる方がおられましたらぜひぜひ。

環境変数は以下の感じで配置してもらえればと。

• env.development.local
  • ローカル、つまり Docker 環境
  • seed はこっちの環境変数を使用するので、その際は VERCEL_POSTGRES_URL を設定すること
• .env.local
  • Vercel Postgres、つまり本番環境

ESLint の v9 で設定ファイルの書きっぷりがまるで変わったのはかなり面食らいました。

公式でマイグレーションコマンドが準備されてはいるんですが、いかんせん普段の設定が複雑すぎて、結局 1 から作り直すことになりました。

そのせいで設定が弱くなってしまったので、またいろいろと調べ直さないとですね…。

実装感についてはそんな感じです。

サイト自体については、まぁとくに特筆することもなく。

Vercel Function を Cron で回してスクレイピングをかける設定になっているんですが、ちゃんと動いているのか毎度ヒヤヒヤしますね。

今回は実装の殆どを Claude に任せたんですが、7 割くらいは信憑性のあるコードを出力してくれる印象です。

裏を返せば 3 割は厳しい出力結果になっているというわけで…ここのバランス感が難しいなぁと。

もしよければインストールして使ってもらえると嬉しいです。